1，Octree.js
八叉树Octree目的，是为了实现漫游的碰撞检测功能，比如遇到装障碍物被挡住、比如爬坡和上楼梯。2，OctreeHelper.js
OctreeHelper可视化八叉树
3，tweenjs
TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。
如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。
- github地址：https://github.com/tweenjs/tween.js/
- npm地址：https://www.npmjs.com/package/@tweenjs/tween.js
- 官网：https://createjs.com/tweenjs
#npm安装
在工程化开发的时候可以通过npm命令行安装tween.js模块。
npm i @tweenjs/tween.js@^18
import TWEEN from '@tweenjs/tween.js';
#.html引入tween.js
tween.js-master文件包/dist目录下有多个js文件，如果你想script标签直接引入tween.umd.js即可。
<script src="./tween.js-master/dist/tween.umd.js"></script>
.html学习环境模拟开发环境中引入方式,就可以和开发环境一样书写import TWEEN from '@tweenjs/tween.js'。
<!-- type="importmap"功能：tween在html学习环境和开发环境一样写法 -->
<script type="importmap">{"imports": {"@tweenjs/tween.js": "./tween.esm.js"}}
</script>
<script type="module">import TWEEN from '@tweenjs/tween.js';
</script>
#tweenjs基本语法
tweenjs功能从语法的角度讲，就是改变自己的参数对象。
const pos = {x: 0,y: 0};
const tween = new TWEEN.Tween(pos);//创建一段tween动画
//经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
tween.to({x: 100,y: 50}, 2000);
//tween动画开始执行
tween.start();
在requestAnimationFrame动画中，tween更新.update()，tween才能正常执行
function loop() {requestAnimationFrame(loop);
}
loop();
function loop() {TWEEN.update();//tween更新requestAnimationFrame(loop);
}
浏览器控制台测试查看tweenjs是否逐渐改变pos对象的x和y属性
function loop() {TWEEN.update();// 测试tweenjs是否逐渐改变pos对象的x和y属性console.log(pos.x,pos.y);requestAnimationFrame(loop);
}
#tweenjs改变threejs模型对象位置
three.js模型的位置mesh.position属性是一个具有.x、.y、.z属性的对象，可以直接使用tweenjs直接改变。
//创建一段mesh平移的动画
const tween = new TWEEN.Tween(mesh.position);
//经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
tween.to({x: 100,y: 50}, 2000);
//tween动画开始执行
tween.start();
最后不要忘记在渲染循环中更新TWEEN.update();即可。
// 渲染循环
function render() {TWEEN.update();renderer.render(scene, camera);requestAnimationFrame(render);
}
render();
换个语法形式书写也可以，更简洁
const tween = new TWEEN.Tween(mesh.position).to({x: 100,y: 50}, 2000).start();
const tween = new TWEEN.Tween(mesh.position)
.to({x: 100,y: 50}, 2000)
.start();
#测试模型缩放动画
模型的缩放属性mesh.scale和.position属性一样是一个具有.x、.y、.z属性的对象,你也可以直接用tweenjs动画控制。
new TWEEN.Tween(mesh.scale).to({x: 100,y: 50
}, 2000).start();
