three.js 相机旋转

基础概念

three.js 是一个用于在网页上创建和显示三维图形的JavaScript库。相机（Camera）在three.js中是一个关键组件，它决定了场景中哪些部分会被渲染以及如何被渲染。相机的旋转是指改变相机观察场景的方向。

类型与应用场景

PerspectiveCamera：模拟人眼视角，适用于大多数3D场景。
OrthographicCamera：提供平行投影，常用于2D渲染或需要精确尺寸显示的场景。

应用场景包括但不限于：

虚拟现实（VR）体验
游戏开发
数据可视化
建筑设计展示

实现相机旋转的方法

使用鼠标控制旋转

// 初始化相机和渲染器
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 设置相机初始位置
camera.position.z = 5;

// 添加鼠标事件监听
let isDragging = false;
let previousMousePosition = {
    x: 0,
    y: 0
};

function onMouseDown(event) {
    isDragging = true;
}

function onMouseUp(event) {
    isDragging = false;
}

function onMouseMove(event) {
    if (isDragging) {
        const deltaMove = {
            x: event.offsetX - previousMousePosition.x,
            y: event.offsetY - previousMousePosition.y
        };

        const deltaRotationQuaternion = new THREE.Quaternion()
            .setFromEuler(new THREE.Euler(
                toRadians(deltaMove.y * 1),
                toRadians(deltaMove.x * 1),
                0,
                'XYZ'
            ));

        camera.quaternion.multiplyQuaternions(deltaRotationQuaternion, camera.quaternion);
    }

    previousMousePosition = {
        x: event.offsetX,
        y: event.offsetY
    };
}

function toRadians(angle) {
    return angle * (Math.PI / 180);
}

window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
window.addEventListener('mousemove', onMouseMove, false);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();