Three.js开发指南-阅读记录（第六章）

高级几何体和二元操作

高级几何体

1. THREE.ConvexGeometry

• 作用：围绕一组点创建一个小凸包，类似于石头形状
• 注意：THREE.js标准发布版不包括 THREE.ConvexGeometry，必须额外引入 ConvexGeometry.js文件

<script src="../libs/ConvexGeometry"></script>

• 使用方式：

function generatePoints(){
    let points = [];
    for(let i=0; i<20; i++){
        let randomX = -15 + Math.round(Math.random() * 30);
        let randomY = -15 + Math.round(Math.random() * 30);
        let randomZ = -15 + Math.round(Math.random() * 30);
        points.push(new THREE.Vector3(randomX, randomY, randomZ));
    }
    
    let group = new THREE.Object3D();
    
    let material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        transparent: false
    });
    
    points.forEach(function(point){
        let geom = new.THREE.SphereGeometry(0.2);
        let mesh = new THREE.Mesh(geom,material);
        mesh.position.clone(point);
        group.add(mesh);
    });
    
    scene.add(group);
    
    let convexGeometry = new THREE.ConvexGeometry(points);
    convexMesh = createMesh(convexGeometry);
    scene.add(convexMesh);
}

2. THREE.LatheGeometry

• 作用：利用一条光滑的曲线，来创建三维图形
• 属性：

属性	描述
points（必选）	指定构成曲线的点的集合
segments	创建图形时使用的分段数，值越大，越光滑
phiStatr	创建时从何处开始，范围0到2*PI
phiLength	指定创建的完整性，默认2*PI

• 使用方式：

//画一个葫芦形状
function generatePoints(segments, phiStart, phiLength){
    let points = [];
    let height = 5;
    let count = 30;
    
    for(let 1=0; i<count; i++){
        points.push(new THREE.Vector3(Math.sin(i*0.2) + Math.cos(i*0.3) * height + 12, 0, (i - count) + conut/2 ));
    }
    
    let latheGeometry = new THREE.latheGeometry(points, segments, phiStart, phiLength);
    let latheMesh = createMesh(latheGeometry);
    scene.add(latheMesh);
};

3. 通过拉伸创建几何体

1. THREE.ExtrudeGeometry

• 作用：二维图形沿着 z 轴拉伸为三维图形
• 使用方式：

 let options = {
     amount: 10,
     bevelThickness: 2,
     bevelSize: 1,
     bevelSegments: 3,
     bevelEnabled: true,
     curveSegments: 12,
     ateps: 1
 };
 shape = createMesh(new THREE.ExtrudeGeometry(draw(), options)); //draw()上章的创建二维图形的函数

• 属性：

2. THREE.TubeGeometry

• 作用：沿着一条三维样条曲线拉伸出一根管
• 使用方式：

let points = [];
for(let i=0; i<20; i++){
    let randomX = -20 + Math.round(Math.random() * 50);
    let randomY = -15 + Math.round(Math.random() * 40);
    let randomZ = -20 + Math.round(Math.random() * 40);
    points.push(new THREE.Vector3(randomX, randomY, randomZ));
}
let tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), segments, radius, radiusSegments, closed);

let tubeMesh = createMesh(tubeGeometry)
scene.add(tubeMesh)

• 属性：

创建三维文字

• 创建方式：

let options = {
size: 90,
height: 90,
weight: 'normal',
font: 'helevetiker',
style: 'normal',
bevelThickness: 2,
bevelSize: 4,
bevelSegments: 3,
bevelEnabled: true,
curveSegments: 12,
steps: 1
};

text1 = createMesh(new THREE.TextGeometry("learning", options));
text1.position.z = -100;
text1.position.y = 100;
scene.add(text1);

text2 = createMesh(new THREE.TextGeometry("three.js", options));
scene.add(text2);

• 属性：

二元操作组合网格

• 定义：使用多种几何体通过不同的组合方式创建出新的几何体。
• 属性：

属性	描述
intersect(相交)	两个几何体相交的部分定义为新的几何体
union(联合)	几个几何体联合创造出新的几何体
subtract(相减)	移除两个几何体相交的部分

• 使用方式：

function redrawResult(){
    scene.remove(result)
    
    let sphere1BSP = new ThreeBSP(sphere1);
    let sphere2BSP = new ThreeBSP(sphere2);
    
    let resultBSP
    
    resultBSP = sphere1BSP.subtract(sphere2BSP);
    
    resultBSP = sphere1BSP.intersect(sphere2BSP);
    
    resultBSP = sphere1BSP.union(sphere2BSP);
    
    
    result = resultBSP.toMesh();
    result.geometry.computeFaceNormals();
    result.geometry.computeVertexNormals();
    
    scene.add(result);
}