自定义几何体和面法线问题

本文介绍了自定义几何体和面法线问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对ThreeJS很新，我有一个小问题（可能是错误的用法）。我正在尝试创建一个自定义几何体并自己定义面法线。

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 ?

谢谢！

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

wrong

自定义几何体和面法线问题

问题描述

推荐答案