ThreeJS 学习笔记——简介

最新推荐文章于 2025-05-27 17:11:53 发布

转载最新推荐文章于 2025-05-27 17:11:53 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c0f33725188252bf829e8b1

文章标签：

#前端 #javascript #ViewUI

本文详细介绍了Three.js，一个基于WebGL的3D渲染库，适用于前端开发。它提供了多种渲染器，包括Canvas2D、SVG、CSS3D和WebGL，并附带了大量的示例代码和详细的文档，适合初学者快速上手。

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

一、前言

Three.js (github) 是一个纯 JavaScript 实现的 3D 渲染库，其在前端 3D 渲染的地位不言而喻，看其在 github 上的 start 4.6 k，fork 1.7 k 这个量级便知道了。准确来说 ThreeJs 是一个基于 WebGL 的封装，而 WebGL 就是前端界的 OpenGL。

二、Github 首页解读

1.简介

该项目的目的是创建一个易于使用，轻量级的3D库。该库提供Canvas 2D，SVG，CSS3D和WebGL渲染器。 Examples: 真的是史上见过最全的例程，良心良心啊，不过没有文档说明，也没有注释。捂脸.jpg Document: 文档也是非常的齐全了，同样是良心作品。其他链接有兴趣的可以自己去探求一下。

2.使用

首先在自己的页面中安装或者以模块的方式进行导入，再或者自己可以进行源码编译并导入。

<script src="js/three.min.js"></script>
复制代码

下面是github首页给的一个小例子，有兴趣的可以拿来运行一下，改改里面的参数，感受一下 3D 的世界。

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {
        // 创建一个相机
	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;
       // 创建场景
	scene = new THREE.Scene();
       // 创建一个3D Box 几何体
	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();
        // 创建 mesh 并添加到场景中
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );
        // 创建一个 WebGLRenderer 并加入到上下文中
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}
复制代码

不想自己敲代码的，也可以看看 github 中提供的 jsfiddle 中绘制出来的效果。

除了 GitHub 首页，其还提供了一个官网 threejs.org/，官网提供了 document 入口，源码下载地址或者直接下载，同时也有许多非常炫丽的产品展示。尤其亮瞎我钛金眼的法拉第FF，真是吃了好大一个鲸 —— ff 91 vr

三、源码基本结构

1.本地调试源码

(1) npm install 安装依赖
(2) npm run dev 在本地起一个服务

成功后，如下会在本机开启一个 8080 端口，然后你就可以愉快的在本机体验所有的 demo 效果了。

控制台输出

[HTTP] Starting up http-server, serving ./
[HTTP] Available on:
[HTTP]   http://127.0.0.1:8080
[HTTP]   http://192.168.31.175:8080
[HTTP] Hit CTRL-C to stop the server

复制代码

2.基本结构

浏览器输出上面的 http 地址，如 http://127.0.0.1:8080，注意必须要用 http/https 协议，否则例程里面的模型是不能下载的，即，不支持 ftp。

然后再来看一下 src 里面都有哪一些模块

模块名	说明
animation	动画模块
audio	音频
cameras	3D 相机
extras	其他
geometrics	基础几何对象
helpers	帮助类
lights	光源
loaders	3D 模型加载器
materials	材质
textures	纹理
objects	用于加入到场景中的对象
renderers	WebGL渲染，glsl 定义
scenes	场景
core	属性，几何，3D对象，光线跟踪等
math	向量，矩阵等