threejs创建平面几何形状

创建平面几何形状

平面几何形状有三种：点，线，面三种，下面说说用threejs创建这几种形状的方法。

创建点

创建点可以使用Points类。

function createPoints(){
  //创建一个Geometry，并添加点
   let geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(0,0,0));
        geometry.vertices.push(new THREE.Vector3(15,15,0));
        geometry.vertices.push(new THREE.Vector3(-15,2,0));
        //使用PointsMaterial，记得加上size属性，用来设置点的大小
        let material = new THREE.PointsMaterial({color:0xff0000,size:4});
        let points = new THREE.Points(geometry,material);
       return points;
}

默认情况下，点是一个正方形，当然，也可以使用材质，改变点的形状，如下：

function createShapePoints(){
 //创建一个圆形的材质，记得一定要加上texture.needsUpdate = true;
  let canvas = document.createElement("canvas");
        canvas.width = 100;
        canvas.height = 100;
        let context = canvas.getContext("2d");
        context.fillStyle = "#ffff00";
        context.arc(50,50,45,0,2*Math.PI);;
        context.fill();
        let texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
   //创建点，是用PointsMaterial的map属性来设置材质
   let geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(0,0,0));
        geometry.vertices.push(new THREE.Vector3(15,15,0));
        geometry.vertices.push(new THREE.Vector3(-15,2,0));
        let material = new THREE.PointsMaterial({color:0xff0000,size:4,map:texture});
        let points = new THREE.Points(geometry,material);
        return points;
}

效果如图：

注意，既然点可以使用材质，那么点其实可以表示任何形状，从这个意义上讲，点也是一个平面。

创建线

可以使用Line创建线：

function createLine(){
   let geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(15,15,0));
        geometry.vertices.push(new THREE.Vector3(-15,2,0));
        let material = new THREE.LineBasicMaterial({color:0xff0000}); //注意这里使用的是LineBasicMaterial
        let line = new THREE.Line(geometry,material);
        return line;
}

使用LineSegments创建虚线：

function createDashedLine(){
   let geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(15,15,0));
        geometry.vertices.push(new THREE.Vector3(-15,2,0));
        geometry.computeLineDistances();  //注意加上这句
        let material = new THREE.LineDashedMaterial({color:0xff0000,dashSize:3,gapSize:2,lineWidth:1 });
        let line = new THREE.LineSegments(geometry,material);
        return line;
}

其中，LineDashedMaterial的属性dashSize和gapSize分别制定线段的长度和间隔的长度。注意一开始不要设得太大，否则整条虚线就只有一个线段，那你看到的就是一条直线了。创建效果如图：

创建面

ShapeGeometry

要创建面可以使用ShapeGeometry。面的形状是可以任意的，threejs用路径来画形状，并且提供了shape类来帮助我们创建形状。下面使用ShapeGeometry来创建一个圆弧：

function createArc(){
        //通过Shape来创建圆弧这个形状，而Shape是通过定义路径来定义形状的
        let shape = new THREE.Shape();
        shape.absarc( 0, 0, 40, 0/180*Math.PI ,45/180*Math.PI, false );
        //做为ShapeGeometry的参数
        let arcGeometry = new THREE.ShapeGeometry(shape);
        let arcMaterial = new THREE.LineBasicMaterial({color:0xff0000});
        let arc = new THREE.Line(arcGeometry,arcMaterial);
        return arc;
}

效果如下：

注意，图中红色的部分才是我们创建的，其它是辅助线。

当然，也可以创建一个扇形，如下：

function createArc(){
        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）使用网格模型来表示
        arcMaterial = new THREE.MeshBasicMaterial({color:0xff0000});
        arc = new THREE.Mesh(arcGeometry,arcMaterial);
        return arc ;
}

效果如下：

shape 类还有很多方法，可以创建各种形状，请参考其父类【path对象】

CircleGeometry

threejs提供这个类用于创建2维的圆形或扇形。

function createArc(){
        let geometry = new THREE.CircleGeometry(30,10,0,45/180*Math.PI);
        let material = new THREE.LineBasicMaterial({color:0xff0000});
        let arc = new THREE.Line(geometry,material);
        return arc;
}

效果如下：

可以看到多了一条线，可以将Geometry的第一个点删掉即可：

function createArc(){
        let geometry = new THREE.CircleGeometry(30,80,0,360/180*Math.PI);
       ** geometry.vertices.shift(); //添加这句**
        let material = new THREE.LineBasicMaterial({color:0xff0000});
        let arc = new THREE.Line(geometry,material);
        return arc;
}

PlaneGeometry

PlaneGeometry可以创建2维矩形：

function createRect(){
        let geometry = new THREE.PlaneGeometry(10,10);
        let material = new THREE.MeshBasicMaterial({color:0x00ff00});
        let rect = new THREE.Mesh(geometry,material);
        return rect;
}

效果如图：

总之，Geometry是点集，各种Geometry只是为了更方便的创建各种形状的点集。

---

持续更新，请看【这里】