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

Question

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

Answer 1

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

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

因为当你初始化制服（函数createContent（））时，你只需要为分辨率分配一个新的向量（新的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}
            [...]
           }