Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
658 views
in Technique[技术] by (71.8m points)

javascript - Issue with custom geometry and face normal

I'm quite new to ThreeJS and I have a small issue (probably wrong usage). I'm trying to create a custom geometry and define the faces normals by myself.

I create one normal in one direction and the other one in the opposite direction, as my Mesh is not 2 sided I expect to see only one of the face, however I can see both of them... Any Idea of what I'm doing wrong ?

Thanks!

<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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

WebGLRenderer uses the vertex order in which you created the face for defining the orientation instead of the normal. Try doing this:

face = new THREE.Face3(2,1,3);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...