創(chuàng)建平面幾何形狀

平面幾何形狀有三種：點，線，面三種，下面說說用threejs創(chuàng)建這幾種形狀的方法。

創(chuàng)建點

創(chuàng)建點可以使用Points類。

function createPoints(){//創(chuàng)建一個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屬性，用來設(shè)置點的大小let material = new THREE.PointsMaterial({color:0xff0000,size:4});let points = new THREE.Points(geometry,material);return points; }

默認情況下，點是一個正方形，當然，也可以使用材質(zhì)，改變點的形狀，如下：

function createShapePoints(){//創(chuàng)建一個圓形的材質(zhì)，記得一定要加上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;//創(chuàng)建點，是用PointsMaterial的map屬性來設(shè)置材質(zhì)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; }

效果如圖：

注意，既然點可以使用材質(zhì)，那么點其實可以表示任何形狀，從這個意義上講，點也是一個平面。

創(chuàng)建線

可以使用Line創(chuàng)建線：

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創(chuàng)建虛線：

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分別制定線段的長度和間隔的長度。注意一開始不要設(shè)得太大，否則整條虛線就只有一個線段，那你看到的就是一條直線了。創(chuàng)建效果如圖：

創(chuàng)建面

ShapeGeometry

要創(chuàng)建面可以使用ShapeGeometry。面的形狀是可以任意的，threejs用路徑來畫形狀，并且提供了shape類來幫助我們創(chuàng)建形狀。下面使用ShapeGeometry來創(chuàng)建一個圓弧：

function createArc(){//通過Shape來創(chuàng)建圓弧這個形狀，而Shape是通過定義路徑來定義形狀的let shape = new THREE.Shape();shape.absarc( 0, 0, 40, 0/180*Math.PI ,45/180*Math.PI, false );//做為ShapeGeometry的參數(shù)let arcGeometry = new THREE.ShapeGeometry(shape);let arcMaterial = new THREE.LineBasicMaterial({color:0xff0000});let arc = new THREE.Line(arcGeometry,arcMaterial);return arc; }

效果如下：

注意，圖中紅色的部分才是我們創(chuàng)建的，其它是輔助線。

當然，也可以創(chuàng)建一個扇形，如下：

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

效果如下：

shape 類還有很多方法，可以創(chuàng)建各種形狀，請參考其父類【path對象】

CircleGeometry

threejs提供這個類用于創(chuàng)建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可以創(chuàng)建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只是為了更方便的創(chuàng)建各種形狀的點集。

---

持續(xù)更新，請看【這里】

總結(jié)

以上是生活随笔為你收集整理的threejs创建平面几何形状的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。