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

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

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

PyTorch 笔记

简介与安装 PyTorch 是一个开源的 Python 机器学习库&#xff0c;基于 Torch 库&#xff0c;底层由C实现&#xff0c;应用于人工智能领域&#xff0c;如计算机视觉和自然语言处理。 PyTorch 最初由 Meta Platforms 的人工智能研究团队开发&#xff0c;现在属 于Linux 基金会的…...

day24学习Pandas库

文章目录 三、Pandas库4.函数计算3遍历3.1.遍历Series对象3.2.遍历DataFrame对象 4排序4.1 sort_index4.2 sort_values 5.去重drop_duplicates6.先分组在计算6.1 groupby6.2 filter过滤 7.合并未完待续.. 三、Pandas库 4.函数计算 3遍历 3.1.遍历Series对象 在讲解Series部…...

AI日报 - 2025年4月8日

AI日报 - 2025年4月8日 &#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; 模型进展 | Llama 4发布引爆讨论 (性能、应用、部署、训练争议)&#xff0c;OpenAI保持高速迭代&#xff0c;香港大学推Dream 7B扩散模型。 Meta Llama 4 Scout & Maveric…...

Linux学习笔记(2) 命令基础:从概念到实践(期末,期中复习笔记全)

前言 一、认识命令行与命令 二、Linux 命令的基础格式 三、命令示例解析 &#xff08;1&#xff09;ls -l /home/itheima &#xff08;2&#xff09;cp -r test1 test2 四结语 前言 在 Linux 系统的世界里&#xff0c;命令行是与系统交互的重要方式。熟练掌握 Linux 命令…...

langgraph简单Demo4(checkpoint检查点)

在 langgraph 里&#xff0c;检查点&#xff08;checkpoint&#xff09;是一项重要的功能&#xff0c;它能够记录工作流在执行过程中的中间状态。当工作流因某些原因中断时&#xff0c;可以从检查点恢复继续执行&#xff0c;避免从头开始&#xff0c;提升效率。 示例&#xff…...

【题解】AtCoder AT_abc400_c 2^a b^2

题目大意 我们定义满足下面条件的整数 X X X 为“好整数”&#xff1a; 存在一个 正整数 对 ( a , b ) (a,b) (a,b) 使得 X 2 a ⋅ b 2 X2^a\cdot b^2 X2a⋅b2。 给定一个正整数 N N N&#xff08; 1 ≤ N ≤ 1 0 18 1\le N\le 10^{18} 1≤N≤1018&#xff09;&#xff…...

七种驱动器综合对比——《器件手册--驱动器》

目录 九、驱动器 概述 定义 功能 分类 1. 按负载类型分类 2. 按功能特性分类 工作原理 优势 应用领域 详尽阐述 1 隔离式栅极驱动器 定义 工作原理 应用场景 优势 2 变压器驱动器 定义 工作原理 应用场景 优势 设计注意事项 3 LED驱动 定义 功能与作用 应用场景 设计…...

GStreamer开发笔记(一):GStreamer介绍,在windows平台部署安装,打开usb摄像头对比测试

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://blog.csdn.net/qq21497936/article/details/147049923 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、O…...

西湖大学团队开源SaProt等多款蛋白质语言模型,覆盖结构功能预测/跨模态信息搜索/氨基酸序列设计等

2025 年 3 月 22—23 日&#xff0c;上海交通大学「AI 蛋白质设计峰会」正式举行。 本次峰会汇聚了来自清华大学、北京大学、复旦大学、浙江大学、厦门大学等知名高校的 300 多位专家学者&#xff0c;以及 200 余位行业领军企业代表和技术研发人员&#xff0c;深入探讨了 AI 在…...

ansible+docker+docker-compose快速部署4节点高可用minio集群

