欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

three.js鏡頭追蹤的移動(dòng)效果實(shí)例

 更新時(shí)間:2022年08月22日 11:46:41   作者:Beam  
這篇文章主要為大家介紹了three.js鏡頭追蹤的移動(dòng)效果實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

達(dá)到效果

指定一條折線路徑,鏡頭沿著路徑向前移動(dòng),類似第一視角走在當(dāng)前路徑上。

實(shí)現(xiàn)思路

很簡單畫一條折線路徑,將鏡頭位置動(dòng)態(tài)綁定在當(dāng)前路徑上,同時(shí)設(shè)置鏡頭朝向路徑正前方。

實(shí)現(xiàn)難點(diǎn)

1、折現(xiàn)變曲線

畫一條折線路徑,通常將每一個(gè)轉(zhuǎn)折點(diǎn)標(biāo)出來畫出的THREE.Line,會(huì)變成曲線。

難點(diǎn)解答:

  • 1.1、以轉(zhuǎn)折點(diǎn)分隔,一段一段的直線來畫,上一個(gè)線段的終點(diǎn)是下一個(gè)線段的起點(diǎn)。
  • 1.2、畫一條折線,在轉(zhuǎn)折點(diǎn)處,通過多加一個(gè)點(diǎn),構(gòu)成一個(gè)特別細(xì)微的短弧線。

2、鏡頭朝向不受控

對于controls綁定的camera,修改camera的lookAt和rotation并無反應(yīng)。

難點(diǎn)解答:

相機(jī)觀察方向camera.lookAt設(shè)置無效需要設(shè)置controls.target

3、鏡頭位置綁定不受控

對于controls綁定的camera,動(dòng)態(tài)修改camera的位置總存在一定錯(cuò)位。

難點(diǎn)解答:

蒼天啊,這個(gè)問題糾結(jié)我好久,怎么設(shè)置都不對,即便參考上一個(gè)問題控制controls.object.position也不對。

結(jié)果這是一個(gè)假的難點(diǎn),鏡頭位置是受控的,感覺不受控是因?yàn)椋O(shè)置了相機(jī)距離原點(diǎn)的最近距離?。?! 導(dǎo)致轉(zhuǎn)彎時(shí)距離太近鏡頭會(huì)往回退著轉(zhuǎn)彎,碰到旁邊的東西啊,哭唧唧。

// 設(shè)置相機(jī)距離原點(diǎn)的最近距離 即可控制放大限值
// controls.minDistance = 4
// 設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離 即可控制縮小限值
controls.maxDistance = 40

4、鏡頭抖動(dòng)

鏡頭抖動(dòng),懷疑是設(shè)置位置和朝向時(shí)坐標(biāo)被四舍五入時(shí),導(dǎo)致一會(huì)上一會(huì)下一會(huì)左一會(huì)右的抖動(dòng)。

難點(diǎn)解答:

開始以為是我整個(gè)場景太小了,放大場景,拉長折線,拉遠(yuǎn)相機(jī),并沒有什么用。

最后發(fā)現(xiàn)是在animate()動(dòng)畫中設(shè)置相機(jī)位置,y坐標(biāo)加了0.01:

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

相機(jī)位置坐標(biāo)和相機(jī)朝向坐標(biāo)不在同一平面,導(dǎo)致的抖動(dòng),將+0.01去掉就正常了。

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

最終實(shí)現(xiàn)方法

在此通過兩個(gè)相機(jī),先觀察相機(jī)cameraTest的移動(dòng)路徑和轉(zhuǎn)向,再切換成原始相機(jī)camera。

公共代碼如下:

// 外層相機(jī),原始相機(jī)
let camera = null
// 內(nèi)層相機(jī)和相機(jī)輔助線
let cameraTest = null
let cameraHelper = null
// 控制器
let controls = null
// 折線點(diǎn)的集合和索引
let testList = []
let testIndex = 0
initCamera () {
  // 原始相機(jī)
  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))
  // 設(shè)置第二個(gè)相機(jī)
  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
  // 照相機(jī)幫助線
  cameraHelper = new THREE.CameraHelper(cameraTest)
  scene.add(cameraTest)
  scene.add(cameraHelper)
}
// 初始化控制器
initControls () {
  controls = new OrbitControls(camera, renderer.domElement)
}

