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

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

創(chuàng)建點(diǎn)

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

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

默認(rèn)情況下，點(diǎn)是一個(gè)正方形，當(dāng)然，也可以使用材質(zhì)，改變點(diǎn)的形狀，如下：

function createShapePoints(){//創(chuàng)建一個(gè)圓形的材質(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)建點(diǎn)，是用PointsMaterial的map屬性來(lái)設(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; }

效果如圖：

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

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

創(chuàng)建面

ShapeGeometry

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

function createArc(){//通過(guò)Shape來(lái)創(chuàng)建圓弧這個(gè)形狀，而Shape是通過(guò)定義路徑來(lái)定義形狀的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)建的，其它是輔助線。

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

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)格模型來(lái)表示arcMaterial = new THREE.MeshBasicMaterial({color:0xff0000});arc = new THREE.Mesh(arcGeometry,arcMaterial);return arc ; }

效果如下：

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

CircleGeometry

threejs提供這個(gè)類用于創(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的第一個(gè)點(diǎn)刪掉即可：

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是點(diǎn)集，各種Geometry只是為了更方便的創(chuàng)建各種形狀的點(diǎn)集。

---

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

總結(jié)

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

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