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

three.js的学习

news 2026/4/1 21:01:44

Threejs

1 前言

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用，以便大家了解。

参考资料：

官网Demo

官网 api 文档

Three.js入门教程

2 three 核心概念

1.1 场景

3d 世界的容器，可以在容器中，添加 地面、天空、光照、人、动物等等。

1.2 相机

用来拍摄场景中的画面，相机在场景中的位置不同，角度不同，拍摄出来的画面就不一样。

1.3 渲染器

用于将相机拍摄出来的画面，绘制到画布上。

1.4 物体

3D世界是由一个个物体组合而成的。人、车、楼等等都是一个个的物体。

1.5 光线

有了光线你看到的物体才会有各种各样的颜色，并且随着光线的反射与折射产生出更加真实的感觉。

3 安装及使用three

3.1 安装

# three的版本指定好，新版有时更新了api，可能导致之前使用的方法不起作用
npm i three@0.100.0

3.2 使用

  • 在脚手架搭建的项目中使用

    import Three from 'three'

  • 在html 页面中使用

    <script src='./three.js'></script>

4 threejs 初探

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>three-demo</title><script src="./libs/three.min.js"></script><style>html,body {height: 100vh;width: 100vw;padding: 0;margin: 0;border: 0;}#demo {width: 100%;height: 100vh;}</style></head><body><div id="demo"></div><script>const { THREE } = window;const {// 核心三件套Scene, // 场景WebGLRenderer, // 渲染器PerspectiveCamera, // 透视相机BoxGeometry, // 正方体几何体Mesh, // 网格 -- 物体PointLight, // 点光源AmbientLight, // 环境光 } = THREE;// 用于绘制3D图像的domconst renderDom = document.getElementById("demo");const width = renderDom.clientWidth; //窗口宽度const height = renderDom.clientHeight; //窗口高度const k = width / height; //窗口宽高比const s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大// 创建场景const scene = new Scene();// 物体的形状 -- 创建一个立方体几何对象const geometry = new BoxGeometry(100, 100, 100);// 物体材质 -- 铜、铁、颜色const material = new MeshLambertMaterial({color: 0x0000ff,});// 通过几何形状和材质创建出一个 立方体const mesh = new Mesh(geometry, material); //网格模型对象Mesh// 将物体加入到场景中scene.add(mesh); //网格模型添加到场景中// 添加点光源const point = new PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中// 添加环境光const ambient = new AmbientLight(0xfbea94);scene.add(ambient);// 创建相机const camera = new PerspectiveCamera();camera.fov = 35; //  视角度数camera.near = 1; // 设置相机最小拍摄距离camera.far = 1000; // 设置相机最大拍摄距离camera.position.set(350, 290, 220); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)// 创建渲染器const renderer = new WebGLRenderer({precision: "lowp",alpha: true,antialias: true,logarithmicDepthBuffer: true,});renderer.setSize(width, height); // 设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色// 在 demo dom 中插入渲染器renderDom.appendChild(renderer.domElement);// 将相机拍摄到的画面渲染出来renderer.render(scene, camera);</script></body>
</html>

three 核心概念示例图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zrNrYOL-1687830109752)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHszuf74-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs2.png)]

透视相机图解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zSBWKOE-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\14238c00f908461ba7007348de2bc604.png)]

5 threejs 全景学习曲线

  • Scene - 场景
  • Camera - 相机
    • 透视相机
    • 正交相机
  • WebGLRenderer - 渲染器
  • 物体
    • Points - 点
    • Line - 线
    • Mesh - 多边形网格
    • Geometry - 几何体
    • Skeleton - 骨架
    • Bone - 骨骼
    • Sprite - 精灵
  • Group - 分组
  • Light - 光
    • 环境光
    • 平行光
    • 点光源
    • 聚光灯
    • 半球光
  • Texture - 纹理贴图
    • VideoTexture - 视频纹理
    • DepthTexture - 深度纹理
    • CubeTexture - 立方纹理
    • Canvas纹理
  • Material - 材质
    • 线材质
    • 点材质
    • 网格材质
    • 着色器材质
    • 阴影材质
    • 精灵材质
  • Loader - 加载器
    • 加载模型文件
    • 加载文字
    • 加载图片
    • 加载音频
    • 加载视频
    • 加载纹理
  • Animation - 动画
    • 帧动画
    • 轨道动画
    • 骨骼动画
    • 变形动画
  • Audio - 语音
  • 内置计算方法
    • 数学库
    • 路径创建
    • 形状创建

