Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器
个人简介
👀个人主页： 前端杂货铺
⚡开源项目： rich-vue3 （基于 Vue3 + TS + Pinia + Element Plus + Spring全家桶 + MySQL）
🙋♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍖开源 rich-vue3 🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧
| 内容 | 参考链接 |
|---|---|
| WebGL专栏 | WebGL 入门 |
| Three.js（一） | 创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化 |
| Three.js（二） | scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机 |
| Three.js（三） | 聚光灯、环境光、点光源、平行光、半球光 |
| Three.js（四） | 基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质 |
| Three.js（五） | Three.js——二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字 |
文章目录
- 前言
- 一、Tween动画
- 二、点击选取对象
- 三、加载外部文件
- 四、使用相机控制器
- 总结
前言
大家好，这里是前端杂货铺。
上篇文章我们学习了 二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字。接下来，我们继续我们 three.js 的学习！
在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档。
一、Tween动画
Tween.js是一个轻量级的 JavaScript 库，可以创建平滑的动画和过渡效果。
下面，我们设置一个不间断重复的，每两秒进行重新动画的场景。
核心代码：
new TWEEN.Tween(cube.rotation).to({x: cube.rotation.x + 2,y: cube.rotation.y + 2,z: cube.rotation.z + 2,
}, 2000).start().repeat(Infinity);TWEEN.update();
完整代码：
<!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>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/tween.min.js"></script>
</head><body>
<script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);// 创建立方体材质const lambert = new THREE.MeshLambertMaterial({color: 0xff0000});const basic = new THREE.MeshBasicMaterial({wireframe: true});const cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [lambert, basic]);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);new TWEEN.Tween(cube.rotation).to({x: cube.rotation.x + 2,y: cube.rotation.y + 2,z: cube.rotation.z + 2,}, 2000).start().repeat(Infinity);const animation = () => {TWEEN.update();// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>
tween动画
二、点击选取对象
通过鼠标点击获取x, y坐标，进而计算出归一化坐标。之后通过光线投射进行物体的拾取。
Raycaster 这个类用于进行光线投射。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。
new THREE.Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
| 参数名称 | 描述 |
|---|---|
| origin | 光线投射的原点向量 |
| direction | 向射线提供方向的方向向量，应当被标准化 |
| near | 返回的所有结果比 near 远。near 不能为负值，其默认值为 0 |
| far | 返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷） |
<!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>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/tween.min.js"></script>
</head><body>
<script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);// 创建立方体材质const lambert = new THREE.MeshLambertMaterial({color: 0xff0000});const cube = new THREE.Mesh(cubeGeometry, lambert);cube.rotation.set(0.4, 0.4, 0);cube.position.x = -2;// 添加到场景cube.name = 'cube';scene.add(cube);const sphereGeometry = new THREE.SphereGeometry(2, 10, 10);const sphere = new THREE.Mesh(sphereGeometry, lambert);sphere.position.x = 4;sphere.name = 'sphere';scene.add(sphere);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);document.onclick = function (event) {// 归一化坐标（将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)）const x = (event.clientX / window.innerWidth) * 2 - 1;const y = -(event.clientY / window.innerHeight) * 2 + 1;// 创建设备坐标（三维）const standardVector = new THREE.Vector3(x, y, 0.5);// 转化为世界坐标 (将此向量 (坐标) 从相机的标准化设备坐标 (NDC) 空间投影到世界空间)const worldVector = standardVector.unproject(camera);// 做序列化const ray = worldVector.sub(camera.position).normalize();// 实现点击选中// 创建一个射线发射器，用来发射一条射线const raycaster = new THREE.Raycaster(camera.position, ray);// 返回射线碰撞到的物体const intersects = raycaster.intersectObjects(scene.children, true);let point3d = null;if (intersects.length) {point3d = intersects[0];}if (point3d) {console.log(point3d.object.name);}}const animation = () => {// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>
raycaster光线投射
三、加载外部文件
加载外部文件，可以使用 MTL 加载器来实现。
MTLLoader 一个用于加载 .mtl 资源的加载器，由 OBJLoader 在内部使用。
材质模版库（MTL）或 .MTL 文件格式是 .OBJ 的配套文件格式， 用于描述一个或多个 .OBJ 文件中物体表面着色（材质）属性。
MTLLoader( loadingManager : LoadingManager )
接下来，我们加载一个城市模型
<!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>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/OBJLoader.js"></script><script src="../lib/three/MTLLoader.js"></script><script src="../lib/three/OBJMTLLoader.js"></script>
</head><body>
<script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 300, 400);camera.lookAt(new THREE.Vector3(0, 0, 0));// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(2000, 8000, 4000);scene.add(spotLight);const loader = new THREE.OBJMTLLoader();// PS：想要文件的加群获取...loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {scene.add(mesh);})const animation = () => {// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>
四、使用相机控制器
相机控制器有很多种，它的作用是使得相机围绕目标进行不同类型的运动。
接下来，我们使用 轨迹球控制器、第一人称控制器、飞行控制器、翻滚控制器和轨道控制器 查看一下效果。
<!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>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/OBJLoader.js"></script><script src="../lib/three/MTLLoader.js"></script><script src="../lib/three/OBJMTLLoader.js"></script><!-- 轨迹球控件 --><script src="../lib/three/TrackballControls.js"></script><!-- 第一人称控件 --><script src="../lib/three/FirstPersonControls.js"></script><!-- 飞行控件 --><script src="../lib/three/FlyControls.js"></script><!-- 翻滚控件 --><script src="../lib/three/RollControls.js"></script><!-- 轨道控件 --><script src="../lib/three/OrbitControls.js"></script>
</head><body>
<script>const clock = new THREE.Clock();// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置// camera.position.set(0, 300, 400);// camera.position.set(100, 30, 0);camera.position.set(100, 100, 0);camera.lookAt(new THREE.Vector3(0, 0, 0));// 轨迹球控件// const trackball = new THREE.TrackballControls(camera);// 第一人称控件// const controls = new THREE.FirstPersonControls(camera);// controls.lookSpeed = 0.2;// 飞行控件// const controls = new THREE.FlyControls(camera);// controls.rollSpeed = 0.5;// 翻滚控件// const controls = new THREE.RollControls(camera);// 轨道控件const controls = new THREE.OrbitControls(camera);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(2000, 8000, 4000);scene.add(spotLight);const loader = new THREE.OBJMTLLoader();loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {scene.add(mesh);})const animation = () => {// trackball.update();controls.update(clock.getDelta());// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>
下面，我们以轨道控制器为例，看一下具体的呈现效果：
three.js 使用相机控制器
总结
本篇文章我们讲解了几种常见几何体的基本使用，包括 tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器。
更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！
好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！
参考资料：
- Three.js 官方文档
- WebGL+Three.js 入门与实战【作者：慕课网_yancy】
相关文章：
Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器
个人简介 👀个人主页： 前端杂货铺 ⚡开源项目： rich-vue3 （基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL） 🙋♂️学习方向： 主攻前端方向，正逐渐往全干发展 …...
内网渗透-在HTTP协议层面绕过WAF
进入正题，随着安全意思增强，各企业对自己的网站也更加注重安全性。但很多web应用因为老旧，或贪图方便想以最小代价保证应用安全，就只仅仅给服务器安装waf。 本次从协议层面绕过waf实验用sql注入演示，但不限于实际应用…...
qt QGroupBox radiobutton
QGroupBox 显示文本：属性 title 加载radiobutton if (jsonObject.contains("startEndTogether") && jsonObject["startEndTogether"].isString()) {QString selectedButton jsonObject["startEndTogether"].toString();//…...
jetson nano onnxruntime 安装
安装说明： onnxruntime 依赖cuda、cudnn版本，可onnxruntime查找对应关系。但可能会出现jetpack中的cuda和cudnn的版本无法查找到对应版本的onnxruntime的问题。 解决方法： 通过Jetson Zoo下载相应的whl包直接安装。...
图形学初识--屏幕空间变换
文章目录 前言正文为什么需要屏幕空间变换？什么是屏幕空间变换？屏幕空间变换矩阵如何推导？问题描述步骤描述 结尾：喜欢的小伙伴点点关注赞哦! 前言 前面章节主要讲解了视图变换和投影变换，此时距离在屏幕空间显示也就…...
爬楼梯 - LeetCode 热题 81
大家好！我是曾续缘😇 今天是《LeetCode 热题 100》系列 发车第 81 天 动态规划第 1 题 ❤️点赞 👍 收藏 ⭐再看，养成习惯 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法…...
详解 Spark 核心编程之 RDD 分区器
一、RDD 分区器简介 Spark 分区器的父类是 Partitioner 抽象类分区器直接决定了 RDD 中分区的个数、RDD 中每条数据经过 Shuffle 后进入哪个分区，进而决定了 Reduce 的个数只有 Key-Value 类型的 RDD 才有分区器，非 Key-Value 类型的 RDD 分区的值是 No…...
Selenium番外篇文本查找、元素高亮、截图、无头运行
Selenium根据文本查找元素 python def find_element_with_text(self, loc, attribute, text):try:WebDriverWait(self.driver, 5).until(EC.all_of(EC.text_to_be_present_in_element_attribute(loc, attribute, text)))element self.driver.find_element(*loc)if isinsta…...
Java 22的FFM API，比起Java 21的虚拟线程
哪个对Java未来的发展影响更大？两个 Java 版本中的重要特性：Java 21 的虚拟线程和 Java 22 的 FFM API。我这里有一套编程入门教程，不仅包含了详细的视频讲解，项目实战。如果你渴望学习编程，不妨点个关注，给…...
用c语言实现简易三子棋
本篇适用于C语言初学者。 目录 完整代码： 分步介绍： 声明： 代码主体部分： 模块功能实现： 完整代码： #include<stdio.h> #include <stdlib.h> #include <time.h>#define ROW 3 #d…...
2024年华为OD机试真题-执行时长-Python-OD统一考试（C卷D卷）
2024年OD统一考试（D卷）完整题库：华为OD机试2024年最新题库（Python、JAVA、C++合集） 题目描述： 为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务，假设GPU最多一次执行n个任务，一次执…...
对未知程序所创建的 PDF 文档的折叠书签层级全展开导致丢签的一种解决方法
对需要经常查阅、或连续长时间阅读的带有折叠书签的 PDF 文档展开书签层级，提高阅览导航快捷是非常有必要的。 下面是两种常用书签层级全展开的方法 1、 FreePic2Pdf 1 - 2 - 3 - 4 - 5 - 6，先提取后回挂 2、PdgCntEditor 载入后，直接保存…...
计算机系统结构之FORK和JOIN
程序语言中用FORK语句派生并行任务，用JOIN语句对多个并发任务汇合。 FORK语句的形式为FORK m，其中m为新领程开始的标号。 JOIN语句的形式为JOIN n，其中n为并发进程的个数。 例1：给定算术表达式ZEA*B*C/DF经并行编译得到如下程序…...
Yocto - virtual/kernel介绍
在 Yocto 项目中，"virtual/kernel "是一个虚拟目标，作为 Linux 内核的抽象层。它是一种以灵活方式指定内核依赖关系的方法，允许实际的内核配方由特定构建中使用的机器配置和层决定。 下面是关于 "virtual/kerne"的含义和…...
如何在 DigitalOcean 云服务器上创建自定义品牌名称服务器
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。 介绍 对于托管提供商或转售商来说，拥有自定义的名称服务器可以为客户提供更专业的外观。这消除了要求客户将其域名指向另一…...
心链6----开发主页以及后端数据插入（多线程并发）定时任务
心链 — 伙伴匹配系统 开发主页 信息搜索页修改 主页开发（直接list用户） 在后端controller层编写接口去实现显示推荐页面的功能 /*** 推荐页面* param request* return*/GetMapping("/recommend")public BaseResponse<List<User>&…...
【Linux】日志管理
一、日志进程 1、处理日志的进程 rsyslogd：系统专职日志程序 观察rsyslogd程序： ps aux | grep rsyslogd 2、常见的日志文件 1、系统主日志文件: /var/log/messages 动态查看日志文件尾部： tail -f /var/log/messages 2、安全…...
AI 绘画爆火背后：扩散模型原理及实现
节前，我们星球组织了一场算法岗技术&面试讨论会，邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…...
详解智慧互联网医院系统源码：开发医院小程序教学
本篇文章，笔者将详细介绍智慧互联网医院系统的源码结构，并提供开发医院小程序的详细教学。 一、智慧互联网医院系统概述 智慧互联网医院系统涵盖了预约挂号、在线咨询、电子病历、药品管理等多个模块。 二、系统源码结构解析 智慧互联网医院系统的源码…...
【技术实操】银河高级服务器操作系统实例分享，数据库日志文件属主不对问题分析
1. 问题现象描述 2023 年 06 月 30 日在迁移数据库过程中，遇到数据库 crash 的缺陷，原因如下：在数据库启动时候生成的一组临时文件中，有 owner 为 root 的文件， 文件权限默认为 640， 当数据库需要使用的时…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...
数据结构：递归的种类（Types of Recursion）
目录 尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析 头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件，这个上传文件是整体功能的一部分，文件在上传的过程中…...