Three.js 3D开发零基础入门：渲染器、相机与场景搭建详解

作者：像素猫时间：2026-10-22 08:08:47浏览：406

本文详解Three.js基础配置流程，涵盖渲染器、摄像机、场景、光源及物体的五步搭建法。通过完整代码示例，指导开发者在HTML5 Canvas中实现3D模型绘制，适合WebGL初学者快速上手。

开场白

WebGL技术允许开发者在HTML5的Canvas元素中实现3D图形效果。Three.js作为基于WebGL的框架，因其易用性而广受欢迎。对于希望学习WebGL的开发者而言，直接上手复杂的原生接口难度较大，从Three.js框架入手是更为明智的选择。

作者目前也在深入研习Three.js，发现中文资料相对匮乏，即便是官方API文档也显得较为简略，许多特效需通过编写代码逐步摸索得出。因此，撰写本教程旨在梳理个人学习心得，并与社区同行分享经验。

本文为系列教程的首篇：入门篇。文章将借助一个简单的Demo案例，详细阐述Three.js的基本配置流程。完成本篇学习后，读者将掌握在浏览器环境中绘制3D立体图形的方法。

环境准备与浏览器兼容性

准备工作

在编码前，需下载最新版本的Three.js框架包，并在网页中引入该库。框架包内附带多个示例代码，可供初学者参考学习。

目前Chrome浏览器对WebGL的支持最为完善，Firefox次之。经测试，国内部分浏览器如遨游、猎豹等也能正常运行相关效果。

HTML结构搭建与容器配置

从实例开始入门!

首先构建HTML结构，代码如下：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 div#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <div id="container"></div>
 </body>
</html>

我们需要准备一个与画布尺寸匹配的容器，用于承载WebGL绘制内容。具体操作如下：

在body标签内添加一个id为「canvas3d」的div元素。

在style标签中定义「canvas3d」的CSS样式，设定其宽高及背景色。

值得注意的是，我们无需手动编写<canvas>标签，只需定义好存放Canvas的div容器即可，因为Canvas元素将由Three.js动态生成。

接下来编写JavaScript脚本，我们将通过以下五个步骤构建一个简单的立体模型，这也是Three.js的基本使用流程：

核心五步法：渲染器、相机与场景设置

1.设置three.js渲染器

将三维空间中的物体映射到二维屏幕的过程称为三维渲染。执行该操作的软件模块被称为渲染器。具体处理步骤如下：

(0) 声明全局变量（对象）；

(1) 获取容器「canvas3d」的宽度和高度；

(2) 创建渲染器对象，并开启抗锯齿功能以提升显示效果；

(3) 设置渲染器的宽高，使其与容器尺寸保持一致；

(4) 将生成的【canvas】元素追加到【canvas3d】容器中；

(5) 设置渲染器的清除颜色（clearColor）。


//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}

2.设置摄像机camera

在OpenGL（WebGL）中，将三维物体投影到二维空间主要有透视投影和正交投影两种方式。透视投影模拟人眼视觉，近大远小；正交投影则无视距离，物体大小恒定，常用于建筑和设计领域。Three.js支持这两种相机模式，本文采用透视投影方式，步骤如下：

(0) 声明全局变量（对象）；

(1) 创建透视投影相机；

(2) 设置相机的位置坐标；

(3) 设置相机朝上的方向向量（通常指向上方）；

(4) 设置相机观察的中心点坐标。


　 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }

3.设置场景scene

场景即三维空间。通过[Scene]类实例化一个名为[scene]的对象即可创建场景。


　　//设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }

光源系统与物体模型创建

4.设置光源light

在OpenGL（WebGL）三维空间中，光源类型包括点光源和聚光灯，其中平行光源可视为点光源的特例（光源位于无限远处）。此外，还可设置环境光。Three.js支持[点光源(Point Light)]、[聚光灯(Spot Light)]、[平行光源(Direction Light)]以及[环境光(Ambient Light)]。与OpenGL类似，一个场景中可设置多个光源。通常采用环境光与其他光源组合的方式，若未设置环境光，背光面会因无光照而变得过暗。本文首先设置平行光源，随后追加环境光，步骤如下：

(0) 声明全局变量(对象)

(1) 创建平行光源

(2) 设置光源的位置向量

(3) 将光源添加到场景中

此处使用「DirectionalLight」类实例化一个名为[light]的对象来代表平行光源。


　　　　//设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }

5.设置物体object

在此步骤中，我们声明一个球体模型。


　　　//设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }

最后，编写主函数以执行上述五个步骤：


　　　　　　　　//执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }

运行上述程序后，浏览器窗口中将显示绘制好的球体模型：

Three.js 3D开发零基础入门：渲染器、相机与场景搭建详解

流程总结与完整代码示例

总结

以上为Three.js的入门内容，核心流程包含以下五步：

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

若对上述某些设置尚存疑问，无需担心，后续文章将对这五个主要步骤进行详细解析，敬请期待。

本例完整代码：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量（对象）
 function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
 }
 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
 //设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
 //设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }
 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 div#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload='threeStart();'>
 <!--盛放canvas的容器-->
 <div id="canvas3d"></div>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS库之Three.js 简易入门篇(详解之一)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

作者最新文章

js-cookie 安装与基础用法：set、get、remove 详解

2026-11-05 16:35:06

适合JavaScript初学者的实战项目：制作简易待办事项列表

2026-11-05 16:17:07

JS打开新标签页时怎么通过URL传递参数

2026-11-05 12:21:08

sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧

2026-11-05 09:55:00

JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？

2026-11-05 09:37:58