1. 程式人生 > >Three.js繪製自定義圖形

Three.js繪製自定義圖形

**

Three.js繪製自定義圖形——空心圓柱

**

function drawcylinder(){
//空心圓柱
var meterial = new THREE.MeshLambertMaterial({//建立材料
color:0xD4AF37,
wireframe:false
});
//形狀拉伸
var shape = new THREE.Shape();
//繪製的起始點
shape.moveTo(8,0);
//先繪製出一個2D的圓(外面的大圓),然後進行拉伸
shape.arc(-8,0,8,0,Math.PI2,true);
var hole3 = new THREE.Path();
//在已經繪製好的圖形內部新增一個孔——實現透明
hole3.absarc(0,0,4,0,Math.PI

2,true);
shape.holes.push(hole3);
//將2D拉伸成3D,需要在哪個方向拉伸,就改變該方向的值
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(20,0,0);
var path = new THREE.LineCurve(v1,v2);
var extrudeSetting ={
bevelEnabled:false,
steps:1,
extrudePath:path
};
var geometry = new THREE.ExtrudeGeometry(shape,extrudeSetting);
var mesh = new THREE.Mesh(geometry,meterial);
mesh.position.set(0,21,0);
scene.add(mesh);
}