BufferGeometry.boundingBox的应用：BoxHelper的实现

最新推荐文章于 2024-01-22 11:05:41 发布

Web_boom

最新推荐文章于 2024-01-22 11:05:41 发布

阅读量423

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Android_boom/article/details/128504912

版权

本文探讨了如何利用BufferGeometry.boundingBox创建BoxHelper，详细解释了BoxHelper的内部工作原理，强调不应在动画循环中频繁更新BoxHelper以避免性能影响。建议在对象变换后单独调用BoxHelper.update()方法。同时推荐使用Object3D.updateMatrixWorld()配合LineBasicMaterial动态更新线框。

摘要由CSDN通过智能技术生成

BufferGeometry.boundingBox的应用：BoxHelper的实现

通过boundingBox实现的BoxHelper

官方提供了一个BoxHelper，查看源码，它是通过boundingBox实现的。

BoxHelper通过LineSegment画出一个长方体外框，即需要通过BufferAttributes指定要画的顶点属性（这里主要是position以及index），通过创建LineSegment对象进行绘制，BoxHelper继承了LineSegemnt。

// BoxHelper.js
// class BoxHelper extends LineSegment
constructor( object, color = 0xffff00 ) {const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );const positions = new Float32Array( 8 * 3 );const geometry = new BufferGeometry();geometry.setIndex( new BufferAttribute( indices, 1 ) );geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );super( geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );this.object = object;this.type = 'BoxHelper';this.matrixAutoUpdate = false;this.update();
}

在构造器中，并没有给出position的据其位置，这一部分的实现在update方法，就是，在update中，间接的使用了boundingBox。

下面看一下