目录 github项目地址 示例服务器列表 安装前 修改变量文件group_vars/all.yml 修改ansible主机清单 修改setup.sh安装脚本 用法演示 安装后验证 github项目地址 https://github.com/sulibao/ansible_minio_cluster.git 示例服务器列表 安装前 修改变量文件group_var…...

说话人分离中的聚类方法:深入解析Agglomerative聚类、KMeans聚类和Oracle聚类

说话人分离&#xff08;Speaker Diarization&#xff09;是将音频流根据说话人身份划分为同质片段的过程。这一过程中的关键步骤是聚类&#xff0c;即将说话人嵌入&#xff08;embeddings&#xff09;分组为不同的簇&#xff0c;每个簇代表一个独特的说话人。在pyannote.audio管…...

蓝桥杯真题——前缀总分、遗迹

蓝桥杯2024年第十五届省赛真题-前缀总分 题目描述 给定 n 个由小写英文字母组成的字符串 s1, s2, , sn &#xff0c;定义前缀总分为V ∑i<j P(si, sj) &#xff0c;其中 P(si, sj) 表示 si, sj 的最长公共前缀的长度。 小蓝可以选择其中一个字符串&#xff0c;并修改其…...

性能比拼: MySQL vs PostgreSQL

本内容是对知名性能评测博主 Anton Putra MySQL vs PostgreSQL Performance Benchmark (Latency - Throughput - Saturation) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 MySQL vs PostgreSQL 数据库性能对比** 在本内容中&#xff0c;我们将对比 MySQL 和 Pos…...

TypeScript 中的 infer 关键字用途

infer 是 TypeScript 中的高级类型关键字&#xff0c;主要用于条件类型中推断类型。它允许我们在条件类型的 extends 子句中声明一个类型变量&#xff0c;然后在该条件类型的 true 分支中使用这个推断出的类型。 1. 基本语法 type SomeType<T> T extends infer U ? U…...

关于Spring MVC中@RequestParam注解的详细说明,用于在前后端参数名称不一致时实现参数映射。包含代码示例和总结表格

以下是关于Spring MVC中RequestParam注解的详细说明&#xff0c;用于在前后端参数名称不一致时实现参数映射。包含代码示例和总结表格&#xff1a; 1. 核心作用 RequestParam用于显式绑定HTTP请求参数到方法参数&#xff0c;支持以下场景&#xff1a; 参数名不一致&#xff1…...

Spring Boot中Spring MVC相关配置的详细描述及表格总结

以下是Spring Boot中Spring MVC相关配置的详细描述及表格总结&#xff1a; Spring MVC 配置项详解 1. 异步请求配置 spring.mvc.async.request-timeout 描述&#xff1a;设置异步请求的超时时间&#xff08;单位&#xff1a;毫秒&#xff09;。默认值&#xff1a;未设置&…...

Shell脚本编程之正则表达式

一、概念 在 Shell 脚本中&#xff0c;正则表达式是一种强大且常用的文本处理工具&#xff0c;它可以用来匹配、搜索、替换和截取字符串。 正则表达式是由一些字符去描述规则&#xff0c;在正则表达式中有两类字符 (1)元字符(Meta Character)&#xff1a;Shell 环境中具有特殊含…...

spring-ai-openai调用Xinference1.4.1报错

1、Xinference 报错logs 此处是调用 /v1/chat/completions 接口 2025-04-06 15:48:51 xinference | return await dependant.call(**values) 2025-04-06 15:48:51 xinference | File "/usr/local/lib/python3.10/dist-packages/xinference/api/restful_api.py", …...

XC7K160T-2FFG676I Kintex‑7系列 Xilinx 赛灵思 FPGA 详细技术规格

XC7K160T-1FFG676I XC7K160T-1FFG676C XC7K160T-2FFG676C 1. 基本概述 XC7K160T-2FFG676I 属于 Xilinx Kintex‑7 系列 FPGA&#xff0c;该系列芯片采用 28nm &#xff08;HKMG&#xff09;工艺制造&#xff0c;旨在提供高性能与低功耗的平衡。该芯片主要面向对高速数据处理、…...

