举荐:将NSDT场景编辑器退出你的3D工具链
其余系列工具:NSDT简石数字孪生
拜访几何体对象的数据
理论开发我的项目的时候,可能会加载内部模型,有些时候须要获取模型几何体的顶点数据,如果想获取几何体的顶点数据首先要相熟three.js几何体BoxGeometry和BufferGeometry的构造。拜访几何体顶点数据其实很简略,刚开始学习不必刻意记忆,间接查看threejs文档,就像拜访javascript对象的属性一样。
测试BoxGeometry
调用BoxGeometry创立一个立方体,执行THREE.BoxGeometry构造函数会主动生成几何体对象的顶点地位坐标、顶点法向量等数据。你能够通过执行上面代码,而后查看浏览器控制台打印的数据
var geometry = new THREE.BoxGeometry(100, 100, 100); //创立一个立方体几何对象Geometryconsole.log(geometry);console.log('几何体顶点地位数据',geometry.vertices);console.log('三角行面数据',geometry.faces);
BoxGeometry、PlaneGeometry、SphereGeometry等几何体类的基类是Geometry,所以拜访这些几何体的顶点数据,不晓得具体属性名称,能够查问threejs文档Geometry。
测试PlaneBufferGeometry
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建模学习工作室