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

Three.js 入门实战：安装、基础概念与第一个场景⭐

news 来源：原创 2025/9/18 9:09:33

学习本章节你不必要追求细节，你只需要了解基本的3D场景需要哪些元素组成，如何通过组成3D场景的元素属性调整来控制3D物体或者场景即可。

在上一篇文章中我们初识了 Three.js，今天我们正式进入实战环节 🎯

前置准备：

✅ 你需要能够科学上网

本文将带你完成以下目标：

✅ 安装 Three.js
✅ 理解 Three.js 的核心构成元素
✅ 创建一个包含多个物体、光照和交互控制的 3D 场景

让我们开启这趟 Web 3D 的动手之旅 🚀

🧱 Three.js 的基础构成

Three.js 的世界由几个关键部分构成，它们共同构成了一个完整的 3D 场景系统。

1️⃣ Scene（场景）

Scene 就是你的 3D 世界舞台，所有内容都必须添加进场景才能渲染出来。

const scene = new THREE.Scene();

2️⃣ Camera（相机）

Camera 决定了你从哪个角度、位置观察这个 3D 世界。

Three.js 支持多种相机，最常用的是透视相机 PerspectiveCamera，它模拟了人眼的透视感：

const camera = new THREE.PerspectiveCamera(75,                      // 视野角度（FOV）window.innerWidth / window.innerHeight, // 宽高比0.1,                     // 最近可见距离1000                     // 最远可见距离
);
camera.position.z = 5; // 往后移动相机，才能看到物体

3️⃣ Renderer（渲染器）

Renderer 将场景和相机生成的画面真正“画”到网页上。

const renderer = new THREE.WebGLRenderer({ antialias: true }); // 抗锯齿更平滑
renderer.setSize(window.innerWidth, window.innerHeight); // 设置画布大小
document.body.appendChild(renderer.domElement); // 添加到页面

4️⃣ Mesh（网格） = 几何体 + 材质

Mesh 是场景中的物体，由几何体 + 材质组成。

const geometry = new THREE.BoxGeometry(); // 立方体几何体
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 }); // 带光照的材质
const cube = new THREE.Mesh(geometry, material); // 网格对象
scene.add(cube); // 添加到场景中

5️⃣ Light（光源）

光源决定了你看到的物体亮不亮、怎么亮。

const light = new THREE.PointLight(0xffffff, 1); // 白色点光源，强度为1
light.position.set(1, 1, 1); // 放在场景右上角
scene.add(light);

常用光源有：

AmbientLight：环境光，照亮所有物体
PointLight：点光源，从一点向外发射
DirectionalLight：平行光，如太阳光

6️⃣ Controls（交互控制器）

Controls 允许用户用鼠标交互：旋转、缩放、移动视角。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

🧪 实战一：CDN 快速体验方式（零依赖，适合初学者）

演示地址：https://stackblitz.com/edit/stackblitz-starters-qktmohfp?file=script.js💻

three-cdn

🧪 实战二：使用 Vite + npm 安装 three（三方依赖方式）

演示地址：https://stackblitz.com/edit/vitejs-vite-uxm1c3tr?file=index.html💻
✅ 增加鼠标控制
✅ 增加窗口大小自适应

three-vite

📌 总结

🎉 到这里，你已经掌握了创建 Three.js 场景的基本流程：

设置 Scene / Camera / Renderer
添加 Mesh / Light / Controls
实现响应式和用户交互

这也是所有 Three.js 项目的基本框架，掌握它你就迈出第一步啦！

🔮 下一篇预告：Three.js + React = 更强的魔法 ✨

下一节我们将：

使用 react-three-fiber 快速重构上述场景
体验将 Three.js 融入 React 组件系统

为我们即将开发的个人主页 3D 场景打下基础 💼🌌

Three.js 入门实战：安装、基础概念与第一个场景⭐

学习本章节你不必要追求细节，你只需要了解基本的3D场景需要哪些元素组成，如何通过组成3D场景的元素属性调整来控制3D物体或者场景即可。在上一篇文章中我们初识了 Three.js，今天我们正式进入实战环节 🎯 前置准备： …...

编程日记 2025/9/18 9:09:33

【QT】QT的消息盒子和对话框（自定义对话框）

