three.js学习（二十六）——相机

前端

2024-02-11 04:02:35

three学习（二十六）——相机
three.js的基本概念

大家好，欢迎来到three.js教程的第二十六课。在前面的课程中，我们学习了three.js的基础知识，包括场景、灯光、材质和几何体。本节课，我们将学习three.js中的相机对象。

相机对象

相机对象是three.js中用来模拟真实世界中相机的对象。它负责将3D场景投影到2D平面上，以便我们在屏幕上看到它。three.js中提供了多种类型的相机对象，每种相机都有不同的特性和用途。

透视相机

透视相机是最常用的相机类型。它模拟真实世界中的相机，具有透视投影的效果。透视相机可以创建具有深度感和透视感的场景。

正交相机

正交相机与透视相机不同，它不会产生透视投影的效果。正交相机常用于创建2D场景或具有俯视图效果的3D场景。

创建相机对象

要创建相机对象，可以使用PerspectiveCamera或OrthographicCamera类。PerspectiveCamera类的构造函数接受三个参数：视野角、纵横比和近裁剪面和远裁剪面。OrthographicCamera类的构造函数接受四个参数：左、右、上、下和近裁剪面和远裁剪面。

设置相机属性

相机对象创建后，我们可以通过设置其属性来控制相机的行为。这些属性包括：

视野角：控制相机的视野范围。
纵横比：控制相机的宽高比。
近裁剪面：控制相机能看到的最近距离。
远裁剪面：控制相机能看到的最远距离。
位置：控制相机的坐标位置。
旋转：控制相机的旋转角度。

使用相机对象

相机对象创建并设置属性后，就可以将其添加到场景中。要将相机添加到场景中，可以使用scene.add()方法。将相机添加到场景后，就可以使用camera.lookAt()方法来控制相机看向的位置。

示例

下面是一个使用透视相机创建简单场景的示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var 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();