2

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レンダリングにかなり慣れていないので、助けていただければ幸いです。前もって感謝します！

4

1 に答える 1

2

カスタム ジオメトリでは、面の頂点を反時計回りに指定する必要があります。

その修正により、カスタム ジオメトリは問題ありません。

また、現在の three.js の例から学びます。あなたのコードは古いパターンを使用しています。たとえば、Vertexは廃止されました。この新しいパターンは次のとおりです。

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

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

于 2013-04-14T07:22:56.867 に答える