QT的消息盒子和对话框（自定义对话框） 一、消息盒子QMessageBox1、弹出警告盒子示例代码：现象： 2、致命错误盒子示例代码：现象： 3、帮助盒子示例代码：现象： 4、示例代码： …...

编程日记 2025/9/18 9:06:24

QT面试题：内存管理与对象生命周期

题目： 在Qt中，当一个父对象被销毁时，其子对象是否会被自动释放？请结合Qt的内存管理机制说明原因，并解释在什么情况下可能导致内存泄漏。如何避免这类问题？ 参考答案父子对象的内存管理机制 …...

编程日记 2025/9/10 15:20:25

linux查询inode使用率

在 Linux 中，inode 用于存储文件和目录的元数据（如权限、所有者、时间戳等）。当文件系统的 inode 被耗尽时，即使磁盘空间充足，系统也会提示 No space left on device。以下是查询 inode 使用率的详细方法： …...

编程日记 2025/9/18 9:04:56

算法基础—二分算法

目录一、⼆分查找例题 1 牛可乐和魔法封印 2 A-B 数对 3 烦恼的高考志愿二、⼆分答案 1 木材加⼯ 2 砍树 3 跳石头⼆分算法的原理以及模板其实是很简单的，主要的难点在于问题中的各种各样的细节问题。因此，⼤多数情况下，只是背会…...

编程日记 2025/9/18 9:03:11

2024年第十五届蓝桥杯CC++大学A组--成绩统计

2024年第十五届蓝桥杯C&C大学A组--成绩统计题目： 动态规划， 对于该题，考虑动态规划解法，先取前k个人的成绩计算其方差，并将成绩记录在数组中，记录当前均值，设小蓝已检查前i-1个人的成绩&…...

编程日记 2025/9/13 7:17:56

家居实用品：生活中的艺术，家的温馨源泉‌

在快节奏的现代生活中，家居实用品不仅是日常所需的工具，更是营造温馨家居氛围、提升生活品质的关键元素。它们以其独特的魅力，默默地融入我们的日常生活，成为连接物质世界与精神世界的桥梁。走进家门，首先映入眼帘的或…...

编程日记 2025/9/11 17:21:27

TCP重传率高与传输延迟问题

目录标题排查步骤：TCP重传率高与传输延迟问题v1.0通过 rate(node_netstat_Tcp_RetransSegs[3m]) 排查 TCP 重传问题的步骤1. **指标含义与初步分析**2. **关联指标排查**3. **定位具体问题源**4. **解决方案**5. **验证与监控** v2.0一、基础检查二、网络层分析三、…...

编程日记 2025/9/15 3:06:02

超越简单检索：探索知识图谱与大型语言模型的协同进化之路

摘要: 大型语言模型（LLM）在自然语言处理领域取得了革命性进展，但其在事实准确性、复杂推理和可解释性方面仍面临挑战，“幻觉”现象是其固有局限性的体现。知识图谱（KG）作为结构化人类知识的载体&#xff0c…...

编程日记 2025/9/15 4:46:45

汽车的四大工艺

文章目录冲压工艺核心流程关键技术焊接工艺核心流程涂装工艺核心流程总装工艺核心流程终检与测试静态检查动态检查四轮定位制动转鼓测试淋雨测试总结简单总结下汽车的四大工艺（从网上找了一张图，感觉挺全面的）。冲压工艺将金属板材通过…...

编程日记 2025/9/14 21:02:47

研发效能实践：技术评审会生存指南

文章目录 🚨‌开篇暴击：为什么你的评审会像「菜鸡互啄」？‌⚙️‌第一章：Google Design Sprint——5天把争议变成共识‌📅 ‌Day 1-5 实操手册‌‌Map the Problem（画地图）‌‌Sketch Solutions…...

编程日记 2025/9/15 0:12:15

js 拷贝

在 JavaScript 中，拷贝对象和数组时需要特别注意，因为对象和数组是引用类型，直接赋值只会复制引用，而不是实际的数据。以下是几种常见的拷贝方法及其应用场景： 1. 浅拷贝（Shallow Copy） 浅拷贝…...

编程日记 2025/8/30 18:23:06

AI比人脑更强，因为被植入思维模型【51】效率思维模型

