相机切换

我们想做到动态切换相机

我们把两种相机定义出来

我们选择在声明周期的onMounted中进行相机的初始化

设置我们相机的位置

记得，我们要把之前的相机移除掉

我们进行相机的判断

效果

但是现在我们相机的位置不是很好， 我们用立方体来模拟一个平面

// 添加几何体
const cubeGeometry = new BoxGeometry(4, 4, 4)
const cubeMaterial = new MeshLambertMaterial({ color: 0xff0000, wireframe: false })
const cube = new Mesh(cubeGeometry, cubeMaterial)
cube.castShadow = true
cube.position.set(2, 2, 2)
scene.add(cube)

for (let j = 0; j < planeGeometry.parameters.height / 2; j++) {
    for (let i = 0; i < planeGeometry.parameters.width / 2; i++) {
        const cube = new Mesh(cubeGeometry, cubeMaterial)
        cube.position.x = -(planeGeometry.parameters.width / 2) + 2 + i * 5
        cube.position.z = -(planeGeometry.parameters.height / 2) + 2 + j * 5
        cube.position.y = 0
        scene.add(cube)
    }
}

相机切换

   camera: 'Perspective',
    switchCamera: function () {
        if (this.camera === "Perspective") {
            this.camera = "Orthographic"
        } else {
            this.camera = "Perspective"
        }
    },

添加到gui中

    gui.add(controlRef.value, "camera").listen()
    gui.add(controlRef.value, "switchCamera")

切换相机

// 切换相机
watch(() => controlRef.value.camera, (n) => {
    if (n === 'Orthographic') {
        cameraRef.value = new OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500)
        cameraRef.value.position.set(-120, 60, 180)
        cameraRef.value.lookAt(scene.position)
    } else {
        cameraRef.value = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        cameraRef.value.position.set(-120, 60, 180)
        cameraRef.value.lookAt(scene.position)
    }
})

完成

相机跟随

我们想要相机跟着我们某个物体来转换视角

添加参照物

// 添加一个参照物
const lookAtGeom = new SphereGeometry(2)
const lookAtMesh = new Mesh(lookAtGeom, new MeshLambertMaterial({ color: 0xff0000 }))
scene.add(lookAtMesh)

完成