关于three.js:Threejs教程访问几何体对象的数据

2次阅读

共计 1813 个字符，预计需要花费 5 分钟才能阅读完成。

举荐：将 NSDT 场景编辑器退出你的 3D 工具链
其余系列工具：NSDT 简石数字孪生

理论开发我的项目的时候，可能会加载内部模型，有些时候须要获取模型几何体的顶点数据，如果想获取几何体的顶点数据首先要相熟 three.js 几何体 BoxGeometry 和 BufferGeometry 的构造。拜访几何体顶点数据其实很简略，刚开始学习不必刻意记忆，间接查看 threejs 文档，就像拜访 javascript 对象的属性一样。

调用 BoxGeometry 创立一个立方体，执行 THREE.BoxGeometry 构造函数会主动生成几何体对象的顶点地位坐标、顶点法向量等数据。你能够通过执行上面代码，而后查看浏览器控制台打印的数据

var geometry = new THREE.BoxGeometry(100, 100, 100); // 创立一个立方体几何对象 Geometry
console.log(geometry);
console.log('几何体顶点地位数据',geometry.vertices);
console.log('三角行面数据',geometry.faces);

BoxGeometry、PlaneGeometry、SphereGeometry 等几何体类的基类是 Geometry，所以拜访这些几何体的顶点数据, 不晓得具体属性名称，能够查问 threejs 文档 Geometry。

PlaneBufferGeometry 示意一个矩形平面几何体，执行上面代码，你能够查看该几何体的相干顶点数据。

// 创立一个矩形平面几何体
var geometry = new THREE.PlaneBufferGeometry(100, 100);
console.log(geometry);
console.log('几何体顶点地位数据',geometry.attributes.position);
console.log('几何体索引数据',geometry.index);

BoxBufferGeometry、PlaneBufferGeometry、SphereBufferGeometry 等几何体类的基类是 BufferGeometry，所以拜访这些几何体的顶点数据, 不晓得具体属性名称，能够查问 threejs 文档 BufferGeometry。

通过上面代码批改 BoxGeometry 的三角形顶点色彩的数据，能够渲染进去如下成果。

var geometry = new THREE.BoxGeometry(100, 100, 100); // 创立一个立方体几何对象 Geometry
// 遍历几何体的 face 属性
geometry.faces.forEach(face => {
  // 设置三角面 face 三个顶点的色彩
  face.vertexColors = [new THREE.Color(0xffff00),
    new THREE.Color(0xff00ff),
    new THREE.Color(0x00ffff),
  ]
});
var material = new THREE.MeshBasicMaterial({
  // color: 0x0000ff,
  vertexColors: THREE.FaceColors,
  // wireframe:true,// 线框模式渲染
}); // 材质对象 Material

你能够通过上面代码删除立方体局部三角形面，测试删除成果。

var geometry = new THREE.BoxGeometry(100, 100, 100); // 创立一个立方体几何对象 Geometry
// pop()：删除数组的最初一个元素   shift：删除数组的第一个元素
geometry.faces.pop();
geometry.faces.pop();
geometry.faces.shift();
geometry.faces.shift();
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
  side: THREE.DoubleSide, // 两面可见
}); // 材质对象 Material

拜访内部模型几何体顶点数据 Threejs 加载内部模型的时候，会把几何体解析为缓冲类型几何体 BufferGeometry，所以拜访内部模型几何体顶点数据，能够查看文档 BufferGeometry。

3D 建模学习工作室

正文完