Work together to create and grow together! This is the 4th day of my participation in the "Nuggets Daily New Plan · August Update Challenge", click to view the details of the event
Achieve the desired effect
Specify a polyline path, and the camera moves forward along the path, similar to the first point of view walking on the current path.
Realize ideas
It is very simple to draw a polyline path, dynamically bind the camera position to the current path, and set the camera to face the front of the path.
Realization Difficulties
1. Discount curve
Draw a polyline path, usually mark each turning point and draw THREE.Line, which will become a curve.
Difficulty answers:
- 1.1. Separated by turning points, draw a straight line segment by segment. The end point of the previous line segment is the starting point of the next line segment.
- 1.2. Draw a polyline. At the turning point, add an extra point to form a particularly subtle short arc.
2. The orientation of the lens is not controlled
For the camera bound by controls, modifying the lookAt and rotation of the camera does not respond.
Difficulty answers:
The camera viewing direction camera.lookAt setting is invalid, you need to set controls.target
3. The lens position binding is not controlled
For the camera bound by controls, there is always a certain misalignment in dynamically modifying the position of the camera.
Difficulty answers:
God, I have been entangled in this problem for a long time, no matter how to set it, even if I refer to the previous question to control controls.object.position, it is not correct.
It turns out that this is a fake difficulty, the lens position is controlled, and it feels uncontrolled because the closest distance from the camera to the origin is set! ! ! If the distance is too close when turning, the camera will turn back and turn, hitting something next to it, crying.
// 设置相机距离原点的最近距离 即可控制放大限值
// controls.minDistance = 4
// 设置相机距离原点的最远距离 即可控制缩小限值
controls.maxDistance = 40
复制代码4. Lens shake
The lens shakes. It is suspected that when the coordinates are rounded when setting the position and orientation, it causes the shaking for one time, one time, one time, one left and one right.
Difficulty answers:
At first I thought that the whole scene was too small. Zooming in on the scene, stretching the polyline, and zooming out the camera didn't help.
Finally, I found that the camera position was set in the animate() animation, and the y coordinate was added by 0.01:
controls.object.position.set(testList[testIndex].x, testList[testIndex].y + 0.01, testList[testIndex].z)
复制代码The camera position coordinates and the camera orientation coordinates are not in the same plane, and the resulting jitter is normal if +0.01 is removed.
controls.object.position.set(testList[testIndex].x, testList[testIndex].y, testList[testIndex].z)
复制代码final implementation method
Here, through two cameras, first observe the movement path and steering of the camera cameraTest, and then switch to the original camera camera.
The public code is as follows:
// 外层相机，原始相机
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)
}
复制代码Method 1: Advance the camera along the line
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})
}
}
复制代码Method 2: Use tween animation
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()
},
复制代码Method comparison:
- Method 1: The lens control is simple, but not smooth enough.
- Method 2: The lens control is troublesome. To specify the current point and the target point, the lens switching is smooth but not strictly controlled.
Personally like the second method, as long as you find the control points on the line, the animation effect is better and it is easier to control the time of each animation.
————————————————————————
Other methods
Other methods used in the process are for record only.
Method 1: Draw a polyline + animate lens advance
// 获取折线点数组
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
}
}
}
复制代码illustrate:
Push the camera in the inner layer, the camera moves and turns normally, and at the right-angle turn, the lens rotates >90° and then cuts back to 90°;
Pushing the outer camera in, the lens suddenly starts to cut randomly (because the closest distance is set), and at a right angle turn, the lens turns >90° and cuts back to 90°.
Method 2: Draw multiple line segments + animate lens advance
// 获取折线点数组
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
}
}
}
复制代码illustrate:
Push the camera in the inner layer, the camera moves and turns normally, and the right-angle turn is abrupt, because it is a point spliced by multiple line segments;
Pushing the outer camera, the camera moves a little bit misaligned (because the shortest distance is set), the camera turns normally, but the right-angle turn is abrupt because it is a point where multiple line segments are spliced.
Method 3: Draw multiple line segments + tween animation to change the lens
// 获取折线点数组
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] > 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, // 起始相机位置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 < count - 1) {
self.tweenCameraTest(point, k + 1)
} else {
console.log('结束了！！！！！！')
}
// callBack && 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] > 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, // 起始相机位置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 < count - 1) {
self.tweenCamera(point, k + 1)
} else {
console.log('结束了！！！！！！')
}
// callBack && callBack()
})
// tween.easing(TWEEN.Easing.Cubic.InOut)
tween.start()
}
复制代码illustrate:
Use the tweenCameraTest() method to control the camera in the inner layer. The camera moves normally, and the rotation is controlled directly by rotation.y. When turning, it is a little abrupt because there is no animation to control rotation.y rotation;
Use the tweenCamera() method to control the outer camera, the camera moves a little bit misaligned (because the closest distance is set), the camera turns completely out of control, and it seems to always look at the coordinate origin.
Method 4: Optimization method 1, draw a polyline + animate lens advance
// 获取折线点数组
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
}
}
}
复制代码illustrate:
Solved the problem that at right-angle turns, the lens rotates >90° and then switches back to 90°.
Resolved an issue where advancing the outer camera lens would randomly cut.
However, the camera movement has a noticeable backward flicker when turning (because the closest distance is set), and it does not strictly follow the polyline.