ThreeJS教程:查看或设置gltf几何体顶点

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

查看或设置gltf几何体顶点

前面给大家介绍过几何体BufferGeometry对象,以及用来表示BufferGeometry顶点数据的属性缓冲对象BufferAttribute

geometry.attributes.position = new THREE.BufferAttribute();
geometry.attributes.normal = new THREE.BufferAttribute(); 
geometry.attributes.color = new THREE.BufferAttribute(); 
geometry.attributes.uv = new THREE.BufferAttribute(); 
geometry.index = new THREE.BufferAttribute(); 

下面通过加载一个外部gltf模型为例,给大家演示如何获取、修改外部模型的几何体顶点数据,也就是说获取、修改BufferAttribute对象里面的顶点数据。

获取gltf模型几何体顶点数据

loader.load("../地形.glb", function (gltf) { //gltf加载成功后返回一个对象
    model.add(gltf.scene); //三维场景添加到model组对象中
    //mesh表示地形网格模型
    const mesh = gltf.scene.children[0];
    // 顶点数据
    const att = mesh.geometry.attributes;
    console.log('att', att);
    // 顶点位置数据
    const pos = mesh.geometry.attributes.position;
    console.log('pos', pos);
})

几何体顶点索引属性geometry.index

three.js大部分自带的几何体API默认有.index属性,不过外部加载的gltf等模型,geometry.index数据可能有,也可能没有,具体看外部模型情况。

console.log('index', mesh.geometry.index);

顶点数量BufferAttribute.count

const count = pos.count; //几何体顶点数量
console.log('count', count);

.getX().getY().getZ()

BufferAttribute对象具有.getX().getY().getZ()方法。

BufferAttribute共有顶点数量count,通过.getX(i)方法可以获取第i+1个点的x分量,i的范围就是[0,count-1]。

const pos = mesh.geometry.attributes.position;
// 获取几何体第一个顶点的x坐标
const x = pos.getX(0);
console.log('x', x);

.getY().getZ()是获取顶点数据BufferAttribute的y、z分量,使用方式和.getX()方法一样。

.setX().setY().setZ()

通过.getY()是获取顶点y坐标,通过.setY()是设置顶点y坐标。

pos.setY(0,100)把索引为0,也就是第一个顶点的y坐标设置为100.

const pos = mesh.geometry.attributes.position;
pos.setX(0,100);

批量重置几何体顶点y坐标

loader.load("../地形.glb", function (gltf) { 
    model.add(gltf.scene); 
    //mesh表示地形网格模型
    const mesh = gltf.scene.children[0];
    // 顶点位置数据
    const pos = mesh.geometry.attributes.position;
    const count = pos.count; //几何体顶点数量
    // 批量设置所有几何体顶点位置的y坐标
    for (let i = 0; i < count; i++) {
        const y = pos.getY(i);//获取第i+1个顶点y坐标
        pos.setY(i,y*2)//设置第i+1个顶点y坐标为自身2倍
    }
})

上一篇:ThreeJS教程:Color颜色渐变插值 (mvrlink.com)

下一篇:ThreeJS教程:山脉地形高度可视化 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号