学习threejs(三)—— 创建线

作者: 一沭丶 | 来源:发表于2019-01-04 10:54 被阅读21次

学习threejs(三)—— 创建线
学习threejs（二）—— 创建点
学习threejs（四）—— 创建面
02、添加材质、光源以及物体对象的阴影
threejs绘制中文方案
【ThreeJs】06 - 纹理
画一个坐标系
落地成盒？前端必收藏的干货：threeeJs插件Gui添加盒子功
创建球
解决: WARNING: Too many active Web

创建线

<!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 createLine(){
                let geometry = new THREE.Geometry();

                const p1 = new THREE.Vector3(-10,0,0);
                const p2 = new THREE.Vector3(0,10,0);
                const p3 = new THREE.Vector3(10,0,0);

                geometry.vertices.push(p1, p2, p3);

                //注意这里使用的是LineBasicMaterial 实线
                //https://threejs.org/docs/index.html#api/zh/materials/LineBasicMaterial
                let material = new THREE.LineBasicMaterial({
                    color:0xff0000
                }); 

                let line = new THREE.Line(geometry,material);

                return line;
            }

            // 虚线
            function createDashedLine(){
                let geometry = new THREE.Geometry();
                const p1 = new THREE.Vector3(15,15,0);
                const p2 = new THREE.Vector3(-15,2,0);

                geometry.vertices.push(p1, p2);

                let material = new THREE.LineDashedMaterial({
                    color:0xff0000,
                    dashSize:3, // 虚线的大小，是指破折号和间隙之和。默认值为 3。
                    gapSize:1, // 间隙的大小，默认值为 1。
                    linewidth:1, // 控制线宽。默认值为 1。
                    scale: 1 // 线条中虚线部分的占比。默认值为 1。
                });
                
                // 这里可以换了Objects,添加一个顶点看看效果，即 Line 和 LineLoop
                let line = new THREE.LineSegments(geometry,material);

                //计算LineDashedMaterial所需的距离的值的数组。对于几何体中的每一个顶点，这个方法计算出了当前点到线的起始点的累积长度。
                line.computeLineDistances();

                return line;
            }

            var line = createLine();
            // var line = createDashedLine();


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

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

        </script>
    </body>
</html>