three.js自定义形状

2023-07-31 23:50:34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <script type="text/javascript" src="libs/three.js"></script>

        <script type="text/javascript">

            function init() {

                var renderer = new THREE.WebGLRenderer({

                    canvas: document.getElementById('mainCanvas')

                });

                renderer.setClearColor(0x000000);

                var scene = new THREE.Scene();

                // camera

                var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);

                camera.position.set(25, 25, 25);

                camera.lookAt(new THREE.Vector3(0, 0, 0));

                scene.add(camera);

                // draw axes to help you understand the coordinate

                drawAxes(scene);

                var material = new THREE.MeshBasicMaterial({

                    color: 0xffff00,

                    wireframe: true

                });

                // init an empty geometry

                var geometry = new THREE.Geometry();

                // set vertices

                // 4 vertices on top

                geometry.vertices.push(new THREE.Vector3(-1, 2, -1));

                geometry.vertices.push(new THREE.Vector3(1, 2, -1));

                geometry.vertices.push(new THREE.Vector3(1, 2, 1));

                geometry.vertices.push(new THREE.Vector3(-1, 2, 1));

                // 4 vertices on bottom

                geometry.vertices.push(new THREE.Vector3(-2, 0, -2));

                geometry.vertices.push(new THREE.Vector3(2, 0, -2));

                geometry.vertices.push(new THREE.Vector3(2, 0, 2));

                geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

                // set faces

                // top face

                geometry.faces.push(new THREE.Face3(0, 1, 3));

                geometry.faces.push(new THREE.Face3(1, 2, 3));

                // bottom face

                geometry.faces.push(new THREE.Face3(4, 5, 6));

                geometry.faces.push(new THREE.Face3(5, 6, 7));

                // side faces

                geometry.faces.push(new THREE.Face3(1, 5, 6));

                geometry.faces.push(new THREE.Face3(6, 2, 1));

                geometry.faces.push(new THREE.Face3(2, 6, 7));

                geometry.faces.push(new THREE.Face3(7, 3, 2));

                geometry.faces.push(new THREE.Face3(3, 7, 0));

                geometry.faces.push(new THREE.Face3(7, 4, 0));

                geometry.faces.push(new THREE.Face3(0, 4, 5));

                geometry.faces.push(new THREE.Face3(0, 5, 1));

                var mesh = new THREE.Mesh(geometry, material);

                scene.add(mesh);

                // render

                renderer.render(scene, camera);

            }

            function drawAxes(scene) {

                // x-axis

                var xGeo = new THREE.Geometry();

                xGeo.vertices.push(new THREE.Vector3(0, 0, 0));

                xGeo.vertices.push(new THREE.Vector3(1, 0, 0));

                var xMat = new THREE.LineBasicMaterial({

                    color: 0xff0000

                });

                var xAxis = new THREE.Line(xGeo, xMat);

                scene.add(xAxis);

                // y-axis

                var yGeo = new THREE.Geometry();

                yGeo.vertices.push(new THREE.Vector3(0, 0, 0));

                yGeo.vertices.push(new THREE.Vector3(0, 1, 0));

                var yMat = new THREE.LineBasicMaterial({

                    color: 0x00ff00

                });

                var yAxis = new THREE.Line(yGeo, yMat);

                scene.add(yAxis);

                // z-axis

                var zGeo = new THREE.Geometry();

                zGeo.vertices.push(new THREE.Vector3(0, 0, 0));

                zGeo.vertices.push(new THREE.Vector3(0, 0, 1));

                var zMat = new THREE.LineBasicMaterial({

                    color: 0x00ccff

                });

                var zAxis = new THREE.Line(zGeo, zMat);

                scene.add(zAxis);

            }

        </script>

    </head>

    <body onload="init()">

        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

    </body>

</html>

aaarticlea/png;base64,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" alt="" />

码农公寓

相关文章