Javascript 将简单自定义着色器应用于Three.js多维数据集

我试图在Three.js中将一个简单的自定义着色器应用到一个立方体上，但遇到了一点麻烦。当我尝试应用着色器时，立方体消失。如果我使用一个普通的卡通或兰伯特材质，这不是一个问题-立方体旋转，可以正常操作

尝试应用自定义着色器时，动态观察控件也会停止工作。虽然我已经看过了这些例子，但我似乎无法让它起作用

//设置场景
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=3；
//创造光明
var灯=新的三点灯（0xFE938C，1.5）；
光。位置。设置（0,5,20）；
场景。添加（灯光）；
var geometry=新的3.BoxGeometry（1,1,1）；
变量={
u_时间：{type:'f'，value:0.2}，
u_分辨率：{type:'v2'，value:new THREE.Vector2（）}，
};
var material=新的3.ShaderMaterial({
制服：制服，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragmentShader'）.textContent
});
var cube=新的三个网格（几何体、材质）；
立方体位置集（0,0,0）；
场景.添加（立方体）；
var renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
var render=函数（）{
请求动画帧（渲染）；
//立方体旋转.x+=0.1；
//立方体旋转y+=0.005；
渲染器。渲染（场景、摄影机）；
};
render（）

void main（）{
gl_位置=vec4（位置，1.0）；
}
均匀vec2u_分辨率；
均匀浮动u_时间；
void main（）{
vec2 st=gl_FragCoord.xy/u_resolution.xy；
gl_FragColor=vec4（标准x，标准y，0.0,1.0）；
}
您至少需要使用顶点着色器，该着色器考虑三个定义并传入的投影矩阵和模型视图矩阵

    void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }


//设置场景
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=3；
//创造光明
var灯=新的三点灯（0xFE938C，1.5）；
光。位置。设置（0,5,20）；
场景。添加（灯光）；
var geometry=新的3.BoxGeometry（1,1,1）；
变量={
u_时间：{type:'f'，value:0.2}，
u_分辨率：{type:'v2'，value:new THREE.Vector2（）}，
};
var material=新的3.ShaderMaterial({
制服：制服，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragmentShader'）.textContent
});
var cube=新的三个网格（几何体、材质）；
立方体位置集（0,0,0）；
场景.添加（立方体）；
var renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var render=函数（）{
请求动画帧（渲染）；
uniforms.u_resolution.value.x=window.innerWidth；
uniforms.u_resolution.value.y=window.innerHeight；
立方体旋转.x+=0.1；
立方体旋转y+=0.005；
渲染器。渲染（场景、摄影机）；
};
render（）

void main（）{
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
均匀vec2u_分辨率；
均匀浮动u_时间；
void main（）{
vec2 st=gl_FragCoord.xy/u_resolution.xy；
gl_FragColor=vec4（标准x，标准y，0.0,1.0）；
}