2

私はThreeJSを初めて使用しますが、小さな問題があります（おそらく間違った使用法です）。カスタムジオメトリを作成し、面の法線を自分で定義しようとしています。

メッシュが両面ではないため、一方の法線を一方向に、もう一方の法線を反対方向に作成します。顔の片方だけが見えると思いますが、両方が見えます...私が何であるかについてのアイデア間違っていますか？

ありがとう！

<body>

    <script src="../build/Three.js"></script>

    <script src="js/Stats.js"></script>

    <script>
        var container, stats;

        var camera, scene, renderer;


            container = document.createElement( 'div' );
            document.body.appendChild( container );

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.up.x = 0;
            camera.up.y = 0;
            camera.up.z = 1;

            camera.position.x = 300;
            camera.position.y = -1000;
            camera.position.z = 1000;

            camera.lookAt(new THREE.Vector3(300, 250, 0));
            scene.add( camera );

            var light, geometry, material;

            scene.add( new THREE.AmbientLight( 0x404040 ) );

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 1, 0 );
            scene.add( light );

            material = new THREE.MeshBasicMaterial( { color: 0xFFFF00, wireframe: false, transparent: false, opacity: 1 } );

            geometry = new THREE.Geometry();
            geometry.vertices.push(new THREE.Vector3(0,0,0));
            geometry.vertices.push(new THREE.Vector3(600,0,0));
            geometry.vertices.push(new THREE.Vector3(0,-500,0));
            geometry.vertices.push(new THREE.Vector3(600,-500,0));
            var face;

            face = new THREE.Face3(0,2,1);
            face.normal.set(0,0,-1);
            geometry.faces.push(face);
            face = new THREE.Face3(2,3,1);
            face.normal.set(0,0,1);
            geometry.faces.push(face);

            geometry.computeCentroids();
            //geometry.computeFaceNormals();
            //geometry.computeTangents();

            var mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

            renderer.render( scene, camera );


    </script>

</body>
4

1 に答える 1

4

WebGLRenderer法線の代わりに、方向を定義するために面を作成した頂点の順序を使用します。これを試してみてください：

face = new THREE.Face3(2,1,3);
于 2012-06-04T19:32:50.540 に答える