Emiteți o geometrie personalizată și o față normală

Sunt destul de nou pentru ThreeJS și am o mică problemă (probabil o utilizare greșită). Încerc să creez o geometrie personalizată și să definim singuri normele fețelor.

Eu creez un normal într-o direcție, iar celălalt în direcția opusă, așa cum Meshul meu nu este 2 părți, mă aștept să văd doar una din fețe, totuși le văd pe amândouă ... Orice idee despre ceea ce sunt a face greșit?

Mulțumiri!

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

1 răspunsuri

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);
0
adăugat
Vă mulțumim pentru răspunsul dvs. De fapt, cele două fețe nu au aceleași coordonate, așa că mă aștept să văd o jumătate de dreptunghi (deci un triunghi) într-o direcție, iar cealaltă jumătate în cealaltă direcție. Dacă sunt corect dublu, va fi afișat în ambele direcții. BTW Am încercat, de asemenea, cu geometry.doubleSided = true; și nu pare să se schimbe ... Numai ordinea vârfurilor are un efect de vizibilitate a feței ...
adăugat autor Luc, sursa
Am înțeles acum. Actualizat răspunsul.
adăugat autor mrdoob, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com