方法一:鏡頭沿線推進(jìn)

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), // 用于直角轉(zhuǎn)折
    new THREE.Vector3(2.2, 0.6, 1.6),
    new THREE.Vector3(2.2, 0.6, 1.59), // 用于直角轉(zhuǎn)折
    new THREE.Vector3(2.2, 0.6, -5),
    new THREE.Vector3(2.21, 0.6, -5), // 用于直角轉(zhuǎn)折
    new THREE.Vector3(8, 0.6, -5),
    new THREE.Vector3(8, 0.6, -5.01), // 用于直角轉(zhuǎn)折
    new THREE.Vector3(8, 0.6, -17),
    new THREE.Vector3(7.99, 0.6, -17), // 用于直角轉(zhuǎn)折
    new THREE.Vector3(-1, 0.6, -17),
    // new THREE.Vector3(-2, 0.6, -17.01), // 用于直角轉(zhuǎn)折
    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) // 加入到場景中
}
// 模仿管道的鏡頭推進(jìn)
if (curveList.length !== 0) {
	if (curveIndex < curveList.length - 20) {
	  // 推進(jìn)里層相機(jī)
	  /* cameraTest.position.set(curveList[curveIndex].x, curveList[curveIndex].y, curveList[curveIndex].z)
	  controls = new OrbitControls(cameraTest, labelRenderer.domElement) */
	  // 推進(jìn)外層相機(jī)
	  // 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動(dòng)畫

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, // 起始相機(jī)位置x
    py: camera.position.y, // 起始相機(jī)位置y
    pz: camera.position.z, // 起始相機(jī)位置z
    tx: controls.target.x, // 控制點(diǎn)的中心點(diǎn)x 起始目標(biāo)位置x
    ty: controls.target.y, // 控制點(diǎn)的中心點(diǎn)y 起始目標(biāo)位置y
    tz: controls.target.z // 控制點(diǎn)的中心點(diǎn)z 起始目標(biāo)位置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()
},

方法比較

  • 方法一:鏡頭控制簡單,但是不夠平滑。
  • 方法二:鏡頭控制麻煩,要指定當(dāng)前點(diǎn)和目標(biāo)點(diǎn),鏡頭切換平滑但不嚴(yán)格受控。

個(gè)人喜歡方法二,只要找好了線路上的控制點(diǎn),動(dòng)畫效果更佳更容易控制每段動(dòng)畫的時(shí)間。

其他方法

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

方法一:繪制一條折線+animate鏡頭推進(jìn)

// 獲取折線點(diǎn)數(shù)組
testInspect () {
	// 描折線點(diǎn),為了能使一條折線能直角轉(zhuǎn)彎,特添加“用于直角轉(zhuǎn)折”的輔助點(diǎn),嘗試將所有標(biāo)為“用于直角轉(zhuǎn)折”的點(diǎn)去掉,折線馬上變曲線。
	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), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(2.2, 0.6, 1.6),
	    new THREE.Vector3(2.2, 0.6, 1.59), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(2.2, 0.6, -5),
	    new THREE.Vector3(2.21, 0.6, -5), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(8, 0.6, -5),
	    new THREE.Vector3(8, 0.6, -5.01), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(8, 0.6, -17),
	    new THREE.Vector3(7.99, 0.6, -17), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(-2, 0.6, -17),
	    new THREE.Vector3(-2, 0.6, -17.01), // 用于直角轉(zhuǎn)折
	    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
}
// 場景動(dòng)畫-推進(jìn)相機(jī)
animate () {
  // 模仿管道的鏡頭推進(jìn)
  if (testList.length !== 0) {
    if (testIndex < testList.length - 2) {
      // 推進(jìn)里層相機(jī)
      // 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
      // 推進(jìn)外層相機(jī)
      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
    }
  }
}

說明:

推進(jìn)里層相機(jī),相機(jī)移動(dòng)和轉(zhuǎn)向正常,且在直角轉(zhuǎn)彎處,鏡頭轉(zhuǎn)動(dòng)>90°再切回90°;

推進(jìn)外層相機(jī),鏡頭突然開始亂切(因?yàn)樵O(shè)置了最近距離),且在直角轉(zhuǎn)彎處,鏡頭轉(zhuǎn)動(dòng)>90°再切回90°。

方法二:繪制多條線段+animate鏡頭推進(jìn)

// 獲取折線點(diǎn)數(shù)組
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
}
// 場景動(dòng)畫-推進(jìn)相機(jī)
animate () {
  // 模仿管道的鏡頭推進(jìn)
  if (testList.length !== 0) {
    if (testIndex < testList.length - 2) {
      // 推進(jìn)里層相機(jī)
      // 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
      // 推進(jìn)外層相機(jī)
      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
    }
  }
}

說明:

推進(jìn)里層相機(jī),相機(jī)移動(dòng)和轉(zhuǎn)向正常,直角轉(zhuǎn)彎處突兀,因?yàn)槭嵌鄠€(gè)線段拼接出來的點(diǎn);

