创建平面几何形状

平面几何形状有三种:点,线,面三种,下面说说用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只是为了更方便的创建各种形状的点集。
立即登录, 发表评论.
没有帐号? 立即注册