giszz的理解：效率实际没有用，过分的追求效率，也是当下社会的弊病。但是效率思维，让我们能够用一个最简单的模型，去平衡投入和产出的最佳比例。过高的效率，会导致过大的压力，合适是最好的。一、…...

编程日记 2025/9/9 19:33:32

Spark RDD相关概念

Spark运行架构与核心组件 1.Spark运行梁构 spark运行架构包括master和slave两个主要部分。master负责管理整个集群的作业任务调度，而slave则负责实际执行任务。 dirver是Spark驱动器节点，负责执行Spark任务中的main方法，将用户程序转换成作业…...

编程日记 2025/9/12 21:56:02

每日一题（小白）数组娱乐篇21

由于题意可知我们是要将对应的数字转换为英文，我们要考虑两点一个是进制的转换，也就是类似于我们的十进制一到9就多一位，这里的进制就是Z进制也就是27进制一旦到26下一位则进位；另一方面要考虑数字的转换也就是1~26对应A~Z。解决上…...

编程日记 2025/9/7 1:26:44

LLM 的model.generate() 参数说明

LLM 的model.generate() 参数说明目录 LLM 的model.generate() 参数说明生成长度控制参数采样策略参数重复惩罚参数束搜索参数其他参数model.generate() 方法是 Hugging Face Transformers 库中用于文本生成的核心方法，它有众多参数可用于控制生成过程生成长度控制参数 min…...

编程日记 2025/9/13 1:25:36

每日一题——AB10 反转链表

ListNode* prev NULL;while(head) {ListNode* next head->next; // 先记住下一个节点head->next prev; // 把当前节点指向前一个prev head; // 前一个节点变成当前节点head next; // 当前节点移动到下一个}return prev; // …...

编程日记 2025/9/15 7:59:13

大模型备案语料安全要求解析

根据大模型备案法规要求及实践经验，我整理除了以下涉及到语料安全相关环节的要求，供大家参考，如果有大模型备案和算法备案的更多疑问，也可以和我沟通交流。一、关键词库规模与覆盖范围 1.基础规模企业需建立拦截关键词库&…...

编程日记 2025/9/11 18:28:33

【Ansible自动化运维】二、Playbook 深入探究：构建复杂自动化流程

在 Ansible 自动化运维体系中，Playbook 是极为关键的部分。它允许我们以一种结构化、可重复的方式定义和执行一系列复杂的任务，从而构建高效的自动化流程。本篇文章将深入探究 Ansible Playbook 的各个方面，助您掌握构建复杂自动化…...

编程日记 2025/9/14 16:00:57

unity 保存场景功能可以保存运行时候地形变化和动态生成得物体，点击加载进来后可以继续上次退出时得场景

直接上代码了 using System; using System.Collections.Generic; using System.IO; using UnityEngine; using UnityEngine.UI;[System.Serializable] public class TerrainSaveData {public int heightmapResolution;public float terrainWidth;public float terrainLength;p…...

编程日记 2025/9/8 1:30:31

光谱相机的关键技术参数

光谱相机的关键技术参数直接影响其数据获取能力和应用场景适配性。以下是核心参数的详细解析，涵盖光谱性能、空间性能、硬件性能及环境适应性： 一、光谱性能参数‌ ‌1. 光谱范围（Spectral Range）‌ ‌定义‌：相机可…...

编程日记 2025/9/3 9:01:21

Linux系统管理与编程12: FTP服务配置

(本实验在CentOS7/8上完成，OpenEuler上暂时未实现) 兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。 1 实验目标 1)理解FTP服务器原理 2) 掌握FTP服务器的配置文件 3)具备安装部署VSFTP的能力 4) 具备FTP的故障排除能…...

编程日记 2025/9/15 14:59:51

乐观锁与悲观锁的使用场景

悲观锁的应用场景悲观锁的基本思想是假设并发冲突会发生，因此在操作数据时会先锁定数据，直到完成操作并提交事务后才释放锁。这种方式适用于写操作较多、并发冲突可能性较高的场景。高写入比例的数据库操作：如果系统中有很多写操作&#x…...

编程日记 2025/9/14 18:54:56

金融级隐私安全之DeepSeek R1 模型去中心化存储和推理实现方案