推進(jìn)外層相機(jī),相機(jī)移動(dòng)有些許錯(cuò)位(因?yàn)樵O(shè)置了最近距離),相機(jī)轉(zhuǎn)向正常,但是直角轉(zhuǎn)彎處突兀,因?yàn)槭嵌鄠€(gè)線段拼接出來的點(diǎn)。

方法三:繪制多條線段+tween動(dòng)畫變化鏡頭

// 獲取折線點(diǎn)數(shù)組
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動(dòng)畫-控制里層相機(jī)
    // this.tweenCamera(points, 0) // tween動(dòng)畫-控制外層相機(jī)
}
// tween動(dòng)畫-控制里層相機(jī)
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, // 起始相機(jī)位置x
    py: cameraTest.position.y, // 起始相機(jī)位置y
    pz: cameraTest.position.z // 起始相機(jī)位置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('結(jié)束了!?。。。?!')
    }
    // callBack &amp;&amp; callBack()
  })
  // tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
}
// tween動(dòng)畫-控制外層相機(jī)
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, // 起始相機(jī)位置x
    py: camera.position.y, // 起始相機(jī)位置y
    pz: camera.position.z // 起始相機(jī)位置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('結(jié)束了!?。。。?!')
    }
    // callBack &amp;&amp; callBack()
  })
  // tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
}

說明:

控制里層相機(jī)使用tweenCameraTest()方法,相機(jī)移動(dòng)正常,通過rotation.y控制直接轉(zhuǎn)向,轉(zhuǎn)彎時(shí)略突兀因?yàn)闆]有動(dòng)畫控制rotation.y轉(zhuǎn)動(dòng);

控制外層相機(jī)使用tweenCamera()方法,相機(jī)移動(dòng)有些許錯(cuò)位(因?yàn)樵O(shè)置了最近距離),相機(jī)轉(zhuǎn)向完全不受控,似乎始終看向坐標(biāo)原點(diǎn)。

方法四:優(yōu)化方法一,繪制一條折線+animate鏡頭推進(jìn)

// 獲取折線點(diǎn)數(shù)組
testInspect () {
	// 描折線點(diǎn),為了能使一條折線能直角轉(zhuǎn)彎,特添加“用于直角轉(zhuǎn)折”的輔助點(diǎn),嘗試將所有標(biāo)為“用于直角轉(zhuǎn)折”的點(diǎn)去掉,折線馬上變曲線。
	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), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(2.2, 0.6, 1.6),
	    new THREE.Vector3(2.2, 0.6, 1.59), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(2.2, 0.6, -5),
	    new THREE.Vector3(2.21, 0.6, -5), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(8, 0.6, -5),
	    new THREE.Vector3(8, 0.6, -5.01), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(8, 0.6, -17),
	    new THREE.Vector3(7.99, 0.6, -17), // 用于直角轉(zhuǎn)折
	    new THREE.Vector3(-2, 0.6, -17),
	    new THREE.Vector3(-2, 0.6, -17.01), // 用于直角轉(zhuǎn)折
	    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) // 通過此方法獲取點(diǎn)比curve.getPoints(1500)更好,不信你試試,用getPoints獲取,鏡頭會(huì)有明顯的俯視效果不知為何。
        geometry.vertices.push(position)
    }
    let line = new THREE.Line(geometry, material) // 連成線
    scene.add(line) // 加入到場景中
}
// 場景動(dòng)畫-推進(jìn)外層相機(jī)
animate () {
  // 模仿管道的鏡頭推進(jìn)
  if (testList.length !== 0) {
    if (testIndex < testList.length - 2) {
      // 推進(jìn)里層相機(jī)
      // cameraTest.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
      // controls = new OrbitControls(cameraTest, labelRenderer.domElement)
      // 推進(jìn)外層相機(jī)
      // 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) // 稍微講相機(jī)位置上移,就不會(huì)出現(xiàn)似乎亂切鏡頭穿過旁邊物體的效果。
      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
    }
  }
}

說明:

解決了,直角轉(zhuǎn)彎處,鏡頭轉(zhuǎn)動(dòng)>90°再切回90°的問題。

解決了,推進(jìn)外層相機(jī)鏡頭亂切的問題。

但是,相機(jī)移動(dòng)在轉(zhuǎn)彎時(shí)有明顯的往后閃(因?yàn)樵O(shè)置了最近距離),并不是嚴(yán)格跟隨折線前進(jìn)。

以上就是three.js鏡頭追蹤的移動(dòng)效果實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于three.js鏡頭追蹤移動(dòng)的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論