Three.js 快速入门教程【一】开启你的 3D Web 开发之旅

系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
文章目录
- 系列文章目录
- 一、Three.js 是什么
- 二、Three.js 应用场景
- 三、环境搭建(两种方式任选)
- 四、核心概念
- 1. 场景(Scene)
- 2. 相机(Camera)
- 3.几何体(Geometry)
- 4、材质(Material)
- 5. 网格(Mesh)
- 6. 渲染器(Renderer)
- 五、牛刀小试
- 总结
一、Three.js 是什么
Three.js是一个基于WebGL封装的轻量级3D库,它将晦涩难懂的WebGL API封装成易读的JavaScript接口,让开发者无需深入了解 WebGL 的复杂细节,就能用简洁的代码创建出精美的 3D 场景。
二、Three.js 应用场景
1、数据可视化:将枯燥的报表变成旋转的3D图表
2、产品展示:让用户在网页中360°查看产品细节
3、3D网页游戏:开发轻量级的3D小游戏
4、建筑和室内设计:构建虚拟的建筑模型或室内设计方案,用户可以在浏览器中自由查看和导航这些 3D 场景,提前感受设计效果。
5、虚拟现实(VR)和增强现实(AR):与 WebVR 和 WebXR API 集成,用于创建沉浸式的 VR 和 AR 应用,用户可以在浏览器中体验身临其境的虚拟环境或与现实环境叠加的增强现实效果。
三、环境搭建(两种方式任选)
方式一:CDN直连(适合测试或新手)
!-- 在<head>中引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r162/three.min.js"></script></script>
方式二:npm安装(适合项目开发)
npm install three
// 使用时导入
import * as THREE from 'three';
四、核心概念

在Three.js中创建一个最基本的3D场景需要六个核心要素:场景(Scene)、相机(Camera)几何体(Geometry)、材质(Material)、网格(Mesh),最后通过渲染器(WebGLRenderer)将场景和相机的信息渲染到网页中,并通过动画循环实现持续更新,形成动态3D效果。
1. 场景(Scene)
作用:3D 世界的容器,所有物体、光源、相机的载体,所有要在屏幕上显示的元素都需要添加到场景中。
// 创建一个场景
const scene = new THREE.Scene();
//通过scene.add(元素)添加元素
2. 相机(Camera)
作用:决定从哪个角度观察场景中的对象,就像现实世界中摄影师使用的相机一样
相机分为2种类型:透视相机、正交相机
透视相机:模拟人眼的视觉效果,远处的物体看起来比近处的物体小,具有透视效果。
正交相机:物体的大小不会随着距离的变化而改变,常用于 2D 游戏或 UI 设计。
3D开发场景中透视相机用的比较多,入门掌握透视相机即可。
透视相机(PerspectiveCamera)
// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(75, // 视场角(FOV)window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面3000 // 远裁剪面
);//设置相机位置
camera.position.set(100, 100, 100);
3.几何体(Geometry)
作用:定义了 物体的形状,例如长方体、球体、圆柱体等。常用内置几何体:
BoxGeometry(长方体)
SphereGeometry(球体)
CylinderGeometry(圆柱体)
// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个球体
const geometry2 = new THREE.SphereGeometry(10);
//创建一个圆柱体
const geometry = new THREE.CylinderGeometry(10,10,50);
4、材质(Material)
作用:定义物体的外观(颜色、纹理、透明度等)。常用材质:
MeshBasicMaterial(基础材质,不受光影响,始终显示为指定的颜色或纹理。)
MeshPhongMaterial(高光材质,受光影响,面有高光反射效果。)
// 创建一个基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
5. 网格(Mesh)
几何体 + 材质 = 网格
网格是几何体和材质的组合,它将几何体的形状和材质的外观结合起来,形成一个完整的 3D 对象(物体)。创建网格后,需要将其添加到场景中才能显示。
// 创建立方体(宽,高,深)
const geometry = new THREE.BoxGeometry(1, 1, 1);// 基础材质(可配置颜色、贴图等)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建网格对象
const mesh= new THREE.Mesh(geometry, material);
scene.add(mesh);
6. 渲染器(Renderer)
渲染器负责将场景和相机的信息转化为屏幕上的图像。它使用 WebGL 或 Canvas 等技术在网页上绘制 3D 图形。Three.js 提供了多种渲染器,最常用的是 WebGL 渲染器(THREE.WebGLRenderer)。
// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);
五、牛刀小试
通过上面的介绍我们了解了three.js核心概念和基本的使用方式,下面用代码来演示一个简单的3d案例——实现一个正方体3D效果
代码示例:
import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";//创建场景
const scene = new THREE.Scene();
//设置黑色背景色
scene.background = new THREE.Color(0x000000);//创建一个正方体
const geometry = new THREE.BoxGeometry(10, 10, 10);
//创建一个基础材质,颜色指定红色
const material = new THREE.MeshBasicMaterial({ color: "red" });//创建一个网格对象
const mesh = new THREE.Mesh(geometry, material);
//设置网格对象位置
mesh.position.set(0, 0, 0);
//添加到场景中
scene.add(mesh);//创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
//设置相机位置
camera.position.set(0, 10, 30);
//相机默认看向网格对象
camera.lookAt(mesh.position);//创建渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器尺寸为页面宽高
renderer.setSize(document.documentElement.clientWidth,document.documentElement.clientHeight
);
//将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);// 新建一个相机控件
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼(惯性效果)
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 动画循环
function animate() {// 定时刷新requestAnimationFrame(animate);// 更新控制器,必须调用以应用阻尼效果controls.update();//重新渲染renderer.render(scene, camera);
}
// 执行动画
animate();
运行效果:

说明:上述示例中我们引入了OrbitControls控制器 ,OrbitControls 是一个用于实现交互式场景相机控制的工具库。它允许用户通过鼠标(或触摸屏)直接操作 3D 场景的观察视角,如同在轨道上环绕目标物体一般,常用于提升 Web 3D 应用的交互体验。代码结尾通过requestAnimationFrame递归形式循环调用animate函数,达到页面持续刷新效果。在 Three.js 开发中,几乎所有的动态场景(如旋转模型、交互操作、自动动画)都需要通过 requestAnimationFrame 驱动持续渲染。
总结
通过本篇教程,我们认识了什么是Three.js和Three.js应用场景,共同探索了Three.js的核心概念与基础用法。从构建场景(Scene)、相机(Camera)到渲染器(Renderer)的"铁三角"架构,再到几何体(Geometry)、材质(Material)与网格(Mesh)的有机结合,至此你已经了解并掌握了创建最基础三维场景的核心工具链。
更多three.js入门知识点请关注该系列教程后续的更新。
相关文章:
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
系列文章目录 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…...
Windows 图形显示驱动开发-CPU 内存调节和64KB 页面支持
对于 32 位 OS 离散图形处理单元 (GPU) 不支持可调整大小的 BAR,或者当调整帧缓冲区 BAR 的大小失败时,Windows 显示驱动程序模型 (WDDM) v2 将提供一种替代机制,通过该机制可以有效地访问离散 GPU VRAM。 对于支持可编程 BAR 地址空间的 GPU…...
PLC通信交互系统技术分享
目录 0、前言 1、模块划分 2、状态机 3、通信层增强 4、异常处理机制 5、核心代码 关键状态处理示例 6、部署与测试方案 1. 环境要求 2. 性能测试指标 0、前言 这是一个C程序,用于与西门子PLC进行通信,处理SN码、拍照信号、检测结果等流程。代码…...
ceph HEALTH_WARN clock skew detected on mon.f, mon.o, mon.p, mon.q
问题 ceph health detail[WRN] MON_CLOCK_SKEW: clock skew detected on mon.f, mon.o, mon.p, mon.qmon.f clock skew 0.243128s > max 0.05s (latency 0.000836159s)mon.o clock skew 16.249s > max 0.05s (latency 0<...
Git命令行入门
诸神缄默不语-个人CSDN博文目录 之前写过一篇VSCode Git的博文:VSCode上的Git使用手记(持续更新ing…) 现在随着开发经历增加,感觉用到命令行之类复杂功能的机会越来越多了,所以我专门再写一篇Git命令行的文章。 G…...
pdf-extract-kit paddle paddleocr pdf2markdown.py(效果不佳)
GitHub - opendatalab/PDF-Extract-Kit: A Comprehensive Toolkit for High-Quality PDF Content Extraction https://github.com/opendatalab/PDF-Extract-Kit pdf2markdown.py 运行遇到的问题: 错误: -------------------------------------- C Tra…...
Android 10.0 移除wifi功能及相关菜单
介绍 客户的机器没有wifi功能,所以需要删除wifi相关的菜单,主要有设置-网络和互联网-WLAN,长按桌面设置弹出的WALN快捷方式,长按桌面-微件-设置-WLAN。 修改 Android10 上直接将config_show_wifi_settings改为false,这样wifi菜单的入口就隐…...
什么是Dubbo?Dubbo框架知识点,面试题总结
本篇包含什么是Dubbo,Dubbo的实现原理,节点角色说明,调用关系说明,在实际开发的场景中应该如何选择RPC框架,Dubbo的核心架构,Dubbo的整体架构设计及分层。 主页还有其他的面试资料,有需要的可以…...
Django+Vue3全栈开发实战:从零搭建博客系统
文章目录 1. 开发环境准备2. 创建Django项目与配置3. 设计数据模型与API4. 使用DRF创建RESTful API5. 创建Vue3项目与配置6. 前端页面开发与组件设计7. 前后端交互与Axios集成8. 项目优化与调试9. 部署上线10. 总结与扩展10.1 项目总结10.1.1 技术栈回顾10.1.2 项目亮点 10.2 扩…...
双重差分学习笔记
双重差分适用的研究场景: 研究某项政策或者冲击造成的影响 例如,某某小学在2024.12.12日颁布了小红花激励措施,我们要研究这项措施对学生成绩的影响,此时,就可以使用双重差分模型。 双重差分适用的数据类型…...
python组备赛笔记(基础篇)
小数输出 1、代码示例: print(jc,%.3f%fc) 输出格式: 890 86075.959 2、代码示例: print(f%.3f%b) 输出格式: 1.000 金字塔输出 1、代码示例: n 5 t * for i in range(1,n1):print(f{t*(2*i-1):^{2*n-1}}) fo…...
从零开始构建一个小型字符级语言模型的完整详细教程(基于Transformer架构)
最近特别火的DeepSeek,是一个大语言模型,那一个模型是如何构建起来的呢?DeepSeek基于Transformer架构,接下来我们也从零开始构建一个基于Transformer架构的小型语言模型,并说明构建的详细步骤及内部组件说明。我们以构建一个字符级语言模型(Char-Level LM)为例,目标是通…...
XUnity.AutoTranslator-Gemini——调用Google的Gemini API, 实现Unity游戏中日文文本的自动翻译
XunityAutoTranslator-Gemini-API 本项目是一个使用 Flask 框架和 Google Gemini GenAI 模型构建的 Web API 服务,用于将日文unity游戏文本翻译成简体中文。 日文游戏文本AI翻译API (基于Google Gemini) 本项目是一个使用 Flask 框架和 Google Gemini GenAI 模型…...
中文Build a Large Language Model (From Scratch) 免费获取全文
中文pdf下载地址:https://pan.baidu.com/s/1aq2aBcWt9vYagT2-HuxdWA?pwdlshj 提取码:lshj 原文、代码、视频项目地址:https://github.com/rasbt/LLMs-from-scratch 翻译工具:沉浸式翻译(https://app.immersivetrans…...
DeepSeek 助力 Vue 开发:打造丝滑的瀑布流布局(Masonry Layout)
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…...
C++:从拷贝构造函数到深浅拷贝
拷贝构造函数 当实例化一个新对象并使用同类型对其进行初始化时,会显式调用类的拷贝构造函数,拷贝构造函数写法:形参为const修饰的同类型类引用。拷贝构造函数有个需要注意的点,形参为何是只允许传递引用呢?原因在于若…...
Openssl之SM2加解密命令
### 1. 生成 SM2 私钥openssl genpkey -algorithm EC \-pkeyopt ec_paramgen_curve:sm2 \-out sm2_private_key.pem### 2. 从私钥导出 SM2 公钥openssl pkey -in sm2_private_key.pem \-pubout \-out sm2_public_key.pem### 3. 使用 SM2 公钥加密openssl pkeyutl -encrypt \-pu…...
Java集合框架之List接口详解
目录 一、List接口概述 二、List接口常见实现类 三、List接口特有方法: 1.元素操作 2. 查找元素位置 3. 子列表与不可变列表 四、List特有迭代器:ListIterator 1.特有的迭代方式 2.ListIterator接口中的常用方法: ⑴.void add(E e):在光标位置插入元素。(会移动…...
oracle apex post接口
日常记录 使用到了apex_json方式接收 、、、1 首先,接口通过body传递过来,成功接收到, 数据格式为 JSON_OBJECT_T l_json : JSON_OBJECT_T.parse(:body); 这里我用参数接收到 然后 里面是包含了 "data" 我用 继续接收到这个 l…...
【数据挖掘】--算法
【数据挖掘】--算法 目录:1. 缺失值和数值属性处理1缺失值处理: 2. 用于文档分类的朴素贝叶斯3. 分治法:建立决策树4. 覆盖算法建立规则5. 挖掘关联规则6. 线性模型有效寻找最近邻暴力搜索(Brute-Force Search)kd树&am…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)
题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