目录 DeepSeek R1 进入去中心化存储网络意味着什么？它是如何工作的？ Atoma、Walrus和 Sui Atoma Network 已成功将 DeepSeek R1 670B 参数推理模型上传到 Walrus 去中心化存储网络。这标志着这种规模的模型首次在去中心化存储层上可用，确保无需依赖中心化基础设施即可实…...

编程日记 2025/9/17 9:59:55

基于django大数据平台的交通数据可视化设计与实现(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，基于大数据平台的交通数据可视化系统当然不能排除在外。基于大数据平台的交通数据可视化系统是在实际应用和软件工程的开发原理之上&#…...

编程日记 2025/9/10 1:28:03

STM32 vs ESP32：如何选择最适合你的单片机？

引言在嵌入式开发中，STM32 和 ESP32 是两种最热门的微控制器方案。但许多开发者面对项目选型时仍会感到困惑：到底是选择功能强大的 STM32，还是集成无线的 ESP32？ 本文将通过硬件资源、开发场景、成本分析等多维度对比&#xf…...

编程日记 2025/8/17 23:43:40

柳宗元经典的10首唐诗

1、最孤独的诗：《江雪》江雪千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。这首诗被誉为“唐诗五绝最佳”之作。富于理想的“永贞革新”失败后，柳宗元被贬永州，母亲也在半年后离世。年届三十，政…...

编程日记 2025/9/9 7:19:24

Windows11介绍（中英文版）

一、Windows 11 的发布背景与发展历程 Windows 11 是微软公司推出的一款重要的操作系统，它是 Windows 操作系统系列的最新版本之一。微软在操作系统领域拥有悠久的历史和丰富的经验，从早期的 Windows 95 开启了图形化操作系统的新时代，到 Wi…...

编程日记 2025/9/16 7:43:56

使用 VSCode 本地历史记录‌恢复误删除文件

vsCode未知操作意外删除项目根目录入口代码文件使用vsCode多年， 第一次遇见这种情况， 只是下载了几个插件， 可能打开的窗口太多， 有几个代码版本比对的页面， 在没有察觉的时候， 意外删除了项目根目…...

编程日记 2025/9/5 0:25:39

前端面试宝典---数据类型

基本数据类型对于基本类型在创建时无需使用 new 关键字 Bigint在实际开发不常用，如果对于精度要求高可以使用第三方库，如decimal.js 基本数据类型介绍 undefined：当变量被声明但未赋值，或者函数没有返回值时，就会呈现…...

编程日记 2025/9/15 3:36:16

Dinky 和 Flink CDC 在实时整库同步的探索之路

摘要：本文整理自 Dinky 社区负责人，Apache Flink CDC contributor 亓文凯老师在 Flink Forward Asia 2024 数据集成（二）专场中的分享。主要讲述 Dinky 的整库同步技术方案演变至 Flink CDC Yaml 作业的探索历程，并深入…...

编程日记 2025/9/10 17:23:35

【Proteus仿真】【32单片机-A008】MPX4115压力检测系统设计

目录一、主要功能二、使用步骤三、硬件资源四、软件设计五、实验现象联系作者一、主要功能 1、压力检测与LCD显示 2、超过上限，降压模块启动 3、压力检测范围15kpa-115kpa 4、压力阈值设置 5、超限报警二、使用步骤系统运行后，LCD160…...

编程日记 2025/9/14 6:41:11

银河麒麟系统虚拟机网络ping不通的解决方法

问题描述：使用NAT模式搭建了银河麒麟系统虚拟主机，虚拟机内部可以联网，可以查询到具体的ip地址，同时也可以在虚拟机内部ping同宿主机ip，但使用宿主机却无法ping同银河麒麟虚拟机ip，使用ssh、ftp、sftp等工具…...

编程日记 2025/9/15 1:09:47

spark数据清洗案例：流量统计

一、项目背景在互联网时代，流量数据是反映用户行为和业务状况的重要指标。通过对流量数据进行准确统计和分析，企业可以了解用户的访问习惯、业务的热门程度等，从而为决策提供有力支持。然而，原始的流量数据往往存在格式不规范、…...

编程日记 2025/9/11 21:16:23

关于AIGC stable diffusion 在图像超分上的算法整理

参考文档： c论文阅读基于Stable Diffusion的图像超分 - 知乎十分钟读懂Stable Diffusion运行原理 - 知乎 1.difussion model 扩散模型的基本原理 diffusion model 扩散模型是一类生成模型的统称，基于扩散过程生成数据。这类模型的核心是通过逐步加噪…...

编程日记 2025/9/11 3:03:43

Stable Diffusion ComfyUI 基础教程（一） ComfyUI安装与常用插件

前言： 相信大家玩 Stable Diffusion（以下简称SD）都是用的 web UI 操作界面吧，不知道有没有小伙伴听说过 ComfyUI。ComfyUI 是一个基于节点流程的 Stable Diffusion 操作界面，可以通过流程，实现了更加精准…...

编程日记 2025/9/11 9:28:58

[leetcode]差分算法

一.差分算法性质 1.1计算差分数组： b[i] a[i] - a[i - 1] 1.2差分数组的性质 1.2.1对差分数组的每一项作前缀和，可以得到原来的数组 ai a1∑j1i−1dj 1.2.2将差分数组的某一项加i,那么其后面的所有项都会相对于原数组加i 让2~4项加3 这个第三…...

编程日记 2025/9/11 10:35:50

大数据技术之SPARK

Spark Core 什么是 RDD 代码中是一个抽象类，它代表一个弹性的、不可变、可分区、里面的元素可并行计算的集合弹性存储的弹性：内存与磁盘的自动切换； 容错的弹性：数据丢失可以自动恢复； 计算的弹性：…...

编程日记 2025/9/12 6:52:15

S32K144的m_data_2地址不够存,重新在LD文件中配置地址区域

在开发平台软件的时候代码中超出了64K的内存，单纯在ld文件中，增加m_data_2的存储长度，原先是0x00007000,我将长度修改为0x00008000,起始地址还是0x20000000,软件编译没有报错堆栈超出，但是软件下载到单片机中之后，144不…...

编程日记 2025/9/8 5:01:47

Spyder、PyCharm、VS Code 和 Jupyter Notebook 对比分析

在进行 Python 编程时，Spyder、PyCharm、VS Code 和 Jupyter Notebook 是最常用的几款开发工具（IDE/编辑器）。以下是它们在不同维度下的对比分析 🔧 一、基础介绍软件类型主要特点Spyder科学计算IDE类似 MATLAB，集成…...

编程日记 2025/9/16 13:51:24

vue3腾讯云直播前端拉流（前端页面展示直播）

1、引入文件，在index.html <link href"https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.min.css" rel"stylesheet" /><script src"https://tcsdk.com/player/tcplayer/release/v5.3.2/t…...

编程日记 2025/9/11 0:38:54

应急物资仓库管理系统|基于GAV仓库管理的应用

基于AGV应用的应急物资管理系统(智物资DW-S300)建设的目标是实现应急物资管理的信息化、智能化、规范化,保证应急物资的安全性和使用时的高效性，做到应急物资可追踪、可溯源。构建一个应急物资仓储管理系统实现包括系统基本信息管理、入库管理、出库管理、筹措管理…...

编程日记 2025/9/5 11:50:19

ArkTS语言入门之接口、泛型、空安全、特殊运算符等

前言臭宝们，今天我们来学习ArkTS中最后的一些内容。实现接口包含implements子句的类必须实现列出的接口中定义的所有方法，但使用默认实现定义的方法除外。 interface DateInterface {now(): string; } class MyDate implements DateInterface {no…...

编程日记 2025/9/5 21:45:47

蓝桥杯c++每日刷题（洛谷）

目录 P10385 [蓝桥杯 2024 省 A] 艺术与篮球 - 洛谷 (luogu.com.cn) P8706 [蓝桥杯 2020 省 AB1] 解码 - 洛谷 (luogu.com.cn) P8711 [蓝桥杯 2020 省 B1] 整除序列 - 洛谷 (luogu.com.cn) P8722 [蓝桥杯 2020 省 AB3] 日期识别 - 洛谷 (luogu.com.cn) P10385 [蓝桥杯 2024…...

编程日记 2025/9/15 3:36:18

Python+Requests 企业级接口测试入门（1~3天）

PythonRequests 企业级接口测试入门 1、GET接口简单案例我的答案： import time import requestsdef get_all_users():try:response requests.get(urlhttps://reqres.in/api/users, #接口地址timeout10 #超时时间)respons…...

编程日记 2025/9/16 4:54:50