通过Three.js创建一个互动的在线展示平台，可视化特斯拉Model 3的的部分技术。网站利用Three.js提供的API，实现了Model 3的三维模型展示、动画效果以及与用户交互的功能。

预览地址：model3.newhao2021.top/

github地址：github.com/varrff/Mode…

使用

安装依赖

pnpm i

本地调试

pnpm run dev

构建

pnpm run build

预览

pnpm run preview

关键概念

Catmull-Rom样条曲线

Catmull-Rom样条曲线是一种平滑的插值曲线，可以用于创建自然的路径和轨迹。在Three.js中，THREE.CatmullRomCurve3类用于生成三维空间中的Catmull-Rom样条曲线。该曲线通过一组控制点进行插值，生成光滑的曲线，常用于动画路径、相机路径等。

这里使用了样条曲线创建了Autopilot部分的距离预警线

管道几何体（Tube Geometry）

管道几何体（Tube Geometry）是Three.js中用于创建沿着一条路径生成的管状三维几何体的类。这种几何体在表示道路、轨迹、隧道等需要具有实际厚度的三维结构时非常有用。下面我们将详细介绍管道几何体的概念、创建方法及其应用。

这里使用了样条曲线创建了FSD部分的行驶预测路线

代码部分

World文件结构

- src
  - World
    - CameraShake.ts: 摄像机抖动效果文件。
    - Car.ts: 汽车部分。
    - City.ts: Autopilot部分文件。
    - Road.ts: FSD部分文件。
    - Speedup.ts: 加速效果文件。
    - StartRoom.ts: 起始房间对象文件。
    - TestObject.ts: 测试对象文件。
    - World.ts: 世界管理文件，负责加载和管理整个场景中的所有对象和效果。

首页部分

首页的加速流光效果以及相机抖动部分推荐alphardex大佬的文章：juejin.cn/post/735276…

也非常感谢大佬热心帮助我解决了部分问题。

Autopilot部分（road.ts）

addExisting 方法

这个方法用于将现有的模型添加到场景中，并启动动画。

• 加载模型: 从base.am.items中获取已经加载的GLTF模型。
• 设置模型位置和缩放: 调整模型的位置和缩放比例，使其适应场景。
• 添加模型到容器: 将模型添加到当前组件的容器中。

run 方法

负责启动模型的动画循环。

• 启动汽车运行: 调用carRun方法开始汽车动画。
• 递归动画: 使用requestAnimationFrame进行递归动画，每帧更新模型的位置。

carRun 方法

用于处理汽车模型的动画效果。

• 克隆模型: 使用SkeletonUtils.clone确保每次都是新的克隆对象。
• 设置材质: 创建并应用新的材质，使汽车模型支持光照和反射。
• 创建护盾: 调用createShield方法生成护盾效果。
• 添加汽车到容器: 将新的汽车模型添加到容器中。
• 定义动画参数和函数: 定义汽车动画的参数和递归动画函数animateCar。

createShield 方法

用于创建护盾效果。

• 定义控制点: 使用THREE.Vector3定义护盾的路径控制点。
• 创建曲线和几何体: 用THREE.CatmullRomCurve3创建样条曲线，并生成对应的管道几何体。
• 创建材质和纹理: 用Canvas创建线性渐变纹理，并应用到管道材质上。
• 设置动画: 使用gsap实现护盾渐变动画和控制点的动态更新。

updateControlPoint 方法

更新控制点的位置，使护盾效果更加动态。

• 递增或递减操作: 根据目标值和步长更新控制点的x和z坐标。
• 更新曲线和几何体: 更新样条曲线的控制点，并重新生成管道几何体。

removeAllModelsAndAnimations 方法

用于移除所有模型并停止所有动画。

• 移除模型和对象: 从容器中移除道路模型、管道和汽车模型，并释放相关资源。
• 停止动画循环: 取消所有动画帧请求，停止动画。

playAuto 方法

用于播放背景音乐。

• 加载和播放音乐: 使用Howl.js库加载并播放背景音乐。

FSD部分（city.ts）

setCar 方法

用于设置汽车模型，目前只是加载了汽车模型数据。

createRoad 方法

用于创建道路。

• 定义控制点: 使用THREE.Vector3定义道路的路径控制点。
• 更新道路几何体: 调用updateRoadGeometry方法，根据控制点创建道路几何体。
• 设置材质和动画: 创建材质并使用GSAP动画库实现过渡动画。

updateRoadGeometry 方法

更新道路几何体。

• 检查控制点: 确认控制点存在。
• 创建曲线和几何体: 用THREE.CatmullRomCurve3创建样条曲线，并生成管道几何体。
• 调整顶点位置: 调整几何体顶点的y坐标。
• 创建材质和纹理: 用Canvas创建线性渐变纹理，并应用到管道材质上。
• 更新或创建道路对象: 更新现有道路对象的几何体或创建新的道路对象并添加到场景中。

updateControlPoint 方法

更新控制点的位置，使道路效果更加动态。

• 递增或递减操作: 根据目标值和步长更新控制点的x和z坐标。
• 更新道路几何体: 调用updateRoadGeometry方法更新几何体。

runRoad 方法

负责启动道路的动画。

• 定义多个动画步骤: 使用GSAP库定义一系列动画，平滑地移动和旋转模型。
• 启动控制点动画: 定义和启动控制点更新动画，使道路效果动态变化。

不足

感慨

也不知道什么时候能买上一辆Model3嘞，第一次看见总觉得这个流线感真好看，也不像豪车那样的价格遥不可及，尽管后来特斯拉的车都成了街车了，也有太多国产电车后来居上，本地化做的也比特斯拉好。但每次看见，都依然觉得真t*好看。