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)思路
很簡(jiǎn)單畫一條折線路徑，將鏡頭位置動(dòng)態(tài)綁定在當(dāng)前路徑上，同時(shí)設(shè)置鏡頭朝向路徑正前方。
實(shí)現(xiàn)難點(diǎn)
1、折現(xiàn)變曲線
畫一條折線路徑，通常將每一個(gè)轉(zhuǎn)折點(diǎn)標(biāo)出來(lái)畫出的THREE.Line，會(huì)變成曲線。
難點(diǎn)解答：
- 1.1、以轉(zhuǎn)折點(diǎn)分隔，一段一段的直線來(lái)畫，上一個(gè)線段的終點(diǎn)是下一個(gè)線段的起點(diǎn)。
- 1.2、畫一條折線，在轉(zhuǎn)折點(diǎn)處，通過(guò)多加一個(gè)點(diǎn)，構(gòu)成一個(gè)特別細(xì)微的短弧線。
2、鏡頭朝向不受控
對(duì)于controls綁定的camera，修改camera的lookAt和rotation并無(wú)反應(yīng)。
難點(diǎn)解答：
相機(jī)觀察方向camera.lookAt設(shè)置無(wú)效需要設(shè)置controls.target
3、鏡頭位置綁定不受控
對(duì)于controls綁定的camera，動(dòng)態(tài)修改camera的位置總存在一定錯(cuò)位。
難點(diǎn)解答：
蒼天啊，這個(gè)問(wèn)題糾結(jié)我好久，怎么設(shè)置都不對(duì)，即便參考上一個(gè)問(wèn)題控制controls.object.position也不對(duì)。
結(jié)果這是一個(gè)假的難點(diǎn)，鏡頭位置是受控的，感覺(jué)不受控是因?yàn)?，設(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)解答：
開(kāi)始以為是我整個(gè)場(chǎng)景太小了，放大場(chǎng)景，拉長(zhǎng)折線，拉遠(yuǎn)相機(jī)，并沒(méi)有什么用。
最后發(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)方法
在此通過(guò)兩個(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) // 加入到場(chǎng)景中
}
// 模仿管道的鏡頭推進(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()
// 移除場(chǎng)景中的線
// 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()
},
方法比較
- 方法一：鏡頭控制簡(jiǎn)單，但是不夠平滑。
- 方法二：鏡頭控制麻煩，要指定當(dāng)前點(diǎn)和目標(biāo)點(diǎn)，鏡頭切換平滑但不嚴(yán)格受控。
個(gè)人喜歡方法二，只要找好了線路上的控制點(diǎn)，動(dòng)畫效果更佳更容易控制每段動(dòng)畫的時(shí)間。
其他方法
過(guò)程中的使用過(guò)的其他方法，僅做記錄用。
方法一：繪制一條折線+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) // 加入到場(chǎng)景中
testList = geometry.vertices
}
// 場(chǎng)景動(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
}
}
}
說(shuō)明：
推進(jìn)里層相機(jī)，相機(jī)移動(dòng)和轉(zhuǎn)向正常，且在直角轉(zhuǎn)彎處，鏡頭轉(zhuǎn)動(dòng)>90°再切回90°；
推進(jìn)外層相機(jī)，鏡頭突然開(kāi)始亂切(因?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
}
// 場(chǎng)景動(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
}
}
}
說(shuō)明：
推進(jìn)里層相機(jī)，相機(jī)移動(dòng)和轉(zhuǎn)向正常，直角轉(zhuǎn)彎處突兀，因?yàn)槭嵌鄠€(gè)線段拼接出來(lái)的點(diǎn)；
推進(jìn)外層相機(jī)，相機(jī)移動(dòng)有些許錯(cuò)位(因?yàn)樵O(shè)置了最近距離)，相機(jī)轉(zhuǎn)向正常，但是直角轉(zhuǎn)彎處突兀，因?yàn)槭嵌鄠€(gè)線段拼接出來(lái)的點(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] > 0) {
derection = 0
} else {
derection = Math.PI
}
} else {
// z相同
if (cameraTest.position.x - point[k][0] > 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 < count - 1) {
self.tweenCameraTest(point, k + 1)
} else {
console.log('結(jié)束了?。。。。?！')
}
// callBack && 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] > 0) {
derection = 0
} else {
derection = Math.PI
}
} else {
// z相同
if (camera.position.x - point[k][0] > 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 < count - 1) {
self.tweenCamera(point, k + 1)
} else {
console.log('結(jié)束了！?。。。?！')
}
// callBack && callBack()
})
// tween.easing(TWEEN.Easing.Cubic.InOut)
tween.start()
}
說(shuō)明：
控制里層相機(jī)使用tweenCameraTest()方法，相機(jī)移動(dòng)正常，通過(guò)rotation.y控制直接轉(zhuǎn)向，轉(zhuǎn)彎時(shí)略突兀因?yàn)闆](méi)有動(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) // 通過(guò)此方法獲取點(diǎn)比curve.getPoints(1500)更好，不信你試試，用getPoints獲取，鏡頭會(huì)有明顯的俯視效果不知為何。
geometry.vertices.push(position)
}
let line = new THREE.Line(geometry, material) // 連成線
scene.add(line) // 加入到場(chǎng)景中
}
// 場(chǎng)景動(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)似乎亂切鏡頭穿過(guò)旁邊物體的效果。
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
}
}
}
說(shuō)明：
解決了，直角轉(zhuǎn)彎處，鏡頭轉(zhuǎn)動(dòng)>90°再切回90°的問(wèn)題。
解決了，推進(jìn)外層相機(jī)鏡頭亂切的問(wèn)題。
但是，相機(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)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js/jquery解析json和數(shù)組格式的方法詳解
本篇文章主要是對(duì)js/jquery解析json和數(shù)組格式的方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
css3元素簡(jiǎn)單的閃爍效果實(shí)現(xiàn)(html5 jquery)
本篇文章主要介紹了css3元素簡(jiǎn)單的閃爍效果實(shí)現(xiàn)(html5 jquery) 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JS實(shí)現(xiàn)進(jìn)度條順滑版詳細(xì)方案
最近在小程序里，做了一個(gè)類似微博刷視頻的需求，其中有一部分功能需要實(shí)現(xiàn)自定義進(jìn)度條，在做完第一版之后發(fā)現(xiàn)進(jìn)度條不順滑，而后想查查網(wǎng)上看有沒(méi)有什么好的方案，但最終沒(méi)找到合適的。下面給大家分享JS進(jìn)度條順滑版實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
前端實(shí)現(xiàn)監(jiān)控SDK的實(shí)戰(zhàn)指南
本文討論了前端監(jiān)控和數(shù)據(jù)統(tǒng)計(jì)的設(shè)計(jì)思路,包括錯(cuò)誤監(jiān)控、用戶行為日志、PV/UV統(tǒng)計(jì)等方面,介紹了數(shù)據(jù)采集、日志上報(bào)、日志查詢的流程,以及監(jiān)控錯(cuò)誤的類型和用戶埋點(diǎn)統(tǒng)計(jì)的手段,同時(shí)提到了PV和UV的統(tǒng)計(jì)方法,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了JavaScript enum枚舉類型定義及使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
clipboard.js在移動(dòng)端復(fù)制失敗的解決方法
最近在使用clipboard.js碰到的一個(gè)小問(wèn)題，通過(guò)查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
這篇文章主要介紹了Javascript模塊導(dǎo)入導(dǎo)出詳解的相關(guān)資料,需要的朋友可以參考下2022-12-12
swiper.js插件實(shí)現(xiàn)pc端文本上下滑動(dòng)功能示例
這篇文章主要介紹了swiper.js插件實(shí)現(xiàn)pc端文本上下滑動(dòng)功能,結(jié)合實(shí)例形式分析了swiper.js插件的具體引用與相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
JavaScript實(shí)現(xiàn)自動(dòng)消除按鈕功能的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)自動(dòng)消除按鈕功能的方法,涉及javascript針對(duì)頁(yè)面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08