ThreeJS快速入门指南

最新推荐文章于 2025-05-06 16:11:32 发布

诸葛亮的芭蕉扇

最新推荐文章于 2025-05-06 16:11:32 发布

阅读量2.5k

点赞数 25

文章标签：前端

本文链接：https://blog.youkuaiyun.com/dfc_dfc/article/details/135758409

版权

本文介绍了Three.js库的基础使用，包括环境搭建、重要概念（如场景、物体、相机、渲染器等）、第一个3D场景的创建、坐标系统、动画、光照、阴影和纹理的添加。通过一步步的实例，读者可以掌握如何在网页上构建3D体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Three.js 介绍

Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。

Three.js的开发环境搭建

创建目录并使用 npm init -y 初始化 package.json
使用 npm install --save-dev parcel 安装 Web 应用打包工具 parcel
这一步不是必须的，可以使用其他打包工具例如 webpack 等
在目录中新建 src/index.html 和 src/script.js 两个文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js入门</title>
  </head>
  <body>
    <script src="./script.js" type="module"></script>
  </body>
</html>

script.js文件中会使用到import模块化语法，所以引入文件需要加上type=“module”

在 package.json 中加入 "start": "parcel src/index.html" 脚本
使用 npm install three 引入 Three.js
在 src/script.js 文件中验证 Three.js 是否引入成功

import * as THREE from "three";
console.log(THREE);

Three.js的一些重要概念

开发一个Three.js的场景，需要如下一些元素：

scene 场景

场景像一个容器（container），可以将物体(模型，粒子，光源，相机等)加入其中。

objects 物体

物体可以有很多种，比如原始的几何体，导入的模型，粒子，光源等。

camera 相机

理论上的视角，虽然相机也被加入了场景中，但是相机是看不见的

renderer 渲染器

从相机的角度渲染场景，结果将被绘制到 canvas 中

透视相机

Three.js最常使用的是透视相机，它是模拟人的观察视角：物体近大远小。透视相机有四个构造参数

constructor(fov?: number, aspect?: number, near?: number, far?: number);

在这里插入图片描述

视野(The field of view)
宽高比(Aspect) 纵横比需要设置为画布的宽度除以其高度，否则会造成场景中物体变形
近平面距离(Near) 比近平面距离近的物体将不会被渲染，也就是说不能被看见
远平面距离(Far) 比远平面距离远的物体将不会被渲染，也不能被看见

Three.js的第一个场景

我们了解了基本的概念后，可以开始写代码了。

// 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
const renderer = new THREE.WebGLRenderer({

最低0.47元/天解锁文章