glsl - 在最新的three.js中处理着色器的正确方法是什么？

Question

我可以用谷歌搜索的旧示例使用 Three.js 的特定版本。当我试图用最新的例子做一个简单的例子时，它不起作用：

function shaders() {
    var vShader = [
        'void main() {',
            'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
        '}'
    ].join('\n');

    var fShader = [
        'void main() {',
            'gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);',
        '}'
    ].join('\n');

    material = new THREE.ShaderMaterial({
        vertexShader: vShader,
        fragmentShader: fShader
    });

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

    geometry = new THREE.SphereGeometry(50, 32, 32);
    mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
}

此处提供完整代码清单：http: //jsfiddle.net/doubleyou/Hhh89/

请注意，如果您取消注释带有材料分配的注释行，它将起作用。所以，猜猜，我以错误的方式初始化着色器材质。

对于它的价值，Chrome 根本没有向我显示任何错误。即使我使着色器代码无效，这也很奇怪。

Answer 1

终于得到了解释。

我一直在使用 CanvasRenderer。应该改用 WebGLRenderer。