javascript - 自定义着色器 - Three.js

Question

我正在尝试将自定义着色器与 Three.js 结合使用。我试着像许多例子一样去做，但它不起作用。我的代码是:

var vertex = "void main(){vec4 mvPosition = modelViewMatrix * vec4( position, 1.0    );gl_Position = projectionMatrix * mvPosition;}";
var fragment = "precision highp float;void main(void){gl_FragColor = vec4(0.0,1.0,0.0,1.0);}";
material = new THREE.ShaderMaterial({
                vertexShader: vertex,
                fragmentShader: fragment
        });
var mesh = new THREE.Mesh(geometry,material);

……一切都是空白。但是如果我使用这种 Material :

material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

……一切正常。怎么了？

Answer 1

我发现了问题:我不得不使用:

 renderer = new THREE.WebGLRenderer();

代替:

 renderer = new THREE.CanvasRenderer();