ThreeJs实现导航动画

最新推荐文章于 2025-06-30 10:46:35 发布

原创

最新推荐文章于 2025-06-30 10:46:35 发布 · 5.5k 阅读

10 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用ThreeJs创建场景，并根据点数据绘制线条。通过添加marker并利用Tween.js实现marker在线上的动态移动效果。特别地，讨论了在设置Sprite对象动画时需要注意的细节，即必须修改SpriteMaterial的rotation属性，并提供了将三维坐标转换为平面坐标的技巧。文章还引用了计算方向角的方法，有助于理解动画的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建场景：

this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
this.camera.position.z = 5

在场景中根据所给的点数据画线

drawLine() {
 this.lines = new THREE.Object3D()
 let routeLine = new THREE.LineBasicMaterial({
  linewidth: 100,
  color: 0x2342fe,
  depthTest: false
 })
 this.routeList = []
 for (let i = 0; i < route.length - 1; i++) { // route是线上每一个点的数据
  let position = []
  let v1 = [route[i].x, route[i].y, route[i].z]
  let v2 = [route[i + 1].x, route[i + 1].y, route[i + 1].z]
  position.push(...v1)
  position.push(...v2)
  this.routeList.push({
   start: v1,
   end: v2
  })
  let geometry = new THREE.BufferGeometry()
  geometry.addAttribute('position', new THREE.Float32BufferAttribute(pos