javascript - THREE.js 着色器仅在调整窗口大小后显示

Question

我是 THREE.js 的新手，我正在使用着色器进行一些实验。由于某种原因，this仅当我调整窗口大小时才会出现。代码是here 。关于为什么它只在调整窗口大小后才显示的任何建议？

Answer 1

我认为问题是因为您只在函数 onWindowResize 中为分辨率统一赋值:

uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;

因为当你初始化uniform(函数createContent())时，你只需分配一个新的向量(new THREE.Vector2())来解析，它会自动给出(0,0)坐标。查看您的着色器代码，出现一些除以 0 的操作，在我看来，这似乎是屏幕出现时不渲染的原因。

解决方案可能只是在 JavaScript 代码中声明时将坐标分配给统一分辨率，如下所示(函数 createContent()):

var initialResolution = new THREE.Vector2(window.innerWidth,window.innerHeight);
uniforms = {time: {type: "f",  value: 1.0},
            mouseX:     {type: "f",  value: 0.0},
            mouseY:     {type: "f",  value: 0.0},
            resolution: {type: "v2", value: initialResolution}
            [...]
           }