Three.js 场景创建基础

原创

Front_Yue

发布于 2025-03-12 21:15:58

1.9K0

文章被收录于专栏：码艺坊码艺坊

前言

在当今数字化的时代，Web 开发已经不再局限于传统的二维界面。随着技术的不断进步，越来越多的开发者开始探索将 3D 图形引入到网页中，为用户带来更加沉浸式和交互性的体验。而 Three.js 作为一款广受欢迎的 JavaScript 3D 库，为开发者提供了强大而便捷的工具，使得在网页上创建和展示复杂的 3D 场景变得不再困难。本文将深入探讨 Three.js 场景创建的基础知识，包括其简介、引入方式，以及场景构建的关键要素。

一、Three.js 简介与引入

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它封装了 WebGL 底层复杂的 API，为开发者提供了简洁、易用的接口来创建和展示各种 3D 图形和场景。通过 Three.js，我们可以在浏览器中轻松实现诸如复杂的 3D 模型、逼真的光照效果、流畅的动画以及丰富的交互功能等。

在引入 Three.js 时，我们有两种常见的方式。一种是通过 CDN（内容分发网络），这无需我们手动下载库文件，直接在 HTML 文件的 <head> 或 <body> 部分添加如下代码即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

另一种方式是将 Three.js 库文件下载到本地项目中，然后在 HTML 文件中引用本地文件的路径，例如：

<script src="path/to/three.min.js"></script>

这种本地引入方式在一些特殊场景下，如开发环境或需要自定义库版本时非常有用。

二、创建基础场景

在 Three.js 中，场景（Scene）、相机（Camera）和渲染器（Renderer）是构建 3D 场景的三大基石。

场景（Scene）

场景是所有 3D 对象的容器，就像是一个舞台，在这个舞台上我们将放置各种物体。创建一个场景非常简单，只需要使用 Three.js 提供的 Scene 构造函数即可：

const scene = new THREE.Scene();

相机（Camera）

相机决定了我们在场景中观察的角度和范围。Three.js 中有多种相机类型，其中最常用的是透视相机（PerspectiveCamera）。它模拟了人眼观察世界的方式，使得远处的物体看起来更小，从而产生深度感。

创建一个透视相机需要指定视锥体的参数，包括近裁剪平面（near）、远裁剪平面（far）、视野（fov，即视角）和宽高比（aspect）。例如：

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

这里，75 表示视野角度，window.innerWidth / window.innerHeight 是宽高比，0.1 是近裁剪平面，1000 是远裁剪平面。相机的位置可以通过设置其 position 属性来调整：

camera.position.z = 5;

渲染器（Renderer）

渲染器负责将场景和相机的视图转换为屏幕上的像素。WebGLRenderer 是 Three.js 中最常用的渲染器，它利用了 WebGL 的强大能力来实现高效的 3D 渲染。

我们可以通过以下方式创建一个渲染器，并将其添加到 HTML 页面中：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

这里，setSize 方法用于设置渲染器的输出尺寸，使其与浏览器窗口的大小相匹配。renderer.domElement 是渲染器的输出元素，它是一个 <canvas> 元素，我们将其添加到文档的 <body> 中，以便在网页上显示渲染结果。

最后，要实现场景的渲染，我们需要在渲染循环中调用渲染器的 render 方法：

function animate() {
  requestAnimationFrame(animate);
  // 在这里可以更新场景中的物体、相机等
  renderer.render(scene, camera);
}

animate();

三、添加基本几何体

Three.js 提供了丰富的几何体类型，用于创建各种形状的 3D 物体。其中一些基本几何体包括立方体（BoxGeometry）、球体（SphereGeometry）、圆柱体（CylinderGeometry）等。

以创建一个立方体为例，我们需要先创建几何体对象：

const geometry = new THREE.BoxGeometry(1, 1, 1);

这里，三个参数分别表示立方体的宽度、高度和深度。

然后，为几何体添加材质（Material），材质决定了物体的外观，如颜色、纹理等。一个简单的材料可以通过 MeshBasicMaterial 来创建：

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

这里，我们创建了一个红色的基础材料。

最后，将几何体和材质组合成一个网格（Mesh），并将其添加到场景中：

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

现在，一个红色的立方体就出现在场景中了。

除了立方体，创建其他基本几何体的步骤大致相同，只需更换相应的几何体类型和参数即可。例如，创建一个球体：

const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

四、光照效果的设置

光照在 3D 场景中起着至关重要的作用，它可以使物体呈现出更加真实和立体的效果。Three.js 支持多种类型的光源，如点光源（PointLight）、平行光（DirectionalLight）、聚光灯（SpotLight）等。

点光源

点光源类似于灯泡，向四周散发光线，强度随着距离的增加而衰减。创建一个点光源的示例：

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

这里，第一个参数是光源的颜色，第二个参数是强度，第三个参数是距离。

平行光

平行光的光线是平行的，就像太阳光一样，照射在场景中的物体上会产生阴影。创建一个平行光：

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

注意，为了使平行光的方向有意义，需要对位置向量进行归一化处理。

聚光灯

聚光灯像手电筒一样，光线集中在一个特定的方向和范围内。创建一个聚光灯：

const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(5, 10, 5);
scene.add(spotLight);

此外，还可以调整聚光灯的角度、强度、距离等参数，以实现不同的光照效果。

不同的光源对场景中的物体产生不同的光照效果，合理组合和调整光源可以使 3D 场景更加生动逼真。

五、交互功能的实现

为了让用户能够与 3D 场景进行交互，我们可以在场景中添加事件监听器来处理用户的输入，如鼠标点击、移动等操作。

以实现一个简单的鼠标点击交互为例，当用户点击场景中的物体时，改变物体的颜色。首先，我们需要检测鼠标点击在屏幕上的位置，然后将其转换为场景中的三维坐标。

可以通过监听 click 事件获取鼠标点击的屏幕坐标：

window.addEventListener('click', (event) => {
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

接下来，使用相机的 raycaster 来创建一条从相机位置出发，经过鼠标点击位置的射线：

  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);

然后，使用 raycaster 来检测射线与场景中的物体是否相交：

  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    const clickedObject = intersects[0].object;
    clickedObject.material.color.set(0x0000ff); // 改变颜色
  }
});

通过这种方式，我们可以实现丰富的交互功能，增强用户与 3D 场景的互动体验。

总结

通过本文对 Three.js 场景创建基础的详细介绍，我们了解到 Three.js 为我们在网页上创建和展示复杂的 3D 场景提供了强大的工具。

欢迎大家在留言区分享自己在 Three.js 开发中的经验和成果，让我们共同交流和学习！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

three.js