如何在电商平台做好企业网站推广,电商 企业网站 福州,wordpress 注册方式,网站建设提升界面流畅程度创建平面几何形状
平面几何形状有三种#xff1a;点#xff0c;线#xff0c;面三种#xff0c;下面说说用threejs创建这几种形状的方法。
创建点
创建点可以使用Points类。
function createPoints(){//创建一个Geometry#xff0c;并添加点let geometry new THREE.G…创建平面几何形状
平面几何形状有三种点线面三种下面说说用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;
}效果如图
总之Geometry是点集各种Geometry只是为了更方便的创建各种形状的点集。 持续更新请看【这里】
