个人简介

👀个人主页： 前端杂货铺
⚡开源项目： rich-vue3 （基于 Vue3 + TS + Pinia + Element Plus + Spring全家桶 + MySQL）
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍖开源 rich-vue3🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2/3项目实战🥝Node.js实战🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

文章目录

• • 前言
  • 一、Tween动画
  • 二、点击选取对象
  • 三、加载外部文件
  • 四、使用相机控制器
  • 总结

前言

大家好，这里是前端杂货铺。

上篇文章我们学习了 二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字。接下来，我们继续我们 three.js 的学习！

在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档。

一、Tween动画

Tween.js是一个轻量级的 JavaScript 库，可以创建平滑的动画和过渡效果。

下面，我们设置一个不间断重复的，每两秒进行重新动画的场景。

核心代码：

new TWEEN.Tween(cube.rotation).to({     x: cube.rotation.x + 2,     y: cube.rotation.y + 2,     z: cube.rotation.z + 2, }, 2000).start().repeat(Infinity);  TWEEN.update(); 

完整代码：

tween动画

二、点击选取对象

通过鼠标点击获取x, y坐标，进而计算出归一化坐标。之后通过光线投射进行物体的拾取。

Raycaster 这个类用于进行光线投射。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

new THREE.Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float ) 

raycaster光线投射

三、加载外部文件

加载外部文件，可以使用 MTL 加载器来实现。

MTLLoader 一个用于加载 .mtl 资源的加载器，由 OBJLoader 在内部使用。

材质模版库（MTL）或 .MTL 文件格式是 .OBJ 的配套文件格式， 用于描述一个或多个 .OBJ 文件中物体表面着色（材质）属性。

MTLLoader( loadingManager : LoadingManager ) 

接下来，我们加载一个城市模型

四、使用相机控制器

相机控制器有很多种，它的作用是使得相机围绕目标进行不同类型的运动。

接下来，我们使用 轨迹球控制器、第一人称控制器、飞行控制器、翻滚控制器和轨道控制器 查看一下效果。

下面，我们以轨道控制器为例，看一下具体的呈现效果：

three.js 使用相机控制器

总结

本篇文章我们讲解了几种常见几何体的基本使用，包括 tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器。

更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

1. Three.js 官方文档
2. WebGL+Three.js 入门与实战【作者：慕课网_yancy】