相关文章：

three.js的学习

Threejs 1 前言 Three.js是基于原生WebGL封装运行的三维引擎&#xff0c;在所有WebGL引擎中&#xff0c;Three.js是国内文资料最多、使用最广泛的三维引擎。 既然Threejs是一款WebGL三维引擎&#xff0c;那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于…...

编程日记 2023/6/29 11:18:58

Spark

Spark 概述 Apache Spark是用于大规模数据处理的统一分析计算引擎 Spark基于内存计算&#xff0c;提高了在大数据环境下数据处理的实时性&#xff0c;同时保证了高容错性和高可伸缩性&#xff0c;允许用户将Spark部署在大量硬件之上&#xff0c;形成集群。 spark与Hadoop的…...

编程日记 2023/6/29 10:45:37

poi生成excel饼图设置颜色

效果 实现 import com.gideon.entity.ChartPosition; import com.gideon.entity.LineChart; import com.gideon.entity.PieChart; import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util.CellRangeAddress; import org.apache.poi.xddf.usermodel.PresetColo…...

编程日记 2023/6/29 10:12:15

多版本管理node.js

多版本管理node.js 1. 安装2. 配置使用2.1 修改node源2.2 常用命令 在Windows 计算机上管理node.js的多个安装版本。 这是朋友推荐的&#xff0c;就是自己在升级node的时候给搞崩了&#xff0c; 不得不提升效率&#xff0c;于是发现了这个好工具&#xff0c;可以反过来理解&…...

编程日记 2023/6/29 9:38:53

【深入浅出 Spring Security（七）】RememberMe的实现原理详讲

RememberMe 的实现原理 一、RememberMe 的基本使用二、RememberMeAuthenticationFilter 源码分析RememberMeServicesTokenBasedRememberMeServicesTokenBasedRememberMeServices 中对 processAutoLoginCookie 方法的实现总结原理图式 三、提高安全性PersistentTokenBasedRememb…...

编程日记 2023/6/29 9:05:33

Cesium 实战 - 使用 gltf-vscode 查看、预览以及编辑 glTF 和 GLB 模型

Cesium 实战 - 使用 gltf-vscode 查看、预览以及编辑 glTF 和 GLB 模型 VScode&#xff08;Visual Studio Code&#xff09; 安装模型必要插件VScode 预览自定义关节&#xff08;articulations&#xff09;动作VScode 导入 GLB 格式模型VScode 导出 GLB 格式模型 模型渲染作为 …...

编程日记 2023/6/29 8:32:11

Python自动化测试框架：Pytest和Unittest的区别

pytest和unittest是Python中常用的两种测试框架&#xff0c;它们都可以用来编写和执行测试用例&#xff0c;但两者在很多方面都有所不同。本文将从不同的角度来论述这些区别&#xff0c;以帮助大家更好地理解pytest和unittest。 1. 原理 pytest是基于Python的assert语句和Pytho…...

编程日记 2023/6/29 7:58:50

考研算法29天：希尔排序 【希尔排序】

算法介绍 希尔排序 等差数列 普通版插入排序 循环数组 第一次每n/2为间隔分为4组&#xff0c;然后组内排序。 第二次每n/4为间隔分为2组。然后组内排序 第三次n/8为间隔分为一组。然后组内排序。 组内排序用插入排序来排序。 注&#xff1a;也可以第一次为n/3为间隔&am…...

编程日记 2023/6/29 7:25:28

RN 学习小记之使用 Expo 创建项目

本文Hexo博客链接&#x1f517; https://ysx.cosine.ren/react-native-note-1 xLog链接&#x1f517; https://x.cosine.ren/react-native-note-1 RSS订阅 &#x1f4e2; https://x.cosine.ren/feed/xml 由于业务需要&#xff0c;开始学习RN以备后面的需求&#xff0c;而虽然之…...

编程日记 2023/6/29 6:52:07

python爬虫从入门到精通

目录 一、正确认识Python爬虫 二、了解爬虫的本质 1. 熟悉Python编程 2. 了解HTML 3. 了解网络爬虫的基本原理 4. 学习使用Python爬虫库 三、了解非结构化数据的存储 1. 本地文件 2. 数据库 四、掌握各种技巧&#xff0c;应对特殊网站的反爬措施 1. User-Agent 2. C…...

