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