three.js使相机沿指定路径运动，相机漫游，使物体在指定路径上运动(vue中使用three.js66)

1.demo效果

如上图，该demo实现相机沿指定路径运动始终看向地球，绿色小球沿相机相反方向运动

2. 实现要点

2.1 相机运动

2.1.1 创建运动路径

创建运动路径通过 THREE.CatmullRomCurve3 对象来创建，将会生成一条由指定点绘制的平滑三维样条曲线

//使用指定的点创建一条平滑的三维样条曲线当做相机运动路径
this.cameraCurve = new THREE.CatmullRomCurve3(
  [
    new THREE.Vector3(-30, 40, 50),
    new THREE.Vector3(35, 45, 45),
    new THREE.Vector3(40, 25, -40),
    new THREE.Vector3(40, -10, -40),
    new THREE.Vector3(40, 20, -40),
    new THREE.Vector3(-45, 35, -45)
  ],
  true
)      

2.1.2 render中更相机坐标

//相机路径的索引在0~1000中往复增加
this.cameraPathIndex += 1
if (this.cameraPathIndex === 1000) {
  this.cameraPathIndex = 0
}
const curveIndex = this.cameraPathIndex / 1000

//取相机路径上当前点的坐标
const tmpCameraPosition = this.cameraCurve.getPointAt(curveIndex) //curveIndex取值0~1
//设置相机坐标为在相机路径上当前点的位置
this.camera.position.set(
  tmpCameraPosition.x,
  tmpCameraPosition.y,
  tmpCameraPosition.z
)
this.camera.lookAt(new THREE.Vector3(0, 0, 0)) //相机看向原点

2.2 相机轨道参考线

//做一个小0.6倍的路径添加到场景，作相机运动路径参考
this.sphereCurve = this.cameraCurve.clone()
this.sphereCurve.points.forEach(point => {
  point.x *= 0.6
  point.y *= 0.2
  point.z *= 0.6
  return point
})

//参考路径上取100个点，每个点上添加蓝色小球
const pathPoints = this.sphereCurve.getPoints(100)
pathPoints.forEach(point => {
  const sphere = new THREE.SphereGeometry(0.2)
  const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff })
  const sphereMesh = new THREE.Mesh(sphere, sphereMaterial)
  sphereMesh.position.set(point.x, point.y, point.z)
  this.scene.add(sphereMesh)
})

//绘制一条红色的路径参考线
const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints)
const material = new THREE.LineBasicMaterial({ color: 0xff0000 })
const curveObject = new THREE.Line(geometry, material)
this.scene.add(curveObject)

2.3 小球运动

2.3.1 创建小球

//做一个较大的绿色小球沿相机相反反向移动
const biggerSphere = new THREE.SphereGeometry(2)
const sphereMaterial1 = new THREE.MeshBasicMaterial({ color: 0x0ff00 })
this.biggerSphereMesh = new THREE.Mesh(biggerSphere, sphereMaterial1)
this.biggerSphereMesh.position.set(
  pathPoints[0].x,
  pathPoints[0].y,
  pathPoints[0].z
)
this.scene.add(this.biggerSphereMesh)   

2.3.2 render中更小球坐标

//参考路径的索引在1001~0中往复减少
if (this.shperePathIndex === 0) {
  this.shperePathIndex = 1001
}
this.shperePathIndex -= 1

//取相参考径上当前点的坐标
const sphereCurveIndex = this.shperePathIndex / 1000 //取值0~1
const tmpSpherePosition = this.sphereCurve.getPointAt(sphereCurveIndex)
//设置绿色球的位置为参考路径上当前点的位置
this.biggerSphereMesh.position.set(
  tmpSpherePosition.x,
  tmpSpherePosition.y,
  tmpSpherePosition.z
)

3. demo代码

<template>
  <div id="container" />
</template>

<script>
import * as THREE from 'three'
export default {
  data() {
    return {
      earchMesh: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      cameraPathIndex: 0,
      cameraCurve: null,
      biggerSphereMesh: null,
      sphereCurve: null,
      shperePathIndex: 1001
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createModels() // 创建模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 创建模型
    createModels() {
      //使用贴图绘制地球
      const publicPath = process.env.BASE_URL
      const planetTexture = THREE.ImageUtils.loadTexture(
        `${publicPath}textures/planets/Earth.png`
      )
      const specularTexture = THREE.ImageUtils.loadTexture(
        `${publicPath}textures/planets/EarthSpec.png`
      )
      const normalTexture = THREE.ImageUtils.loadTexture(
        `${publicPath}textures/planets/EarthNormal.png`
      )
      const planetMaterial = new THREE.MeshPhongMaterial()
      planetMaterial.specularMap = specularTexture
      planetMaterial.shininess = 2
      planetMaterial.normalMap = normalTexture
      planetMaterial.map = planetTexture
      const sphereGeom = new THREE.SphereGeometry(20, 40, 40)
      this.earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)
      this.scene.add(this.earchMesh)

      //使用指定的点创建一条平滑的三维样条曲线当做相机运动路径
      this.cameraCurve = new THREE.CatmullRomCurve3(
        [
          new THREE.Vector3(-30, 40, 50),
          new THREE.Vector3(35, 45, 45),
          new THREE.Vector3(40, 25, -40),
          new THREE.Vector3(40, -10, -40),
          new THREE.Vector3(40, 20, -40),
          new THREE.Vector3(-45, 35, -45)
        ],
        true
      )

      //做一个小0.6倍的路径添加到场景，作相机运动路径参考
      this.sphereCurve = this.cameraCurve.clone()
      this.sphereCurve.points.forEach(point => {
        point.x *= 0.6
        point.y *= 0.2
        point.z *= 0.6
        return point
      })

      //参考路径上取100个点，每个点上添加蓝色小球
      const pathPoints = this.sphereCurve.getPoints(100)
      pathPoints.forEach(point => {
        const sphere = new THREE.SphereGeometry(0.2)
        const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff })
        const sphereMesh = new THREE.Mesh(sphere, sphereMaterial)
        sphereMesh.position.set(point.x, point.y, point.z)
        this.scene.add(sphereMesh)
      })

      //做一个较大的绿色小球沿相机相反反向移动
      const biggerSphere = new THREE.SphereGeometry(2)
      const sphereMaterial1 = new THREE.MeshBasicMaterial({ color: 0x0ff00 })
      this.biggerSphereMesh = new THREE.Mesh(biggerSphere, sphereMaterial1)
      this.biggerSphereMesh.position.set(
        pathPoints[0].x,
        pathPoints[0].y,
        pathPoints[0].z
      )
      this.scene.add(this.biggerSphereMesh)

      //绘制一条红色的路径参考线
      const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints)
      const material = new THREE.LineBasicMaterial({ color: 0xff0000 })
      const curveObject = new THREE.Line(geometry, material)
      this.scene.add(curveObject)
    },

    // 创建光源
    createLight() {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0x111111) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const directionLight = new THREE.DirectionalLight(0xffffff)
      directionLight.position.set(-20, 30, 40)
      directionLight.intensity = 1.5
      this.scene.add(directionLight)
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)
      this.camera.position.set(130, 130, 130) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      //this.renderer.shadowMap.enabled = true // 显示阴影
      // this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x000000, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    render() {
      //相机路径的索引在0~1000中往复增加
      this.cameraPathIndex += 1
      if (this.cameraPathIndex === 1000) {
        this.cameraPathIndex = 0
      }
      const curveIndex = this.cameraPathIndex / 1000

      //取相机路径上当前点的坐标
      const tmpCameraPosition = this.cameraCurve.getPointAt(curveIndex) //curveIndex取值0~1
      //设置相机坐标为在相机路径上当前点的位置
      this.camera.position.set(
        tmpCameraPosition.x,
        tmpCameraPosition.y,
        tmpCameraPosition.z
      )
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) //相机看向原点

      //参考路径的索引在1001~0中往复减少
      if (this.shperePathIndex === 0) {
        this.shperePathIndex = 1001
      }
      this.shperePathIndex -= 1

      //取相参考径上当前点的坐标
      const sphereCurveIndex = this.shperePathIndex / 1000 //取值0~1
      const tmpSpherePosition = this.sphereCurve.getPointAt(sphereCurveIndex)
      //设置绿色球的位置为参考路径上当前点的位置
      this.biggerSphereMesh.position.set(
        tmpSpherePosition.x,
        tmpSpherePosition.y,
        tmpSpherePosition.z
      )

      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>