返回

three.js 的点滴世界！使用 three.js 轻松实现 3D 图形及动效

前端

三维世界的画布：three.js 入门指南

什么是 three.js？

三维图形在网络世界中越来越普遍，three.js 正是实现这一目标的强大工具。它是一个跨浏览器的 JavaScript 库，专门用于在网页中创建、渲染和动画三维图像。利用 WebGL 技术，three.js 可直接在浏览器端实现渲染和展示效果，无需借助额外的插件。

three.js 原理

WebGL 是一种 JavaScript API，允许开发人员直接使用 GPU 进行渲染。three.js 利用了这一特性，将三维图像直接渲染到浏览器中，带来高度交互性和逼真的视觉体验。

动手实践：创建你的第一个 three.js 场景

1. 添加 three.js 库

在你的 HTML 页面中添加以下代码以加载 three.js 库：

<script src="three.js"></script>

2. 创建场景对象

场景对象负责保存所有要显示的三维物体。

const scene = new THREE.Scene();

3. 创建渲染器对象

渲染器对象负责将场景渲染到画布上。

const renderer = new THREE.WebGLRenderer();

4. 创建相机对象

相机对象定义观看场景的角度和位置。

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

5. 创建三维物体

three.js 提供了多种方式创建三维物体。最简单的方法是使用几何体对象，例如：

const geometry = new THREE.SphereGeometry(5, 32, 32);

6. 创建材质对象

材质对象定义了三维物体的表面特性，例如：

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

7. 创建三维物体对象

将几何体对象和材质对象组合起来创建一个三维物体对象：

const sphere = new THREE.Mesh(geometry, material);

8. 将三维物体添加到场景

将你创建的三维物体添加到场景中：

scene.add(sphere);

9. 渲染场景

将场景渲染到画布上：

renderer.render(scene, camera);

10. 添加画布元素

在 HTML 文档中添加一个画布元素：

<canvas id="three-js-canvas"></canvas>

11. 初始化画布

获取画布元素并设置它的宽高：

const canvas = document.getElementById('three-js-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

12. 关联渲染器和画布

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

13. 动画渲染

在每一帧中调用渲染方法，保持场景的实时更新：

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

常见问题解答

  1. 我需要学习哪些编程语言才能使用 three.js？
    答：你需要熟练掌握 JavaScript。

  2. three.js 可以创建哪些类型的三维对象？
    答：你可以创建各种三维对象，包括几何体、模型和粒子系统。

  3. three.js 是否适用于所有浏览器？
    答：three.js 兼容所有支持 WebGL 的现代浏览器。

  4. 如何控制三维物体在场景中的位置和旋转？
    答：你可以使用 transform 属性（例如 position、rotation 和 scale）来控制三维物体的变换。

  5. 如何为我的 three.js 场景添加灯光？
    答：three.js 提供了多种类型的灯光，例如点光源、聚光灯和环境光。