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}); //注意這裏使用的是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只是爲了更方便的創建各種形狀的點集。

---

持續更新，請看【這裏】