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

【问题标题】：THREE.js shader only showing after resizing the windowTHREE.js 着色器仅在调整窗口大小后显示
【发布时间】：2014-11-27 16:40:28
【问题描述】：

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

【问题讨论】：

标签： javascript three.js shader

【解决方案1】：

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

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

因为当您初始化制服时（函数 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}
            [...]
           }

【讨论】：

感谢 dabad，解决了问题。