threejs实现八叉树可视化

八叉树主要是为了实现物理碰撞检测的一种算法，但是呢，在threejs中要想使用八叉树但是有需要有反馈，那么八叉树可视化是一种比较好的方式

那么如何操作呢

1、导入octree，生成八叉树对象

import { OctreeHelper } from 'three/examples/jsm/helpers/OctreeHelper.js';
import { Octree } from 'three/examples/jsm/math/Octree.js';

// // 生成八叉树对象
let worldOctree = new Octree();

2、创建一个模型，然后将mesh放入到八叉树对象中

// 球模型
      const qiu = new THREE.SphereGeometry(1, 10, 10);
      const qiu_mesh = new THREE.Mesh(qiu,material)
      qiu_mesh.position.set(5,0,5)
      scene.add(qiu_mesh)
      worldOctree.fromGraphNode(qiu_mesh)

3、创建一个八叉树可视化对象，放入八叉树，然后再将可视化对象放入到场景中就可以了

const helper = new OctreeHelper( worldOctree );
// scene是我创建的场景对象
scene.add( helper );

然后就可以看到了，展示一下效果图

就是这样