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。

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

1 个答案: