three.js鏡頭追蹤的移動效果實例

Posted on by

達到效果

指定一條折線路徑，鏡頭沿著路徑向前移動，類似第一視角走在當前路徑上。

實現思路

很簡單畫一條折線路徑，將鏡頭位置動態綁定在當前路徑上，同時設置鏡頭朝向路徑正前方。

實現難點

1、折現變曲線

畫一條折線路徑，通常將每一個轉折點標出來畫出的THREE.Line，會變成曲線。

難點解答：

  • 1.1、以轉折點分隔，一段一段的直線來畫，上一個線段的終點是下一個線段的起點。
  • 1.2、畫一條折線，在轉折點處，通過多加一個點，構成一個特別細微的短弧線。

2、鏡頭朝向不受控

對於controls綁定的camera，修改camera的lookAt和rotation並無反應。

難點解答：

相機觀察方向camera.lookAt設置無效需要設置controls.target

3、鏡頭位置綁定不受控

對於controls綁定的camera，動態修改camera的位置總存在一定錯位。

難點解答：

蒼天啊，這個問題糾結我好久，怎麼設置都不對，即便參考上一個問題控制controls.object.position也不對。

結果這是一個假的難點，鏡頭位置是受控的，感覺不受控是因為，設置瞭相機距離原點的最近距離！！！ 導致轉彎時距離太近鏡頭會往回退著轉彎，碰到旁邊的東西啊，哭唧唧。

// 設置相機距離原點的最近距離 即可控制放大限值
// controls.minDistance = 4
// 設置相機距離原點的最遠距離 即可控制縮小限值
controls.maxDistance = 40

4、鏡頭抖動

鏡頭抖動，懷疑是設置位置和朝向時坐標被四舍五入時，導致一會上一會下一會左一會右的抖動。

難點解答：

開始以為是我整個場景太小瞭，放大場景，拉長折線，拉遠相機，並沒有什麼用。

最後發現是在animate()動畫中設置相機位置，y坐標加瞭0.01：

controls.object.position.set(testList[testIndex].x, testList[testIndex].y + 0.01, testList[testIndex].z)

相機位置坐標和相機朝向坐標不在同一平面，導致的抖動，將+0.01去掉就正常瞭。

controls.object.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)

最終實現方法

在此通過兩個相機，先觀察相機cameraTest的移動路徑和轉向，再切換成原始相機camera。

公共代碼如下：

// 外層相機，原始相機
let camera = null
// 內層相機和相機輔助線
let cameraTest = null
let cameraHelper = null
// 控制器
let controls = null
// 折線點的集合和索引
let testList = []
let testIndex = 0
initCamera () {
  // 原始相機
  camera = new THREE.PerspectiveCamera(45, div3D.clientWidth / div3D.clientHeight, 0.1, 1000)
  camera.position.set(16, 6, 10)
  // scene.add(camera)
  // camera.lookAt(new THREE.Vector3(0, 0, 0))
  // 設置第二個相機
  cameraTest = new THREE.PerspectiveCamera(45, div3D.clientWidth / div3D.clientHeight, 0.1, 1000)
  cameraTest.position.set(0, 0.6, 0)
  cameraTest.lookAt(new THREE.Vector3(0, 0, 0))
  cameraTest.rotation.x = 0
  // 照相機幫助線
  cameraHelper = new THREE.CameraHelper(cameraTest)
  scene.add(cameraTest)
  scene.add(cameraHelper)
}
// 初始化控制器
initControls () {
  controls = new OrbitControls(camera, renderer.domElement)
}

方法一：鏡頭沿線推進

inspectCurveList () {
  let curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(2.9, 0.6, 7),
    new THREE.Vector3(2.9, 0.6, 1.6),
    new THREE.Vector3(2.89, 0.6, 1.6), // 用於直角轉折
    new THREE.Vector3(2.2, 0.6, 1.6),
    new THREE.Vector3(2.2, 0.6, 1.59), // 用於直角轉折
    new THREE.Vector3(2.2, 0.6, -5),
    new THREE.Vector3(2.21, 0.6, -5), // 用於直角轉折
    new THREE.Vector3(8, 0.6, -5),
    new THREE.Vector3(8, 0.6, -5.01), // 用於直角轉折
    new THREE.Vector3(8, 0.6, -17),
    new THREE.Vector3(7.99, 0.6, -17), // 用於直角轉折
    new THREE.Vector3(-1, 0.6, -17),
    // new THREE.Vector3(-2, 0.6, -17.01), // 用於直角轉折
    new THREE.Vector3(-3, 0.6, -20.4),
    new THREE.Vector3(-2, 0.6, 5)
  ])
  let geometry = new THREE.Geometry()
  let gap = 1000
  for (let i = 0; i < gap; i++) {
    let index = i / gap
    let point = curve.getPointAt(index)
    let position = point.clone()
    curveList.push(position)
    geometry.vertices.push(position)
  }
  // geometry.vertices = curve.getPoints(500)
  // curveList = geometry.vertices
  // let material = new THREE.LineBasicMaterial({color: 0x3cf0fa})
  // let line = new THREE.Line(geometry, material) // 連成線
  // line.name = 'switchInspectLine'
  // scene.add(line) // 加入到場景中
}
// 模仿管道的鏡頭推進
if (curveList.length !== 0) {
	if (curveIndex < curveList.length - 20) {
	  // 推進裡層相機
	  /* cameraTest.position.set(curveList[curveIndex].x, curveList[curveIndex].y, curveList[curveIndex].z)
	  controls = new OrbitControls(cameraTest, labelRenderer.domElement) */
	  // 推進外層相機
	  // camera.position.set(curveList[curveIndex].x, curveList[curveIndex].y + 1, curveList[curveIndex].z)
	  controls.object.position.set(curveList[curveIndex].x, curveList[curveIndex].y, curveList[curveIndex].z)
	  controls.target = curveList[curveIndex + 20]
	  // controls.target = new THREE.Vector3(curveList[curveIndex + 2].x, curveList[curveIndex + 2].y, curveList[curveIndex + 2].z)
	  curveIndex += 1
	} else {
	  curveList = []
	  curveIndex = 0
	  this.inspectSwitch = false
	  this.addRoomLabel()
	  this.removeLabel()
	  // 移除場景中的線
	  // let removeLine = scene.getObjectByName('switchInspectLine')
	  // if (removeLine !== undefined) {
	  //   scene.remove(removeLine)
	  // }
	  // 還原鏡頭位置
	  this.animateCamera({x: 16, y: 6, z: 10}, {x: 0, y: 0, z: 0})
	}
}

方法二：使用tween動畫

inspectTween () {
  let wayPoints = [
    {
      point: {x: 2.9, y: 0.6, z: 1.6},
      camera: {x: 2.9, y: 0.6, z: 7},
      time: 3000
    },
    {
      point: {x: 2.2, y: 0.6, z: 1.6},
      camera: {x: 2.9, y: 0.6, z: 1.6},
      time: 5000
    },
    {
      point: {x: 2.2, y: 0.6, z: -5},
      camera: {x: 2.2, y: 0.6, z: 1.6},
      time: 2000
    },
    {
      point: {x: 8, y: 0.6, z: -5},
      camera: {x: 2.2, y: 0.6, z: -5},
      time: 6000
    },
    {
      point: {x: 8, y: 0.6, z: -17},
      camera: {x: 8, y: 0.6, z: -5},
      time: 3000
    },
    {
      point: {x: -2, y: 0.6, z: -17},
      camera: {x: 8, y: 0.6, z: -17},
      time: 3000
    },
    {
      point: {x: -2, y: 0.6, z: -20.4},
      camera: {x: -2, y: 0.6, z: -17},
      time: 3000
    },
    {
      point: {x: -2, y: 0.6, z: 5},
      camera: {x: -3, y: 0.6, z: -17},
      time: 3000
    },
    // {
    //   point: {x: -2, y: 0.6, z: 5},
    //   camera: {x: -2, y: 0.6, z: -20.4}
    // },
    {
      point: {x: 0, y: 0, z: 0},
      camera: {x: -2, y: 0.6, z: 5},
      time: 3000
    }
  ]
  this.animateInspect(wayPoints, 0)
}
animateInspect (point, k) {
  let self = this
  let time = 3000
  if (point[k].time) {
    time = point[k].time
  }
  let count = point.length
  let target = point[k].point
  let position = point[k].camera
  let tween = new TWEEN.Tween({
    px: camera.position.x, // 起始相機位置x
    py: camera.position.y, // 起始相機位置y
    pz: camera.position.z, // 起始相機位置z
    tx: controls.target.x, // 控制點的中心點x 起始目標位置x
    ty: controls.target.y, // 控制點的中心點y 起始目標位置y
    tz: controls.target.z // 控制點的中心點z 起始目標位置z
  })
  tween.to({
    px: position.x,
    py: position.y,
    pz: position.z,
    tx: target.x,
    ty: target.y,
    tz: target.z
  }, time)
  tween.onUpdate(function () {
    camera.position.x = this.px
    camera.position.y = this.py
    camera.position.z = this.pz
    controls.target.x = this.tx
    controls.target.y = this.ty
    controls.target.z = this.tz
    // controls.update()
  })
  tween.onComplete(function () {
    // controls.enabled = true
    if (self.inspectSwitch && k < count - 1) {
      self.animateInspect(point, k + 1)
    } else {
      self.inspectSwitch = false
      self.addRoomLabel()
      self.removeLabel()
    }
    // callBack && callBack()
  })
  // tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
},

