一、访问几何体对象的数据
实际开发项目的时候，可能会加载外部模型，有些时候需要获取模型几何体的顶点数据， 如果想获取几何体的顶点数据首先要熟悉
three.ts几何体BoxGeometry和BufferGeometry的结构。
1. BoxGeometry
- 调用
BoxGeometry创建一个立方体，执行THREE.BoxGeometry构造函数会自动生成几何体对象的顶点位置坐标、顶点法向量等数据。 - 浏览器控制台打印的数据[注意：在高版本中没有一下属性]javascript
const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry console.log(geometry); console.log('几何体顶点位置数据',geometry.vertices); console.log('三角行面数据',geometry.faces); - 低版本中
BoxGeometry、PlaneGeometry、SphereGeometry等几何体类的基类是Geometry。 - 代码示例html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>访问几何体对象的数据</title> <style> body { margin: 0; /* 隐藏body窗口区域滚动条 */ overflow: hidden; } </style> <!--引入three.js三维引擎--> <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> <!-- 引入threejs扩展控件OrbitControls.js --> <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script> </head> <body> <script> /** * 创建场景对象Scene */ const scene = new THREE.Scene(); /** * 创建网格模型 */ const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry console.log(geometry); console.log('几何体顶点位置数据',geometry.vertices); console.log('三角面数据',geometry.faces); // const geometry = new THREE.PlaneBufferGeometry(100, 100); //创建一个立方体几何对象Geometry // console.log(geometry); // console.log('几何体顶点位置数据',geometry.attributes.position); // console.log('几何体索引数据',geometry.index); const material = new THREE.MeshLambertMaterial({ color: 0x0000ff, // wireframe:true,//线框模式渲染 }); //材质对象Material const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh scene.add(mesh); //网格模型添加到场景中 /** * 光源设置 */ //点光源 const point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //点光源位置 scene.add(point); //点光源添加到场景中 //环境光 const ambient = new THREE.AmbientLight(0x444444); scene.add(ambient); /** * 相机设置 */ const width = window.innerWidth; //窗口宽度 const height = window.innerHeight; //窗口高度 const k = width / height; //窗口宽高比 const s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大 //创建相机对象 const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象) /** * 创建渲染器对象 */ const renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); //设置渲染区域尺寸 renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 // 渲染函数 function render() { renderer.render(scene, camera); //执行渲染操作 } render(); //创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性 const controls = new THREE.OrbitControls(camera,renderer.domElement); //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果 controls.addEventListener('change', render); </script> </body> </html>
2. PlaneBufferGeometry
PlaneBufferGeometry表示一个矩形平面几何体。javascript// 创建一个矩形平面几何体 const geometry = new THREE.PlaneBufferGeometry(100, 100); console.log(geometry); console.log('几何体顶点位置数据',geometry.attributes.position); console.log('几何体索引数据',geometry.index);BoxBufferGeometry、PlaneBufferGeometry、SphereBufferGeometry等几何体类的基类是BufferGeometry，
3. 设置立方体顶点颜色
- 已过时javascript
const 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), ] }); const material = new THREE.MeshBasicMaterial({ // color: 0x0000ff, vertexColors: THREE.FaceColors, // wireframe:true,//线框模式渲染 }); //材质对象Material
4. 删除立方体部分三角形面
- 通过数组的
pop和shiftjavascriptconst geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry // pop()：删除数组的最后一个元素 shift：删除数组的第一个元素 geometry.faces.pop(); geometry.faces.pop(); geometry.faces.shift(); geometry.faces.shift(); const material = new THREE.MeshLambertMaterial({ color: 0x0000ff, side: THREE.DoubleSide, //两面可见 }); //材质对象Material
5. 访问外部模型几何体顶点数据
three.ts加载外部模型的时候，会把几何体解析为缓冲类型几何体BufferGeometry。