正方形のメッシュの三角形が3つのjsでレンダリングされない

-1

three.jsの初心者であるので、私はこの疑念を克服しています。できれば助けてください。三角形と四角形を並べて描画しようとしていますが、問題は四角形のメッシュで発生します。最初の頂点プッシュだけが発生しますが、2番目のボタンは表示されません。私はここで何か間違っていますか？正方形のメッシュの三角形が3つの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

あなたのコードが正常に動作しています。私は結果に2つの顔を見る。それをチェックしてください（https://jsfiddle.net/wilt/nvdnwb4w/） – Wilt

申し訳ありませんが、少なくとも1つの顔しか現れません。フィドルはコンソールでも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

正方形のメッシュの三角形が3つのjsでレンダリングされない

答えて

関連する問題