Issue with custom geometry and face normal #2030

lucboutier · 2012-06-04T15:42:10Z

Hi,

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>
``

mrdoob · 2012-06-04T16:43:56Z

#1979

mrdoob closed this as completed Jun 4, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with custom geometry and face normal #2030

Issue with custom geometry and face normal #2030

lucboutier commented Jun 4, 2012

mrdoob commented Jun 4, 2012

Issue with custom geometry and face normal #2030

Issue with custom geometry and face normal #2030

Comments

lucboutier commented Jun 4, 2012

mrdoob commented Jun 4, 2012