方法比較

  • 方法一：鏡頭控制簡單，但是不夠平滑。
  • 方法二：鏡頭控制麻煩，要指定當前點和目標點，鏡頭切換平滑但不嚴格受控。

個人喜歡方法二，隻要找好瞭線路上的控制點，動畫效果更佳更容易控制每段動畫的時間。

其他方法

過程中的使用過的其他方法，僅做記錄用。

方法一：繪制一條折線+animate鏡頭推進

// 獲取折線點數組
testInspect () {
	// 描折線點，為瞭能使一條折線能直角轉彎，特添加“用於直角轉折”的輔助點，嘗試將所有標為“用於直角轉折”的點去掉，折線馬上變曲線。
	let curve = new THREE.CatmullRomCurve3([
	    new THREE.Vector3(2.9, 0.6, 7),
	    new THREE.Vector3(2.9, 0.6, 1.6),
	    new THREE.Vector3(2.89, 0.6, 1.6), // 用於直角轉折
	    new THREE.Vector3(2.2, 0.6, 1.6),
	    new THREE.Vector3(2.2, 0.6, 1.59), // 用於直角轉折
	    new THREE.Vector3(2.2, 0.6, -5),
	    new THREE.Vector3(2.21, 0.6, -5), // 用於直角轉折
	    new THREE.Vector3(8, 0.6, -5),
	    new THREE.Vector3(8, 0.6, -5.01), // 用於直角轉折
	    new THREE.Vector3(8, 0.6, -17),
	    new THREE.Vector3(7.99, 0.6, -17), // 用於直角轉折
	    new THREE.Vector3(-2, 0.6, -17),
	    new THREE.Vector3(-2, 0.6, -17.01), // 用於直角轉折
	    new THREE.Vector3(-2, 0.6, -20.4),
	    new THREE.Vector3(-2, 0.6, 5),
	])
	let material = new THREE.LineBasicMaterial({color: 0x3cf0fa})
	let geometry = new THREE.Geometry()
	geometry.vertices = curve.getPoints(1500)
	let line = new THREE.Line(geometry, material) // 連成線
	scene.add(line) // 加入到場景中
	testList = geometry.vertices
}
// 場景動畫-推進相機
animate () {
  // 模仿管道的鏡頭推進
  if (testList.length !== 0) {
    if (testIndex < testList.length - 2) {
      // 推進裡層相機
      // cameraTest.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
      // controls = new OrbitControls(cameraTest, labelRenderer.domElement)
      // controls.target = new THREE.Vector3(testList[testIndex + 2].x, testList[testIndex + 2].y, testList[testIndex + 2].z)
      // testIndex += 1
      // 推進外層相機
      camera.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
      controls.target = new THREE.Vector3(testList[testIndex + 2].x, testList[testIndex + 2].y, testList[testIndex + 2].z)
      testIndex += 1
    } else {
      testList = []
      testIndex = 0
    }
  }
}

說明：

推進裡層相機，相機移動和轉向正常，且在直角轉彎處，鏡頭轉動>90°再切回90°；

推進外層相機，鏡頭突然開始亂切(因為設置瞭最近距離)，且在直角轉彎處，鏡頭轉動>90°再切回90°。

方法二：繪制多條線段+animate鏡頭推進

