当前位置：首页 > article >正文

初识 Three.js：开启你的 Web 3D 世界 ✨

article 2026/2/3 0:30:58

3D 技术已经不再是游戏引擎的专属，随着浏览器技术的发展，我们完全可以在网页上实现令人惊艳的 3D 效果。而 Three.js，作为 WebGL 的封装库，让 Web 3D 的大门向更多开发者敞开了。

这是我开启这个 Three.js 专栏的第一篇文章，我们将简单认识一下 Three.js，并为后续的项目开发打下基础。

🔍 什么是 Three.js？

Three.js 是一个 JavaScript 3D 库，它封装了 WebGL，使开发者可以用更简单的方式在浏览器中创建和展示 3D 内容。

通过 Three.js，你可以轻松实现以下效果：

🧱 创建 3D 模型和场景
🖼️ 加载纹理和材质
💡 添加光照、阴影、动画等
🎮 控制摄像机视角、交互行为

适合以下人群：

想让网页更酷的前端开发者
想快速构建可视化场景的可视化工程师
想把 3D 应用到展示中的设计师

✨ 你可以做什么？

以下是 Three.js 常见的使用场景：

🛍️ 产品展示（3D 鞋子、家具、模型旋转等）
📊 数据可视化（地球、地图、图表）
🧑‍💻 个人主页（酷炫背景、交互动画）
🎮 小型 3D 游戏开发

🧰 常用资源推荐

名称	简介	链接
官网	Three.js 官方网站	https://threejs.org
文档	官方 API 文档	https://threejs.org/docs/
示例	各种 Three.js 示例	https://threejs.org/examples/
GitHub	项目源码仓库	https://github.com/mrdoob/three.js
React Three Fiber	React 开发者专用封装	https://docs.pmnd.rs/react-three-fiber
模型/纹理下载	免费素材库	https://sketchfab.com, https://poly.pizza, https://readyplayer.me/
Three.js中文网	其他博主网站	http://www.webgl3d.cn/pages/4a14ce/

🚀 Hello Three.js！

先放一个最简单的示例：创建一个旋转的立方体 👇，你可以在菜鸟教程运行下面示例：在线运行html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello Three.js!</title><style>body { margin: 0; }</style></head><body><script src="https://unpkg.com/three@0.160.1/build/three.min.js"></script><script>// 创建场景const scene = new THREE.Scene();// 创建相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建几何体和材质const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 动画循环function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();</script></body>
</html>

🔮 下一篇预告

接下来我们将手把手写一个更完整的场景，讲解：

如何添加多个物体
如何设置光源与阴影
如何实现用户交互（如鼠标旋转控制）

后续我们还会结合 React 使用 react-three-fiber 构建一个炫酷的个人主页项目 🖥️✨

初识 Three.js：开启你的 Web 3D 世界 ✨

3D 技术已经不再是游戏引擎的专属，随着浏览器技术的发展，我们完全可以在网页上实现令人惊艳的 3D 效果。而 Three.js，作为 WebGL 的封装库，让 Web 3D 的大门向更多开发者敞开了。这是我开启这个 Three.js 专栏的第一篇文章&…...

编程日记 2025/12/5 23:27:42

基于大模型的病态窦房结综合征预测及治疗方案研究报告

目录一、引言 1.1 研究背景与目的 1.2 研究意义二、病态窦房结综合征概述 2.1 定义与病因 2.2 临床表现与分型 2.3 诊断方法三、大模型在病态窦房结综合征预测中的应用 3.1 大模型介绍 3.2 数据收集与预处理 3.3 模型训练与优化四、术前预测与准备 4.1 风险预…...

编程日记 2025/12/17 18:43:57

在 Ubuntu 下通过 Docker 部署 PSQL 服务器的详细技术博客

今天，需要部署一个密码管理器，突然要用到PSQL的服务器，所以就把部署的过程记录下来。鉴于最近囊中羞涩，故此次部署实验使用三丰云的免费服务器配置，配置是为1 核 CPU、1G 内存和 5M 带宽，足够了。以下是…...

编程日记 2025/6/12 22:20:22

【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit(3)

1.问题描述： PC场景，青少年模式系统API不支持吗？ 解决方案： PC场景，青少年模式系统API不支持，另外文档上的几个API也不支持。 2.问题描述： 华为一键登录 Beta7本地运行到手机可以拿到匿名手…...

编程日记 2025/12/1 5:00:53

地图与图层操作

地图文档本质上就是存储在磁盘上的地图，包括地理数据、图名、图例等一系列要素，当完成地图制作、图层要素标注及符号显示设置后，可以将其作为图层文件保存到磁盘中，在一个图层文件中，包括了定义如何在地图上描述地理数…...

编程日记 2025/11/22 16:28:50

starrocks split函数和trino split函数差异性

