Beide Dreiecke der Quadratmasche werden nicht gerendert in Drei js

-1

Als Anfänger bei three.js bin ich auf diesen Zweifel gestoßen. Bitte helfen Sie mir, wenn Sie können. Ich versuche, ein Dreieck und ein Quadrat nebeneinander zu zeichnen, aber das Problem tritt in der Quadratmasche auf. Nur der erste Vertex-Push tritt auf, aber nicht der zweite und es wird nicht gerendert.Ich mache hier etwas falsch?Beide Dreiecke der Quadratmasche werden nicht gerendert in Drei js

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="three.js" type="text/javascript"></script> 
     <script src="Detector.js" type="text/javascript"></script> 
     <script src="Projector.js" type="text/javascript"></script> 
     <script src="CanvasRenderer.js" type="text/javascript"></script> 

    </head> 
    <body> 
     <div id="myCanvas"> 
      <script> 
       var scene; 
       var camera; 
       var renderer; 
       initializeScene(); 
       renderScene(); 

       function initializeScene() 
       { 
        if(Detector.webgl) 
         { 
          renderer=new THREE.WebGLRenderer({antialias:true}); 
         } 
        else 
         { 
          renderer=new THREE.CanvasRenderer(); 
         } 
        renderer.setClearColor(0x000000, 1); 
        canvasWidth=window.innerWidth; 
        canvasHeight=window.innerHeight; 
        renderer.setSize(canvasWidth,canvasHeight); 
        document.getElementById("myCanvas").appendChild(renderer.domElement); 
        scene=new THREE.Scene(); 

        camera = new THREE.PerspectiveCamera(45, canvasWidth/canvasHeight, 1, 100); 
        camera.position.set(0, 0, 10); 
        camera.lookAt(scene.position); 
        scene.add(camera); 

        var triangleGeometry=new THREE.Geometry(); 
        triangleGeometry.vertices.push(new THREE.Vector3(0.0,1.0,0.0)); 
        triangleGeometry.vertices.push(new THREE.Vector3(-1.0,-1.0,0.0)); 
        triangleGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0)); 
        triangleGeometry.faces.push(new THREE.Face3(0,1,2)); 

        var triangleMaterial=new THREE.MeshBasicMaterial({ 
         color:0xFFFFFF, 
         side:THREE.DoubleSide 
        }); 

        var triangleMesh=new THREE.Mesh(triangleGeometry,triangleMaterial); 
        triangleMesh.position.set(-1.5,0.0,4.0); 
        scene.add(triangleMesh); 

        var squareGeometry=new THREE.Geometry(); 
        squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0)); 
        squareGeometry.vertices.push(new THREE.Vector3(1.0,1.0,0.0)); 
        squareGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0)); 
        squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0)); 
        squareGeometry.faces.push(new THREE.Face3(0,1,2)); 
        squareGeometry.faces.push(new THREE.Face3(0,2,3)); //Not working 
        var squareMaterial=new THREE.MeshBasicMaterial({ 
         color:0xFFFFFF, 
         side:THREE.DoubleSide 
        });     
        var squareMesh=new THREE.Mesh(squareGeometry,squareMaterial); 
        squareMesh.position.set(1.5,0.0,4.0); 
        scene.add(squareMesh); 


       } 
       function renderScene() 
        { 
         renderer.render(scene,camera); 
        } 
      </script> 
     </div> 
    </body> 
</html>

Quelle

2016-06-20 Nithin Krishna

Ihr Code funktioniert gut. Ich sehe zwei Gesichter im Ergebnis. Überprüfen Sie es [Sie selbst in dieser Geige] (https://jsfiddle.net/wilt/nvdnwb4w/) – Wilt

Es tut mir leid, aber es zeigt immer noch nur ein Gesicht, zumindest lokal. Die Geige zeigt 2 Gesichter in der Konsole. –

Ihr Problem ist, dass Sie zweimal denselben Punkt ziehen:

squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0)); // <--- same 
squareGeometry.vertices.push(new THREE.Vector3(1.0,1.0,0.0)); // | as 
squareGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0)); // | this 
squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0)); // <--- point

Der letzte Punkt sollte wohl sein:

squareGeometry.vertices.push(new THREE.Vector3(-1.0,-1.0,0.0));

Quelle

2016-06-20 09:05:35 Wilt

Beide Dreiecke der Quadratmasche werden nicht gerendert in Drei js

Antwort

Verwandte Themen