// 獲取折線點數組
testInspect () {
	let points = [	    [2.9, 7],
	    [2.9, 1.6],
	    [2.2, 1.6],
	    [2.2, -5],
	    [8, -5],
	    [8, -17],
	    [-2, -17],
	    [-2, -20.4],
	    [-2, 5]
	  ]
	testList = this.linePointList(points, 0.6)
}
linePointList (xz, y) {
  let allPoint = []
  for (let i = 0; i < xz.length - 1; i++) {
    if (xz[i][0] === xz[i + 1][0]) {
      let gap = (xz[i][1] - xz[i + 1][1]) / 100
      for (let j = 0; j < 100; j++) {
        allPoint.push(new THREE.Vector3(xz[i][0], y, xz[i][1] - gap * j))
      }
    } else {
      let gap = (xz[i][0] - xz[i + 1][0]) / 100
      for (let j = 0; j < 100; j++) {
        allPoint.push(new THREE.Vector3(xz[i][0] - gap * j, y, xz[i][1]))
      }
    }
  }
  return allPoint
}
// 場景動畫-推進相機
animate () {
  // 模仿管道的鏡頭推進
  if (testList.length !== 0) {
    if (testIndex < testList.length - 2) {
      // 推進裡層相機
      // cameraTest.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
      // controls = new OrbitControls(cameraTest, labelRenderer.domElement)
      // controls.target = new THREE.Vector3(testList[testIndex + 2].x, testList[testIndex + 2].y, testList[testIndex + 2].z)
      // testIndex += 1
      // 推進外層相機
      camera.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
      controls.target = new THREE.Vector3(testList[testIndex + 2].x, testList[testIndex + 2].y, testList[testIndex + 2].z)
      testIndex += 1
    } else {
      testList = []
      testIndex = 0
    }
  }
}

說明：

推進裡層相機，相機移動和轉向正常，直角轉彎處突兀，因為是多個線段拼接出來的點；

推進外層相機，相機移動有些許錯位(因為設置瞭最近距離)，相機轉向正常，但是直角轉彎處突兀，因為是多個線段拼接出來的點。

方法三：繪制多條線段+tween動畫變化鏡頭

// 獲取折線點數組
testInspect () {
	let points = [
        [2.9, 7],
        [2.9, 1.6],
        [2.2, 1.6],
        [2.2, -5],
        [8, -5],
        [8, -17],
        [-2, -17],
        [-2, -20.4],
        [-2, 5]
      ]
    this.tweenCameraTest(points, 0) // tween動畫-控制裡層相機
    // this.tweenCamera(points, 0) // tween動畫-控制外層相機
}
// tween動畫-控制裡層相機
tweenCameraTest (point, k) {
  let self = this
  let count = point.length
  let derection = 0
  if (cameraTest.position.x === point[k][0]) {
    // x相同
    if (cameraTest.position.z - point[k][1] &gt; 0) {
      derection = 0
    } else {
      derection = Math.PI
    }
  } else {
    // z相同
    if (cameraTest.position.x - point[k][0] &gt; 0) {
      derection = Math.PI / 2
    } else {
      derection = - Math.PI / 2
    }
  }
  cameraTest.rotation.y = derection
  let tween = new TWEEN.Tween({
    px: cameraTest.position.x, // 起始相機位置x
    py: cameraTest.position.y, // 起始相機位置y
    pz: cameraTest.position.z // 起始相機位置z
  })
  tween.to({
    px: point[k][0],
    py: 0.6,
    pz: point[k][1]
  }, 3000)
  tween.onUpdate(function () {
    cameraTest.position.x = this.px
    cameraTest.position.y = this.py
    cameraTest.position.z = this.pz
  })
  tween.onComplete(function () {
    if (k &lt; count - 1) {
      self.tweenCameraTest(point, k + 1)
    } else {
      console.log('結束瞭！！！！！！')
    }
    // callBack &amp;&amp; callBack()
  })
  // tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
}
// tween動畫-控制外層相機
tweenCamera (point, k) {
  let self = this
  let count = point.length
  let derection = 0
  if (camera.position.x === point[k][0]) {
    // x相同
    if (camera.position.z - point[k][1] &gt; 0) {
      derection = 0
    } else {
      derection = Math.PI
    }
  } else {
    // z相同
    if (camera.position.x - point[k][0] &gt; 0) {
      derection = Math.PI / 2
    } else {
      derection = - Math.PI / 2
    }
  }
  camera.rotation.y = derection
  let tween = new TWEEN.Tween({
    px: camera.position.x, // 起始相機位置x
    py: camera.position.y, // 起始相機位置y
    pz: camera.position.z // 起始相機位置z
  })
  tween.to({
    px: point[k][0],
    py: 0.6,
    pz: point[k][1]
  }, 3000)
  tween.onUpdate(function () {
    camera.position.x = this.px
    camera.position.y = this.py
    camera.position.z = this.pz
  })
  tween.onComplete(function () {
    if (k &lt; count - 1) {
      self.tweenCamera(point, k + 1)
    } else {
      console.log('結束瞭！！！！！！')
    }
    // callBack &amp;&amp; callBack()
  })
  // tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
}

說明：

控制裡層相機使用tweenCameraTest()方法，相機移動正常，通過rotation.y控制直接轉向，轉彎時略突兀因為沒有動畫控制rotation.y轉動；

控制外層相機使用tweenCamera()方法，相機移動有些許錯位(因為設置瞭最近距離)，相機轉向完全不受控，似乎始終看向坐標原點。

方法四：優化方法一，繪制一條折線+animate鏡頭推進

// 獲取折線點數組
testInspect () {
	// 描折線點，為瞭能使一條折線能直角轉彎，特添加“用於直角轉折”的輔助點，嘗試將所有標為“用於直角轉折”的點去掉，折線馬上變曲線。
	let curve = new THREE.CatmullRomCurve3([
	    new THREE.Vector3(2.9, 0.6, 7),
	    new THREE.Vector3(2.9, 0.6, 1.6),
	    new THREE.Vector3(2.89, 0.6, 1.6), // 用於直角轉折
	    new THREE.Vector3(2.2, 0.6, 1.6),
	    new THREE.Vector3(2.2, 0.6, 1.59), // 用於直角轉折
	    new THREE.Vector3(2.2, 0.6, -5),
	    new THREE.Vector3(2.21, 0.6, -5), // 用於直角轉折
	    new THREE.Vector3(8, 0.6, -5),
	    new THREE.Vector3(8, 0.6, -5.01), // 用於直角轉折
	    new THREE.Vector3(8, 0.6, -17),
	    new THREE.Vector3(7.99, 0.6, -17), // 用於直角轉折
	    new THREE.Vector3(-2, 0.6, -17),
	    new THREE.Vector3(-2, 0.6, -17.01), // 用於直角轉折
	    new THREE.Vector3(-2, 0.6, -20.4),
	    new THREE.Vector3(-2, 0.6, 5),
	])
	let material = new THREE.LineBasicMaterial({color: 0x3cf0fa})
    let geometry = new THREE.Geometry()
    let gap = 500
    for (let i = 0; i < gap; i++) {
        let index = i / gap
        let point = curve.getPointAt(index)
        let position = point.clone()
        testList.push(position) // 通過此方法獲取點比curve.getPoints(1500)更好，不信你試試，用getPoints獲取，鏡頭會有明顯的俯視效果不知為何。
        geometry.vertices.push(position)
    }
    let line = new THREE.Line(geometry, material) // 連成線
    scene.add(line) // 加入到場景中
}
// 場景動畫-推進外層相機
animate () {
  // 模仿管道的鏡頭推進
  if (testList.length !== 0) {
    if (testIndex < testList.length - 2) {
      // 推進裡層相機
      // cameraTest.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
      // controls = new OrbitControls(cameraTest, labelRenderer.domElement)
      // 推進外層相機
      // camera.position.set(testList[testIndex].x, testList[testIndex].y + 0.01, testList[testIndex].z)
      controls.object.position.set(testList[testIndex].x, testList[testIndex].y + 0.01, testList[testIndex].z) // 稍微講相機位置上移，就不會出現似乎亂切鏡頭穿過旁邊物體的效果。
      controls.target = testList[testIndex + 2]
      // controls.target = new THREE.Vector3(testList[testIndex + 2].x, testList[testIndex + 2].y, testList[testIndex + 2].z)
      testIndex += 1
    } else {
      testList = []
      testIndex = 0
    }
  }
}

說明：

解決瞭，直角轉彎處，鏡頭轉動>90°再切回90°的問題。

解決瞭，推進外層相機鏡頭亂切的問題。

但是，相機移動在轉彎時有明顯的往後閃(因為設置瞭最近距離)，並不是嚴格跟隨折線前進。

以上就是three.js鏡頭追蹤的移動效果實例的詳細內容，更多關於three.js鏡頭追蹤移動的資料請關註WalkonNet其它相關文章！

推薦閱讀：