编程日记 2023/6/29 6:18:46

从0到1精通自动化，接口自动化测试——数据驱动DDT实战

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 DDT简介 名称&am…...

编程日记 2023/6/29 5:45:25

【微服务】springboot整合swagger多种模式使用详解

目录 一、前言 1.1 编写API文档 1.2 使用一些在线调试工具 1.3 postman 1.4 swagger 二、swagger简介</...

编程日记 2023/6/29 5:12:04

AI 绘画（1）：生成一个图片的标准流程

文章目录 文章回顾感谢人员生成一个图片的标准流程前期准备&#xff0c;以文生图为例去C站下载你需要的绘画模型导入参数导入生成结果&#xff1f;可能是BUG事后处理 图生图如何高度贴合原图火柴人转角色 涂鸦局部重绘 Ai绘画公约 文章回顾 AI 绘画&#xff08;0&#xff09;&…...

编程日记 2023/6/29 4:38:43

CPU、内存、缓存的关系

术语解释 &#xff08;1&#xff09;CPU&#xff08;Central Processing Unit&#xff09; 中央处理器 &#xff08;2&#xff09;内存 内存用于暂时存放CPU中的运算数据&#xff0c;以及与硬盘等外部存储器交换的数据。它是外存与CPU进行沟通的桥梁&#xff0c;内存的运行决定…...

编程日记 2023/6/29 4:05:22

AI黑客松近期比赛清单；36氪AI淘宝店盈利复盘；GitHub Copilot官方最佳实践；AI在HR领域的应用探索 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; ⋙ 点击查看 AI Hackathon (黑客马拉松) 汇总清单 &#x1f916; 〖飞桨〗2023大模型应用创新挑战赛 百度飞桨联合上海市青年五十人创新创业研究院等…...

编程日记 2023/6/29 3:32:01

想要让视频素材格式快速调整转换的方法分享

有时候有些视频播放软件不支持播放某些格式的视频文件&#xff1f;那要怎么解决呢&#xff1f;换一个播放软件&#xff1f;不妨试试批量转换视频格式&#xff0c;简单的几步操作就能快速解决烦恼&#xff0c;跟着小编一起来看看具体的操作环节吧。 首先先进入“固乔科技”的官网…...

编程日记 2023/6/29 2:58:39

面向对象分析与设计 UML2.0 学习笔记

一、认识UML UML-Unified Modeling Language 统一建模语言&#xff0c;又称标准建模语言。是用来对软件密集系统进行可视化建模的一种语言。UML的定义包括UML语义和UML表示法两个元素。 UML是在开发阶段&#xff0c;说明、可视化、构建和书写一个面向对象软件密集系统的制品的…...

编程日记 2023/6/29 2:25:18

[数据库系统] 五、数据增删改

第一关&#xff1a;数据插入 用insert给数据库添加数据 相关知识 有关系student(sno,sname,ssex,sage,sdept)&#xff0c;属性对应含义&#xff1a;学号&#xff0c;姓名&#xff0c;性别&#xff0c;所在系。现有的部分元组如下所示 insert 向数据库表插入数据的基本格式有…...

编程日记 2023/6/29 1:51:57

docker私有注册表创建和使用

说明 本文给出了一个具体的使用docker registry和nginx配置docker私有注册表的方案。 创建和配置 docker compose 使用docker compose的方式运行registry容器&#xff0c;配置如下&#xff1a; # cat docker-compose.yml services:registry:image: registry:2ports:- &quo…...

编程日记 2023/6/29 1:18:36

用OpenCV进行OCR字符分割

1. 引言 本文重点介绍如何利用传统的图像处理的方法来进行OCR字符切分&#xff0c;进而可以用分割后的单个字符做相应的后续任务&#xff0c;虽然现在计算机视觉依然是卷积神经网络的天下&#xff0c;但是对于一些相对简单的落地场景传统方案还是很有效的。 闲话少说&#xff…...

编程日记 2023/6/29 0:45:14

koanf自定义Provider开发：扩展你的配置源终极指南

koanf自定义Provider开发&#xff1a;扩展你的配置源终极指南 【免费下载链接】koanf Simple, extremely lightweight, extensible, configuration management library for Go. Supports JSON, TOML, YAML, env, command line, file, S3 etc. Alternative to viper. 项目地址…...