C++学习之udp通信

1.UDP特点 c /* udp 传输层协议, 和tcp是一样的 特点: 面向无连接的, 不安全的, 报式传输协议 1. 无连接: udp通信的时候不需要connect 1). 通信不需要建立连接 2). 如果想给对方发送数据, 只需要指定对方的IP和端口 2. udp会丢包 1). 数…...

2020年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2020年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛(China Undergraduate Mathematical Contest in Modeling)是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动,目的在于激励学生学习数学的积极性,提高学…...

【数据标准】数据标准化实施流程与方法-保障机制篇

导读&#xff1a;1、数据标准化保障机制&#xff08;组织架构、协作流程&#xff09;是​​战略落地的基石​​&#xff0c;确保责权分明与资源协同&#xff1b;2、数据标准化制度建设&#xff08;政策、标准、工具&#xff09;构建了​​统一治理框架​​&#xff0c;规范数据…...

ZLMediaKit部署与配置

ZLMediaKit编译 # 安装编译器 sudo apt install build-essential cmake# 其它依赖库 sudo apt-get install libssl-dev libsdl-dev libavcodec-dev libavutil-dev ffmpeg git cd /usr/local/srcgit clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit.git cd ZLMediaKit# …...

38、web前端开发之Vue3保姆教程(二)

三、Vue3语法详解 1、组件 1 什么是组件? 组件是 Vue.js 中最重要的概念之一。它是一种可复用的 Vue 实例,允许我们将 UI 拆分为独立的、可复用的部分。组件可以提高代码的组织性和可维护性。 2 创建组件 在 Vue 3 中,组件通常使用单文件组件(SFC)编写,其包含三个主…...

知识中台如何重构企业信息生态?关键要素解析

在信息化快速发展的时代&#xff0c;企业面临着如何高效整合和管理知识资源的挑战。知识中台作为企业信息管理的核心工具&#xff0c;正在帮助企业提升运营效率和创新力。本文将探讨知识中台如何重构企业信息生态&#xff0c;并解析其关键要素。 一、什么是知识中台&#xff1f…...

蓝桥杯python组备赛(记录个人模板)

文章目录 栈队列堆递归装饰器并查集树状数组线段树最近公共祖先LCAST表字典树KMPmanacher跳表(代替C STL的set)dijkstra总结 栈 用list代替 队列 用deque双端队列替代 堆 用heapq 递归装饰器 众所周知&#xff0c;python的递归深度只有1000&#xff0c;根本满足不了大部…...

C++的多态 - 下

目录 多态的原理 虚函数表 1.计算包含虚函数类的大小 2.虚函数表介绍 多态底层原理 1.父类引用调用 2.父类指针调用 3.动态绑定与静态绑定 单继承和多继承关系的虚函数表 函数指针 1.函数指针变量 (1)函数指针变量创建 (2)函数指针变量的使用 (3)两段有趣的代码 …...

XSS(跨站脚本攻击)

什么是 XSS 攻击&#xff1f; XSS 攻击&#xff08;Cross-Site Scripting&#xff09;是一种常见的网络攻击手段&#xff0c;攻击者通过在网站上注入恶意的 JavaScript 代码&#xff0c;让网站在用户的浏览器中执行这些恶意代码&#xff0c;进而达到 窃取信息、篡改网页内容 或…...

LLM Agents的历史、现状与未来趋势

引言 大型语言模型&#xff08;Large Language Model, LLM&#xff09;近年在人工智能领域掀起革命&#xff0c;它们具备了出色的语言理解与生成能力。然而&#xff0c;单纯的LLM更像是被动的“回答者”&#xff0c;只能根据输入给出回复。为了让LLM真正“行动”起来&#xff…...

最简rnn_lstm模型python源码

1.源码 GitCode - 全球开发者的开源社区,开源代码托管平台 不到120行代码&#xff0c;参考了《深度学习与交通大数据实战》3.2节。注意这本书只能在京东等在线商城网购&#xff0c;才能拿到相应的数据集和源码。我的是在当地新华书店买的——买清华出版社&#xff0c;记得这个…...

基于Android的图书借阅和占座系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 基于Android的图书借阅和占座系统设计的目的是为用户提供图书信息、图书馆、图书资讯等内容&#xff0c;用户可以进行图书借阅、预约选座等操作。 与PC端应用程序相比&#xff0c;图书借阅和占座系统的设计主要面向于广大用户&#xff0c;旨在为用户提供一个图书借阅及占…...

vue3+element-plus动态与静态表格数据渲染

一、表格组件&#xff1a; <template> <el-table ref"myTable" :data"tableData" :header-cell-style"headerCellStyle" header-row-class-name"my-table-header" cell-class-name"my-td-cell" :row-style"r…...

数据库50个练习

数据表介绍 --1.学生表 Student(SId,Sname,Sage,Ssex) --SId 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Course(CId,Cname,TId) --CId 课程编号,Cname 课程名称,TId 教师编号 --3.教师表 Teacher(TId,Tname) --TId 教师编号,Tname 教师姓名 --4.成绩…...

Open CASCADE学习|读取点集拟合样条曲线(续)

问题 上一篇文章已经实现了样条曲线拟合&#xff0c;但是仍存在问题&#xff0c;Tolerance过大拟合成直线了&#xff0c;Tolerance过大头尾波浪形。 正确改进方案 1️⃣ 核心参数优化 通过调整以下参数控制曲线平滑度&#xff1a; Standard_Integer DegMin 3; // 最低阶…...

HTML基础教程:创建双十一购物狂欢节网页

页面概况&#xff1a; 在这篇技术博客中&#xff0c;我将详细讲解如何使用HTML基础标签创建一个简单而美观的双十一购物狂欢节主题网页。我们将逐步分析代码结构&#xff0c;了解每个HTML元素的作用&#xff0c;以及如何通过HTML属性控制页面布局和样式。 页面整体结构 首先&…...

ES6 新增特性 箭头函数

简述&#xff1a; ECMAScript 6&#xff08;简称ES6&#xff09;是于2015年6月正式发布的JavaScript语言的标准&#xff0c;正式名为ECMAScript 2015&#xff08;ES2015&#xff09;。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为企业级开发语…...

【C++算法】49.分治_归并_计算右侧小于当前元素的个数

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a;图解 题目链接&#xff1a; 315. 计算右侧小于当前元素的个数 题目描述&#xff1a; 解法 归并排序&#xff08;分治&#xff09; 当前元素的后面&#xff0c;有多少个比我小。&#xff08;降序&…...

Multi-class N-pair Loss论文理解

一、N-pair loss 对比 Triplet loss 对于N-pair loss来说&#xff0c;当N2时&#xff0c;与triplet loss是很相似的。对anchor-positive pair&#xff0c;都只有一个negative sample。而且&#xff0c;N-pair loss&#xff08;N2时&#xff09;为triplet loss的平滑近似Softpl…...

uniapp微信小程序地图marker自定义气泡 customCallout偶尔显示不全解决办法

这个天坑问题&#xff0c;在微信开发工具上是不会显示出来的,只有在真机上才会偶尔出现随机样式偏移/裁剪/宽长偏移&#xff0c;询问社区也只是让你提交代码片段&#xff0c;并无解决办法。 一开始我怀疑是地图组件加载出现了问题&#xff0c;于是给地图加了一个v-if"reL…...

蓝桥杯嵌入式总结

1.lcd显示和led引脚冲突 在lcd使用到的函数中加入两行代码 uint16_t temp GPIOC->ODR; GPIOC->ODR temp; 2.关于PA15,PB4pwm波输入捕获 首先pwm输入捕获中断 使用 HAL_TIM_IC_Start_IT(&htim2,TIM_CHANNEL_1); 再在输入捕获中断回调函数中使用 void HAL…...

C#的反射机制

C#反射机制详解 什么是反射&#xff1f; 反射(Reflection)是C#中的一项强大功能&#xff0c;它允许程序在运行时动态获取类型信息、访问和操作对象成员。简单来说&#xff0c;反射使程序可以在不预先知道类型的情况下&#xff0c;查看、使用和修改程序集中的代码。 常见反射…...

Java并发编程高频面试题

一、基础概念 1. 并行与并发的区别&#xff1f; 并行&#xff1a;多个任务在多个CPU核心上同时执行&#xff08;物理上同时&#xff09;。并发&#xff1a;多个任务在单CPU核心上交替执行&#xff08;逻辑上同时&#xff09;。类比&#xff1a;并行是多个窗口同时服务&#x…...

Invalid bound statement (not found)

前言&#xff1a; 通过实践而发现真理&#xff0c;又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识&#xff0c;又从理性认识而能动地指导革命实践&#xff0c;改造主观世界和客观世界。实践、认识、再实践、再认识&#xff0c;这种形式&#xff0c;循环往…...

【Vue-路由】学习笔记

目录 <<回到导览路由1.单页应用和多页面2.路由基本使用2.1.路由的含义2.2.VueRouter插件2.3.配置路由规则和导航2.4.组件目录存放2.5.路由模块封装 3.rounter3.1.router-link实现高亮3.2.自定义匹配类名3.3.声明式导航3.3.1.查询参数传参3.3.2.动态路由传参3.3.3.总结 3.…...

前端服务配置详解:从入门到实战

前端服务配置详解&#xff1a;从入门到实战 一、环境配置文件&#xff08;.env&#xff09; 1.1 基础结构 在项目根目录创建 .env 文件&#xff1a; # 开发环境 VUE_APP_API_BASE_URL http://localhost:3000/api VUE_APP_VERSION 1.0.0# 生产环境&#xff08;.env.produc…...

Java安全管理器 - SecurityManager

什么是Java安全管理器&#xff1f; Java安全管理器是Java提供的保护JVM和程序安全的机制&#xff0c;它能限制用户的代码对文件、内存、资源、网络的操作和访问&#xff0c;防止恶意代码入侵程序。常用来控制用户提交的代码对各种资源的访问权限&#xff0c;防止用户恶意提交代…...

Arrays操作工具 Lambda表达式 集合 迭代器 数据结构 泛型 set集合 list集合

Arrays操作工具 自己定义的排序规则 简单理解如果是&#xff1a;o1 - o2 升序排列 o2 - o1 降序排列 Lambda表达式 函数式编程 函数式编程&#xff08;Functional programming&#xff09;是一种思想特点。 面向对象&#xff1a;先去找对象&#xff0c;让对象做事情。。函数式…...

ORM、Mybatis和Hibernate、Mybatis使用教程、parameterType、resultType、级联查询案例、resultMap映射

DAY21.1 Java核心基础 ORM Object Relationship Mapping 对象关系映射 面向对象的程序到—关系型数据库的映射 比如java – MySQL的映射 ORM框架就是实现这个映射的框架 Hibernate、Mybatis、MybatisPlus、Spring Data JPA、Spring JDBC Spring Data JPA的底层就是Hiber…...

《Java八股文の文艺复兴》第十一篇:量子永生架构——对象池的混沌边缘(终极试炼·完全体)

Tags: - Java高并发 - 量子架构 - 混沌工程 - 赛博修真 - 三体防御 目录&#xff1a; 卷首语&#xff1a;蝴蝶振翅引发的量子海啸 第一章&#xff1a;混沌初开——对象池的量子涅槃&#xff08;深度扩展&#xff09; 第二章&#xff1a;混沌计算——对象复活的降维打击&…...