Three.js 入门(几何体不同顶点组、设置不同材质、常见几何体)

本篇主要学习内容 :

1. 几何体顶点、索引、面和geometry的顶点概念
2. 几何体划分定点组设置不同材质
3. 常见的几何体

点赞 + 关注 + 收藏 = 学会了

1.几何体顶点、索引、面

1.1）缓冲类型几何体BufferGeometry顶点和面的关系

threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry (opens new window)类构建的，BufferGeometry是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就是定义顶点数据。

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry(); 
//创建顶点数据// 定点有顺序，逆时针为正面
const vertices = new Float32Array([
   -1.0, -1.0,  0.0,
    1.0, -1.0,  0.0, 
    1.0,  1.0,  0.0, 
    1.0,  1.0,  0.0,
   -1.0,  1.0,  0.0, 
   -1.0, -1.0,  0.0,
   ])
// 设置几何体顶点                                         创建顶点属性
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))

1.2）缓冲类型几何体BufferGeometry索引和面的关系

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry(); 
// 使用索引绘制
const vertices = new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0])
// 创建顶点属性
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
// 创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
// 创建索引属性
geometry.setIndex(new THREE.BufferAttribute(indices, 1))

2.几何体划分定点组设置不同材质

2.1）创建几何体区分多个材质

// 创建几何体
const geometry1 = new THREE.BoxGeometry(1, 1, 1)
// 多个材质
const material4 = new THREE.MeshBasicMaterial({
    color: 'aqua',
})
const material5 = new THREE.MeshBasicMaterial({
    color: 'pink',
})
const material6 = new THREE.MeshBasicMaterial({
    color: 'green',
})
const material7 = new THREE.MeshBasicMaterial({
    color: 'yellow',
})
const material8 = new THREE.MeshBasicMaterial({
    color: 'blue',
})
const material9 = new THREE.MeshBasicMaterial({
    color: 'red',
})
let cube = new THREE.Mesh(geometry1, [
    material4,
    material5,
    material6,
    material7,
    material8,
    material9,
])
cube.position.x = 2
scene.add(cube)

2.1）设置多个定点组

// 创建几何体三角形
const geometry = new THREE.BufferGeometry()
// 使用索引绘制
const vertices = new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0])
// 创建顶点属性
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
// 创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
// 创建索引属性
geometry.setIndex(new THREE.BufferAttribute(indices, 1))


// 设置两个定点组，形成两个材质 多个材质对应索引
geometry.addGroup(0, 3, 0)
geometry.addGroup(3, 3, 1)

// 创建材质
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    //两面都看到得到
    // side: THREE.DoubleSide
    // 线框
    wireframe: true,
})
// 多个材质
const material1 = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    // 线框
    // wireframe: true,
})
// 创建网络    多个材质对应索引
const plane = new THREE.Mesh(geometry, [material, material1])

scene.add(plane)

3.1. 常见的几何体

three.js提供的矩形平面PlaneGeometry、长方体BoxGeometry、球体SphereGeometry等各种形状的几何体，他们都有一个共同的父类BufferGeometry。这意味着这些几何体有哪些属性或方法，你可以查询文档关于BufferGeometry的介绍。

几何体细分数

Three.js很多几何体都提供了细分数相关的参数，这里以矩形平面几何体PlaneGeometry为例介绍。

矩形平面几何体至少需要两个三角形拼接而成。

 //矩形几何体PlaneGeometry的参数3,4表示细分数，默认是1,1
const geometry = new THREE.PlaneGeometry(100,50,1,1);

把一个矩形分为2份，每个矩形2个三角形，总共就是4个三角形

const geometry = new THREE.PlaneGeometry(100,50,2,1);

把一个矩形分为4份，每个矩形2个三角形，总共就是8个三角形

const geometry = new THREE.PlaneGeometry(100,50,2,2);

球体SphereGeometry细分数

球体SphereGeometry参数2、3分别代表宽、高度两个方向上的细分数，默认32,16，具体多少以你所用版本为准。

const geometry = new THREE.SphereGeometry( 50, 32, 16 );

如果球体细分数比较低，表面就不会那么光滑。

const geometry = new THREE.SphereGeometry( 15, 8, 8 );

三角形数量与性能

对于一个曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量却越多。

几何体三角形数量或者说顶点数量直接影响Three.js的渲染性能，在不影响渲染效果的情况下，一般尽量越少越好。

感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此基础入门（四）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️