Question

作为three.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>

Answer 1

你的问题是你画了两次相同的观点：

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

方形网格的三个三角形都没有在三个j

1 个答案: