当前位置：首页 > news >正文

three.js场景三元素

news 2025/6/27 13:40:12

three.js是一个基于WebGL的轻量级、易于使用的3D库。它极大地简化了WebGL的复杂细节，降低了学习成本，同时提高了性能。

three.js的三大核心元素：

场景（Scene）
- 场景是一个三维空间，是所有物品的容器。可以将其想象成一个空房间，里面可以放置要呈现的物体、相机、光源等。
- 使用方法：通过new THREE.Scene()来创建一个新的场景。

/**1. 创建场景  -- 放置物体对象的环境*/
const scene = new THREE.Scene();

相机（Camera）
相机用来确定观察位置、方向、角度。相机看到的内容，就是最终在屏幕上看到的内容。
three.js中常用的相机类型包括：
透视投影相机（PerspectiveCamera）：模拟人眼看到的效果，近大远小。通过指定视野（Field of View，FOV）、长宽比、近端渲染距离和远端距离来创建。
例如：new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

/** 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)*/
const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 长宽比0.1, // 进截面1000 // 远截面
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera); // 将相机添加到场景中

在这里插入图片描述

使用THREE.PerspectiveCamera构造函数创建一个新的透视相机实例。
75：视野角度（Field of View，简称FOV），表示相机“看到”的角度范围。这里设置为75度。
window.innerWidth / window.innerHeight：相机的纵横比（Aspect Ratio），通常设置为窗口的宽度与高度的比值，以确保渲染的图像不会拉伸或压缩。
0.1：近裁剪面（Near Clipping Plane），表示相机能够“看到”的最近距离。小于这个距离的物体将不会被渲染。
1000：远裁剪面（Far Clipping Plane），表示相机能够“看到”的最远距离。大于这个距离的物体将不会被渲染。
使用camera.position.set()方法设置相机的位置。这里的坐标是(0, 0, 10)，意味着相机位于世界坐标的原点上方10个单位的位置（在Z轴上）。在3D空间中，这通常意味着相机是“俯视”场景的。
正交投影相机（OrthographicCamera）：远近都是一样的大小，三维空间中平行的线，投影到二维空间也一定是平行的。
在程序运行过程中，可以调整相机的位置、方向、角度。

// 假设你已经有一个场景（scene）对象  // 创建正交相机  
const camera = new THREE.OrthographicCamera(  left, // 相机左平面  right, // 相机右平面  top, // 相机上平面  bottom, // 相机下平面  near, // 近裁剪面  far // 远裁剪面  
);  // 设定相机位置（对于正交相机来说，这不是必需的，但通常你需要设置它以获得期望的视角）  
camera.position.set(0, 0, 10);  // 将相机添加到场景中（注意：相机通常不直接添加到场景中，而是由渲染器使用）  
// 但在这里，如果你只是为了存储它或做其他操作，你可以这样做  
// scene.add(camera); // （这通常是不必要的）

为了设置正交相机的参数，你需要定义六个值：

left：相机左平面与视图的左边界的距离。
right：相机右平面与视图的右边界的距离。
top：相机上平面与视图的上边界的距离。
bottom：相机下平面与视图的下边界的距离。
near：近裁剪面，相机能够“看到”的最近距离。
far：远裁剪面，相机能够“看到”的最远距离。
在实际使用中，你可能需要根据你的场景大小和所需的视图范围来计算这些值。例如，如果你想要一个与窗口宽度和高度匹配的正交视图，你可以这样设置：

const aspectRatio = window.innerWidth / window.innerHeight;  
const width = 10; // 假设你想要的视图宽度为10个单位  
const height = width / aspectRatio; // 计算视图高度以保持相同的宽高比  const camera = new THREE.OrthographicCamera(  -width / 2, // left  width / 2, // right  height / 2, // top  -height / 2, // bottom  1, // near  1000 // far  
);

在这里插入图片描述

渲染器（Renderer）
- 渲染器是用来通过相机把画面渲染到屏幕上的组件。
- 使用方法：创建一个WebGL渲染器实例，设置渲染的尺寸大小，然后将渲染器的canvas内容添加到HTML文档的body中。
- 例如：使用new THREE.WebGLRenderer()来创建一个WebGL渲染器，并通过renderer.setSize(width, height)设置渲染尺寸，最后使用document.body.appendChild(renderer.domElement)将渲染的canvas添加到页面中。
  以下是如何创建一个THREE.WebGLRenderer并将其添加到HTML文档中的基本步骤：
  1.创建渲染器实例：
  使用new THREE.WebGLRenderer()来创建一个新的WebGL渲染器实例。
  2.设置渲染器尺寸：
  使用renderer.setSize(width, height)方法来设置渲染器的宽度和高度。这通常与HTML元素的尺寸相匹配，例如元素。
  3.将渲染器的DOM元素添加到HTML文档中：
  渲染器会创建一个canvas元素，你可以通过renderer.domElement访问它。将这个canvas元素添加到HTML文档的某个位置，通常是body元素内。
  4.渲染场景：
  使用renderer.render(scene, camera)方法来渲染场景。这个方法需要两个参数：场景（Scene）和相机（Camera）。它会将相机视角下的场景内容渲染到渲染器的canvas元素上。
  下面是一个简单的示例代码：

// 假设你已经有了场景（scene）和相机（camera）// 1. 创建渲染器实例
const renderer = new THREE.WebGLRenderer();// 2. 设置渲染器尺寸（通常与canvas元素或窗口大小匹配）
renderer.setSize(window.innerWidth, window.innerHeight);// 3. 将渲染器的DOM元素添加到HTML文档中
document.body.appendChild(renderer.domElement);// 4. 渲染场景
renderer.render(scene, camera);// 注意：你可能还需要一个动画循环来持续更新和渲染场景
function animate() {requestAnimationFrame(animate); // 请求下一个动画帧// 更新场景中的物体（如果需要）// ...// 渲染场景renderer.render(scene, camera);
}
animate();// 另外，你可能还需要处理窗口大小变化事件来更新渲染器尺寸
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机纵横比（如果需要）camera.updateProjectionMatrix(); // 更新投影矩阵renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器尺寸
}