在trino419和starrocks3.2.8中分别执行下面这两条sql，出来的结果是不一样的 select split(,,,)[1] as t1 select coalesce(split(,,&#...

编程日记 2025/9/10 20:41:32

LeetCode算法题(Go语言实现)_33

题目给定一个二叉树 root ，返回其最大深度。二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数。一、代码实现 func maxDepth(root *TreeNode) int {// 递归法（后序遍历）if root nil {return 0}leftDepth : maxDepth(r…...

编程日记 2026/1/14 19:27:50

go程序启动工具——cobra

以下是将“为什么很多 Go 程序启动都是用 Cobra”的内容转换为 Markdown 格式的文档： 为什么很多 Go 程序启动都是用 Cobra 在 Go 编程生态中，Cobra 是一个非常流行的命令行工具库，许多 Go 程序选择使用它来构建启动逻辑和命令行接口&#…...

编程日记 2025/6/3 10:02:19

Unet网络的Pytorch实现和matlab实现

文章目录一、Unet网络简介1.1 输入图像1.2 编码器部分（Contracting Path）1.3 解码器部分（Expanding Path）1.4 最后一层（输出）1.5 跳跃连接（Skip Connections） 二、Unet网络的Pytorc…...

编程日记 2026/1/24 9:55:09

【合新通信】相控阵雷达RFoF方案的应用

一、相控阵雷达为何需要RFoF？ 核心需求驱动分布式部署：相控阵雷达（AESA/PESA）的T/R模块需分散布局（如舰载雷达阵面、卫星载荷），传统同轴电缆导致重量和损耗剧增。高频段挑战：X/Ku/…...

编程日记 2026/1/24 13:45:10

关于点卷积

🧠 什么是点卷积？ 点卷积（Pointwise Convolution） 是一种特殊类型的卷积操作，其基本特点是卷积核的大小为 1 1 1 \times 1 11。与传统的卷积操作（如 3 3 3 \times 3 33 或 5 5 5 \times 5 55 卷积核…...

编程日记 2025/9/16 10:30:27

原理图输出网表及调入

一、输出网表操作步骤 （1）选中.dsn文件，选者N或进入tools下拉列表选择Creat Netlists （2）导出网表后的文件二、网表的导入 （1）执行菜单命令“File-Import-Logic/netlist”，将原理…...

编程日记 2026/1/24 8:43:25

python基础12 模块/库的引用

在软件的设计中，经常提及到解耦的概念，即模块和模块之间的功能尽可能独立，减少不必要的关联。所以在实际项目中，我们经常会将一个工程拆解成很多不同的功能模块，以实现更优的设计并满足团队开发的要求。有了模块的概…...

编程日记 2025/10/20 3:02:38

TDengine JAVA 语言连接器

简介本节简介 TDengine 最重要且使用最多的连接器, 本节内容是以教科书式方式列出对外提供的接口及功能及使用过程中要注意的技术细节，大家可以收藏起来做为今后开发 TDengine 的参考资料。 taos-jdbcdriver 是 TDengine 的官方 Java 语言连接器，Java…...

编程日记 2026/1/28 12:27:27

【NLP 55、实践 ⑬ LoRA完成NER任务】

目录一、数据文件二、模型配置文件 config.py 三、数据加载文件 loader.py 1.导入文件和类的定义 2.初始化 3.数据加载方法代码运行流程 4.文本编码 / 解码方法　　　 ① encode_sentence()： ② decode()： 代码运行流程 ③ padding()： 代码…...

编程日记 2026/1/24 1:41:05

【蓝桥杯】Python大学A组第十五届省赛

1.填空题 1.1.拼正方形问题描述小蓝正在玩拼图游戏，他有个的方块和个的方块，他需要从中挑出一些来拼出一个正方形。比如用个和个的方块可以拼出一个的正方形；用个的方块可以拼出一个的正方形。请问小蓝能拼成的最大的正方形的边长为多少。 import math # 2*2的个数 a =…...

编程日记 2026/1/29 2:21:26

小球反弹(蓝桥杯C语言)

有一长方形，长为 343720343720 单位长度，宽为 233333233333 单位长度。在其内部左上角顶点有一小球 (无视其体积)，其初速度如图所示且保持运动速率不变，分解到长宽两个方向上的速率之比为 dx:dy15:17dx:dy15:17。小球碰到长方形的…...

编程日记 2026/1/26 11:07:51

Redis底层数据结构？编码与底层数据结构的映射？

Redis底层数据结构一、简单动态字符串（SDS） 结构： struct sdshdr {int len; // 已使用字节长度 int free; // 未使用字节长度 char buf[]; // 字节数组（兼容C字符串） };特点： 二进制安全&#…...

编程日记 2025/11/27 1:26:55

linux环境下的硬盘分区格式化工具介绍 fdisk,gdisk,parted,cfdisk,cgdisk,sfdisk,gparted 笔记250407

linux环境下的硬盘分区格式化工具介绍 fdisk,gdisk,parted,cfdisk,cgdisk,sfdisk,gparted 笔记250407 以下是 Linux 系统中常用的硬盘分区与格式化工具，涵盖命令行和图形界面工具，按功能分类整理： 一、分区管理工具 1. 命令行工具工具功能…...

编程日记 2026/1/14 4:11:53

HarmonyOS-ArkUI Ability进阶系列-UIAbility与各类Context

UIAbility及相关类关系一个模块编译的时候会出一个HAP包， 每一个HAP包在运行时都对应一个AbilityStage。 AbilityStage持有一个AbilityStageContext一个APP， 有时候会有很多个HAP包， 至少一个。一个APP运行时，对应的是我们的App…...

编程日记 2026/1/30 1:45:31

前端入门之CSS

CSS: HTML负责定义页面结构；JS负责处理页面逻辑和点击事件；CSS负责用于描述 HTML 元素的显示方式，通过 CSS 可以控制颜色、字体、布局等。核心语法：选择器：类选择器主要用于选中需要添加样式的 HTML 元素。主要分为：类选择器（.class-name { ... }）、标签选择器（…...

编程日记 2026/2/2 9:26:43

JavaScript逆向WebSocket协议解析与动态数据抓取

在JavaScript逆向工程中，WebSocket协议的解析和动态数据抓取是关键技能。本文将结合Fiddler、Charles Proxy和APIfox工具，详细讲解如何解析WebSocket协议并抓取动态数据。一、WebSocket协议解析 （一）WebSocket协议的基本概念 …...

编程日记 2026/1/25 23:50:18

剑指Offer（数据结构与算法面试题精讲）C++版——day4

剑指Offer（数据结构与算法面试题精讲）C版——day4 题目一：和为k的子数组题目二：0和1个数相同的子数组题目三：左右两边子数组的和相等题目一：和为k的子数组结合前面着重阐述的双指针法这一经典的算法技巧&…...

编程日记 2026/1/30 1:52:41

从代码学习深度学习 - NLP之文本预处理 PyTorch版

文章目录前言1. 文本预处理理论知识1.1 文本清洗与标准化1.2 分词（Tokenization）1.3 词频统计与词汇表构建1.4 序列表示与批次生成1.5 预处理的意义2. 文本预处理的核心代码解析2.1 读取数据集：`read_time_machine`2.2 分词处理：`tokenize`2.3 词频统计：`count_corpus`2.…...

编程日记 2026/1/21 20:33:35

WebRTC技术简介及应用场景

写在前面本文是参考稀土掘金的文章,整理得出,版权归原作者所有!参考链接请点击跳转 WebRTC（Web Real-Time Communication） 是一项开源技术，允许浏览器和移动应用直接进行实时音视频通信和数据传输，无需安装插件或第三方软件。它…...

编程日记 2026/1/27 14:42:38

介绍几种创意登录页（含完整源码）

今天为大家收集了几种不同风格的登录页，搭配动态渐变背景，效果绝对惊艳！ CSS3实现动态渐变玻璃拟态登录页一、开篇语纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页，搭配动态渐变背景，效果绝对惊艳！ …...

编程日记 2026/1/26 14:24:19

git分布式控制工具详解

1. 版本控制器的方式 1.1 集中式版本控制工具特点： 版本库集中存放在中央服务器必须联网才能工作（局域网/互联网）个人修改后提交到中央版本库举例：SVN、CVS 1.2 分布式版本控制工具特点： 无"中央服务器&qu…...

编程日记 2025/11/21 2:17:22

Uni-app入门到精通：uni-app的基础组件

1、view view是容器组件，类似于HTML中的<div></div>标签，用于包裹各种元素内容，是页面布局常用的组件。view组件的属性如下属性类型默认值说明hover-classStringnone指定按下去的样式类。当hover-class"none"时&…...

编程日记 2026/1/26 6:25:53

R语言从专家到小白

文章目录下载安装R下载安装R StudioCRAN 下载安装R Index of /bin https://cran.r-project.org/ 下载安装R Studio https://posit.co/download/rstudio-desktop/ CRAN R综合档案网络。 CRAN 镜像是一个提供 R 语言软件和包的在线服务，用户可以从不同的地区选择…...

编程日记 2025/11/21 4:09:38

显示器工艺简介

华星光电显示器的生产工艺流程介绍，从入厂原料到生产出显示器的整体工艺介绍华星光电显示器的生产工艺流程主要包括以下几个阶段，从原材料入厂到最终显示器的生产： 原材料准备玻璃基板：显示器的核心材料，通常采用超…...

编程日记 2025/12/6 6:28:26

🔍 什么是 Three.js？

✨ 你可以做什么？

🧰 常用资源推荐

🚀 Hello Three.js！

🔮 下一篇预告

相关文章：