ThreeJS 开发实例

形状和材质

虚线

画虚线：

function DrawDashLine(){
        var geometry = new THREE.Geometry();
        /**
         * vertexColors: false 关闭使用点颜色来生成线的颜色，这个值默认是false，如果设置为true，那么后面设置的color将不起作用
         * dashSize:30 点长度30个单位
         * gapSize:20 点与点之间间隔长度20个单位
         * @type {THREE.LineDashedMaterial}
         */
        var material = new THREE.LineDashedMaterial({ vertexColors: false,dashSize:30,gapSize:20,color:0x839848});
        var p1 = new THREE.Vector3(0, 0,0);
        var p2 = new THREE.Vector3(500,300,0);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        /**
         * 记得加上这句，用于计算上面设置的点和间隔长度，不设置则画出来是实线
         */
        geometry.computeLineDistances();          
        var line = new THREE.Line(geometry,material,THREE.LineSegments );
        scene.add(line);
    }

注意：threejs定义了很多computeXXX方法和XXXneedsUpdate属性，这表示XXX是默认不更新的，你要想获得其真实值，就必须手动调用computeXXX方法或设置XXXneedsUpdate属性。threejs这么做，是出于性能考虑

给立方体画上虚线边框：

思路，遍历立方体的所有顶点，对每一个顶点，画上与其相接的三条边，每条边画一半长度。

function drawUnVisiableBorder(){
                for(var i=0 ; i< cube.geometry.vertices.length ; i ++ ){
   
                    var v1 = new THREE.Vector3();
                    v1.copy(cube.geometry.vertices[i]);
                    var v2 = new THREE.Vector3();
                    v2.copy(v1);
                    v2.x = -v2.x/2;

                    DrawDashLine(v1,v2);

                    var v2 = new THREE.Vector3();
                    v2.copy(v1);
                    v2.y = -v2.y/2;
                    DrawDashLine(v1,v2);

                    var v2 = new THREE.Vector3();
                    v2.copy(v1);
                    v2.z = -v2.z/2;
                    DrawDashLine(v1,v2);
                }
            }

注意：画虚线只能画一次，如果画两次，第一次从A到B,第二次从B到A，虚线就会变成实线，因为两次画的线段和空缺刚好互补

另外，新的threejs提供了EdgesGeometry，也可以用来描边

线的粗细

在Threejs中，线本身是二维的，没有办法设置粗细，这样要选择、操作一条线就不太好操作。这时，可以在线外面包一层不可见的圆柱，这样线就很好操作了。

function drawCylinder(topRadius，bottomRadius ,height){
   
                //四个参数分别是上底面半径、下底面半径，高度，半径段数
                var geometry = new THREE.CylinderGeometry(topRadius,bottomRadius,height,16);
                var material = new THREE.MeshBasicMaterial({visible:true,color:0x879378});
                var cylinder = new THREE.Mesh(geometry,material);
                return cylinder;
            }

线的颜色

纯色的线：

function colorLine(){
        var geometry = new THREE.Geometry();
        /**
         * vertexColors: false，表示使用color来设置颜色
         * @type {THREE.LineBasicMaterial}
         */
        var material = new THREE.LineBasicMaterial({ vertexColors: false,color:#cccccc });
        var p1 = new THREE.Vector3(0, 0,0);
        var p2 = new THREE.Vector3(500,300,0);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        var line = new THREE.Line(geometry,material,THREE.LineSegments );
        scene.add(line);
    }

渐变线：使用端点的颜色，从端点A的颜色变化到端点B的颜色

function initObject(){
        var geometry = new THREE.Geometry();
        /**
         * vertexColors: true 表示使用端点颜色
         * @type {THREE.LineBasicMaterial}
         */
        var material = new THREE.LineBasicMaterial({ vertexColors: true });
        var p1 = new THREE.Vector3(0<