学习threejs（四）—— 创建面

创建面

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            * { margin: 0; padding: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            var scene = new THREE.Scene();
            // 相机 正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 600 );

            // 渲染器
            var renderer = new THREE.WebGLRenderer();

            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

            // 创建一个圆弧
            function createArc() {

                //通过Shape来创建圆弧这个形状，而Shape是通过定义路径来定义形状的
                // http://threejs.outsidelook.cn/r89/source/docs/index.html?q=Shape#Reference/Extras.Core/Shape
                let shape = new THREE.Shape();

                // 曲线种类
                // http://threejs.outsidelook.cn/r89/source/docs/index.html?q=path#Reference/Extras.Core/Path
                shape.absarc( 0, 0, 40, 0/180*Math.PI ,45/180*Math.PI, false );

                //做为ShapeGeometry的参数
                // http://threejs.outsidelook.cn/r89/source/docs/index.html?q=Shape#Reference/Geometries/ShapeGeometry
                let arcGeometry = new THREE.ShapeGeometry(shape);

                let arcMaterial = new THREE.LineBasicMaterial({
                    color:0xff0000
                });
                let arc = new THREE.Line(arcGeometry,arcMaterial);
                return arc;
            }

            //可用 CircleGeometry 这个类来创建圆形或者扇形
            function createArc2() {
                let geometry = new THREE.CircleGeometry(30,10,0,45/180*Math.PI);
                geometry.vertices.shift(); //这个用来移除指向圆点的直线
                let material = new THREE.LineBasicMaterial({color:0xff0000});
                let arc = new THREE.Line(geometry,material);
                return arc;
            }

            // 创建扇形
            function createArcShape(){
                let shape = new THREE.Shape();
                shape.absarc( 0, 0, 40, 0/180*Math.PI ,45/180*Math.PI, false );
                shape.lineTo(0,0); //（1）做一条线到圆心
                let arcGeometry = new THREE.ShapeGeometry(shape);

               //（2）使用网格模型来表示
               //https://threejs.org/docs/index.html#api/zh/materials/MeshBasicMaterial
                arcMaterial = new THREE.MeshBasicMaterial({color:0xff0000});
                arc = new THREE.Mesh(arcGeometry,arcMaterial);
                return arc ;
            }

            
            // 创建2维矩形
            function createRect() {

                // 平面几何图形
                // http://threejs.outsidelook.cn/r89/source/docs/index.html?q=PlaneGeometry#Reference/Geometries/PlaneGeometry
                let geometry = new THREE.PlaneGeometry(10,10);

                let material = new THREE.MeshBasicMaterial({color:0x00ff00});

                let rect = new THREE.Mesh(geometry,material);
                return rect;
            }


            var plane = createArc();
            // var plane = createArc2();
            // var plane = createArcShape();
            // var plane = createRect();


            scene.add( plane );
            camera.position.z = 100;

            function render() {
                renderer.render( scene, camera );
            }
            render();

        </script>
    </body>
</html>
效果：

createArc()
createArc2()
createArcShape()
createRect()