Three.js 自定义几何问题与旋转

Question

我刚刚开始使用 Javascript，特别是 three.js。我有一个自定义几何图形，我用它来创建一个三棱柱。它产生了正确的形状，但是当它旋转时，一些面看起来不正确。其他内置几何图形（CubeGeometry、CylinderGeometry ...）工作得很好。它与我的自定义几何图形有关还是与照明有关？还是网格还是材质？

这里是正在发生的事情的一个例子：3D Shapes Fiddle

以下是相关代码：

function getTriPrismGeometry(){
    var geometry = new THREE.Geometry()

    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100,  100, 0 )) );
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100, -100, 0 ) ));
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3(  100, -100, 0 )) );
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100,  100, -100 )) );
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100, -100, -100 ) ));
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3(  100, -100, -100 )) );

    geometry.faces.push( new THREE.Face3(0,1,2 ) );
    geometry.faces.push( new THREE.Face3(3,4,0 ) );
    geometry.faces.push( new THREE.Face3( 0, 1, 4 ) );
    geometry.faces.push( new THREE.Face3( 1, 4, 5 ) );
    geometry.faces.push( new THREE.Face3( 1, 2,5) );
    geometry.faces.push( new THREE.Face3( 2, 0, 3 ) );
    geometry.faces.push( new THREE.Face3( 2, 3, 5 ) );
    geometry.faces.push( new THREE.Face3( 3,4, 5 ) );

    geometry.computeCentroids();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    init(geometry, true);
}

function init(geometry, isCustom) {

    camera = new THREE.PerspectiveCamera( 75, width/height, 1, 10000 );
    camera.position.z = 300;

    scene = new THREE.Scene();

    material = new THREE.MeshLambertMaterial( { color: 0xff0000  } );
    mesh = new THREE.Mesh( geometry, material );

    if (isCustom){
        material.side = THREE.DoubleSide;
        mesh.doubleSided = true;
    }

    scene.add( mesh );

    ambient = new THREE.AmbientLight( 0x101010 );
    ambient.position.set(0, -70, 100).normalize();
    scene.add( ambient );

    directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position = camera.position;
    scene.add( directionalLight );;

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );

    render();
}
function render(){
    var delta = Date.now() - start;

    directionalLight.position = camera.position;

    //mesh.position.y = Math.abs( Math.sin( delta * 0.002 ) ) * 150;
    mesh.rotation.x = delta * 0.0003;
    mesh.rotation.z = delta * 0.0002;


    renderer.render( scene, camera );

}

我对 three.js 非常陌生，尤其是 3D 渲染，感谢任何帮助。提前致谢！

Answer 1

在您的自定义几何体中，您需要按逆时针顺序指定面顶点。

有了这个修复，你的自定义几何就可以了。

另外，从当前的 three.js 示例中学习。您的代码使用过时的模式。例如，Vertex 已被弃用。这个新模式是：

geometry.vertices.push( new THREE.Vector3( -100, 100, 0 ) ); 

http://jsfiddle.net/JLKCU/3/ - three.js r.54