Bootstrap

Three.js——相机

在Three.js中,相机(Camera)是用于定义视图和渲染场景的一个关键组件。相机决定了你从哪个角度和位置观察场景中的物体,以及如何呈现这些物体。Three.js 提供了几种不同类型的相机,每种相机都有其特定的用途和特性。以下是Three.js中常用的相机类型及其特点:

常见的相机类型

PerspectiveCamera(透视相机):

模拟人类眼睛的视角,具有透视效果,远处的物体显得较小。
常用于3D场景中,以提供更真实的视觉体验。
构造函数参数:PerspectiveCamera(fov, aspect, near, far)
fov(视野):垂直视野角度,以度为单位。
aspect(纵横比):通常是画布的宽高比。
near(近剪切面):摄像机到近剪切面的距离。
far(远剪切面):摄像机到远剪切面的距离。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

OrthographicCamera(正交相机):

不具有透视效果,平行投影,远处的物体不会显得较小。
常用于2D场景或需要精确测量的场景。
构造函数参数:OrthographicCamera(left, right, top, bottom, near, far)
left、right、top、bottom:定义视景体的边界。
near(近剪切面):摄像机到近剪切面的距离。
far(远剪切面):摄像机到远剪切面的距离。

const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(-aspect * 5, aspect * 5, 5, -5, 0.1, 1000);
camera.position.set(0, 0, 5);

相机的基本操作

设置位置:

使用 position 属性设置相机的位置。

camera.position.set(x, y, z);

看向目标:

使用 lookAt 方法设置相机的朝向。

camera.lookAt(new THREE.Vector3(0, 0, 0));

更新投影矩阵:

在修改相机参数后,调用 updateProjectionMatrix 方法更新相机的投影矩阵。

camera.updateProjectionMatrix();

创建一个简单的Three.js场景并使用透视相机

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

// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

// 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格对象并添加到场景中
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

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

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

animate();

;