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

Question

我是THREE.js的新手，并且正在使用着色器进行一些实验。 出于某种原因， 这个时候我调整窗口的大小只有一个显示出来。 代码在这里 。 关于为何仅在调整窗口大小后才显示它的任何建议？

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}
            [...]
           }