编程新知 2026/4/1 18:46:44

迪文串口屏通信协议详解：从5AA5帧头到变量地址，一篇看懂HEX指令怎么发

迪文串口屏通信协议逆向解析&#xff1a;从帧头到数据域的HEX指令全解构 第一次拿到迪文串口屏的HEX指令时&#xff0c;那一串5A A5 11 82 0001 BFAA C6F4...让我完全摸不着头脑。为什么有的指令长度固定&#xff0c;有的却变化多端&#xff1f;地址字段和数据字段究竟如何划分…...

编程新知 2026/4/1 18:04:07

解决Legado书源调试难题：从问题诊断到环境优化的完整指南

解决Legado书源调试难题&#xff1a;从问题诊断到环境优化的完整指南 【免费下载链接】legado Legado 3.0 Book Reader with powerful controls & full functions❤️阅读3.0, 阅读是一款可以自定义来源阅读网络内容的工具&#xff0c;为广大网络文学爱好者提供一种方便、快…...

编程新知 2026/4/1 17:39:24

考研数学二高数公式太多记不住？我用Python+Anki做了一个自动出题复习工具

用PythonAnki打造考研数学二高数公式智能复习系统 备考考研数学二的同学&#xff0c;最头疼的莫过于海量高数公式的记忆。泰勒展开、微分方程解法、伽玛函数...这些公式不仅抽象难懂&#xff0c;还容易混淆。传统死记硬背效率低下&#xff0c;而市面上的公式手册又缺乏互动性。…...

编程新知 2026/4/1 16:51:12

对于对话中的用户流失预测，OpenClaw 的预测模型特征有哪些？

在讨论对话场景中的用户流失预测时&#xff0c;OpenClaw 的预测模型特征设计其实体现了一种很务实的思路。它没有追求那种听起来特别炫酷、参数庞大的复杂架构&#xff0c;而是把重点放在了如何从实际的对话数据中提取出真正能反映用户去留意图的信号。 这些特征大致可以归为几…...

编程新知 2026/4/1 16:32:50

iOSDeviceSupport：解决设备调试兼容性问题的高效管理工具

iOSDeviceSupport&#xff1a;解决设备调试兼容性问题的高效管理工具 【免费下载链接】iOSDeviceSupport All versions of iOS Device Support 项目地址: https://gitcode.com/gh_mirrors/ios/iOSDeviceSupport 问题场景&#xff1a;当新系统遇见旧Xcode "连接失败…...

编程新知 2026/4/1 16:14:39

像素史诗惊艳效果展示：10份高质量研报生成过程与成品对比

像素史诗惊艳效果展示&#xff1a;10份高质量研报生成过程与成品对比 1. 像素史诗&#xff1a;当AI研究遇上像素艺术 在数字内容创作领域&#xff0c;一款名为像素史诗(Pixel Epic)的工具正在重新定义研究报告的生成方式。这款基于AgentCPM-Report大模型构建的智能终端&#…...

编程新知 2026/4/1 16:10:38

告别重复造轮子：用快马AI一键生成SpringBoot通用后台管理模块

最近在做一个后台管理系统的项目&#xff0c;发现每次从零开始搭建SpringBoot框架都要重复写很多样板代码&#xff0c;特别浪费时间。后来尝试用InsCode(快马)平台的AI生成功能&#xff0c;效率提升了好几倍。今天就来分享下如何快速生成SpringBoot通用后台模块。 1. 后台管理…...

编程新知 2026/4/1 15:32:10

SoundSwitch音频配置文件深度解析：应用触发和多设备管理的完整指南

SoundSwitch音频配置文件深度解析&#xff1a;应用触发和多设备管理的完整指南 【免费下载链接】SoundSwitch C# application to switch default playing device. Download: https://soundswitch.aaflalo.me/ 项目地址: https://gitcode.com/gh_mirrors/so/SoundSwitch …...

编程新知 2026/4/1 13:57:39

解锁PlotJuggler数据可视化：工业时序数据处理与分析指南

解锁PlotJuggler数据可视化&#xff1a;工业时序数据处理与分析指南 【免费下载链接】PlotJuggler The Time Series Visualization Tool that you deserve. 项目地址: https://gitcode.com/gh_mirrors/pl/PlotJuggler PlotJuggler是一款专业的时序数据可视化工具&#x…...

编程新知 2026/4/1 13:26:57