three 相机使用小结

相机类型有哪些分别有什么作用

• ArrayCamera 摄像机阵列 用于同时渲染多个不同视角的场景，通常用于分屏或多视图渲染。 也可以用渲染VR
• Camera 相机基础类用来控制相机
• CubeCamera # 立方相机 捕获场影的全景，360度视图
• OrthographicCamera 正交相机 渲染2D场景
• PerspectiveCamera 透视相机，用于常见于3D 环境
• StereoCamera 立体相机 创建3D视图模似人眼双目视觉，通常用于VR/AR

要注意的时

• 立体相机 立方相机 摄像机阵列 有两个渲染视角
• 透视相机 正交相机 只有一个渲染视角

以下是透视相机使用示例

    // 导入 Three.js 库
import * as THREE from 'three';

// 创建透视相机
const camera = new THREE.PerspectiveCamera(
    75,                                  // 视场角 (FOV)
    window.innerWidth / window.innerHeight, // 宽高比
    0.1,                                 // 近剪裁面
    1000                                 // 远剪裁面
);
camera.position.set(0, 0, 100);  // 设置相机位置

// 创建场景
const scene = new THREE.Scene();

// 创建一个简单的立方体
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染函数
function animate() {
    requestAnimationFrame(animate);

    // 使立方体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

animate();

// 处理窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
});