两个三角形的方形网格没有在三个js中呈现

-1

作为three.js的初学者，我遇到了这个疑问。请帮助我，如果可以的话。我想绘制一个三角形和正方形并排，但问题发生在方形网格。只有第一个顶点推动发生，但不是第二个，它不会呈现。我在这里做错了什么？两个三角形的方形网格没有在三个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>

来源

2016-06-20 Nithin Krishna

你的代码是工作的罚款。结果中我看到了两张脸。检查它[你自己在这个小提琴]（https://jsfiddle.net/wilt/nvdnwb4w/） – Wilt

我很抱歉，但它仍然只显示一张脸，至少在本地。小提琴在控制台中也显示2个面。 –

你的问题是你画同一个点两次：

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

最后一点也许应该是：

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

来源

2016-06-20 09:05:35 Wilt

两个三角形的方形网格没有在三个js中呈现

回答

相关问题