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}); //注意这里使用的是LineBasicMateriallet 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;
}