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官方文档，真心推荐读一读！！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者：慕课网_yancy】

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/670150.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

低代码开发平台（Low-code Development Platform）的模块组成部分

低代码开发平台（Low-code Development Platform）的模块组成部分

低代码开发平台&#xff08;Low-code Development Platform&#xff09;的模块组成部分主要包括以下几个方面&#xff1a; 低代码开发平台的模块组成部分可以按照包含系统、模块、菜单组织操作行为等维度进行详细阐述。以下是从这些方面对平台模块组成部分的说明&#xff1a; …
阅读更多...
计算机系统结构之FORK和JOIN

计算机系统结构之FORK和JOIN

程序语言中用FORK语句派生并行任务&#xff0c;用JOIN语句对多个并发任务汇合。 FORK语句的形式为FORK m&#xff0c;其中m为新领程开始的标号。 JOIN语句的形式为JOIN n&#xff0c;其中n为并发进程的个数。 例1&#xff1a;给定算术表达式ZEA*B*C/DF经并行编译得到如下程序…
阅读更多...
什么是 Redis 缓存？它解决了什么问题？怎么使用它？

什么是 Redis 缓存？它解决了什么问题？怎么使用它？

前言 写在前面&#xff0c;让我们从 3 个问题开始今天的文章&#xff1a;什么是 Redis 缓存&#xff1f;它解决了什么问题&#xff1f;怎么使用它&#xff1f; 在笔者近 3 年的 Java 一线开发经历中&#xff0c;尤其是一些移动端、用户量大的互联网项目&#xff0c;经常会使用…
阅读更多...
数学建模 —— 层次分析法（2）

数学建模 —— 层次分析法（2）

目录 一、层次分析法&#xff08;AHP&#xff09; 二、构造比较判断矩阵 2.1 两两比较法 三、单准则下的排序及一致检验 3.1 单准则下的排序 3.2 一致性检验 四、层次总排序 4.1 层次总排序的步骤 4.2 总排序一致性检验 一、层次分析法&#xff08;AHP&#xff09; 方…
阅读更多...
Centos 7部署NTP

Centos 7部署NTP

介绍 NTP是Network Time Protocol&#xff08;网络时间协议&#xff09;的简称&#xff0c;它是用来通过互联网或局域网将计算机时钟同步到世界协调时间&#xff08;UTC&#xff09;的协议。 安装 # yum安装 yum install -y ntp# 离线安装 #下载地址&#xff1a;https://mir…
阅读更多...
Caliburn.Micro框架学习笔记——多页面处理案例

Caliburn.Micro框架学习笔记——多页面处理案例

在聊这个之前&#xff0c;我们先来看一个静态类 在 Caliburn.Micro 中&#xff0c;ViewLocator 是一个用于查找和关联视图与视图模型的静态类。默认情况下&#xff0c;它根据约定&#xff08;命名约定或其他规则&#xff09;自动找到与视图模型相对应的视图。然而&#xff0c;…
阅读更多...
【5】MySQL数据库备份-XtraBackup - 全量备份

【5】MySQL数据库备份-XtraBackup - 全量备份

MySQL数据库备份-XtraBackup-全量备份 前言环境版本 安装部署下载RPM 包二进制包 安装卸载 场景分析全量备份 | 恢复备份恢复综合 增量备份 | 恢复部分备份 | 恢复 前言 关于数据库备份的一些常见术语、工具等&#xff0c;可见《MySQL数据库-备份》章节&#xff0c;当前不再重…
阅读更多...
【普通切换】【DC-based handover】【DAPS】协议栈分析

【普通切换】【DC-based handover】【DAPS】协议栈分析

移动网络切换 移动通信中切换是保证终端业务的基本流程&#xff0c;而切换时延是终端(UE)不能与任何基站交互(传递)用户面数据包的最短时间。 在5G(NR)网络中当终端(UE)接收到切换命令时&#xff0c;将断开与源小区的连接向目标小区发起随机接入过程。在此期间终端(UE)的数据传…
阅读更多...
深入理解linux文件系统与日志分析12

深入理解linux文件系统与日志分析12

一、inode和block 文件是存储在硬盘上&#xff0c;硬盘上的最小存储单位是扇区&#xff0c;每个扇区的大小是512字节。 inode&#xff1a;存储元信息&#xff08;文件的属性--权限、创建者、创建日期等等&#xff09; block&#xff1a;块 连续的八个扇区组成一个块&#xf…
阅读更多...
rpmbuild多进程批量编译脚本

rpmbuild多进程批量编译脚本

脚本用法 使用手册 bash spec.sh --help Please ensure the directory ~/rpmbuild exists, And the script can execute in any directory.Usage: bash spec.sh [OPTION]... [*.spec]... [OPTION]...or: bash spec.sh [*.spec]... [OPTION]... [*.spec]... rpmbuild all sp…
阅读更多...
【原型模式】详解

【原型模式】详解

一.概念 原型模式是一种创建型设计模式&#xff0c;它的主要思想是通过复制现有对象来创建新对象&#xff0c;而不是通过实例化一个类来创建。在原型模式中&#xff0c;我们称被复制的对象为原型&#xff08;Prototype&#xff09;&#xff0c;新创建的对象为克隆体&#xff0…
阅读更多...
【OpenHarmony】TypeScript 语法 ③ ( 条件语句 | if else 语句 | switch case 语句 )

【OpenHarmony】TypeScript 语法 ③ ( 条件语句 | if else 语句 | switch case 语句 )

文章目录 一、条件语句1、if else 语句2、switch case 语句 参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍 一、条件语句 1、if else 语句 TypeScript 中的 if 语句 / if else 语句 用法 , 与 JavaScript 语言中的 if 语句 / if else 语句 语法 基本相同 ; if else 语…
阅读更多...
.gitignore 文件

.gitignore 文件

一.什么是 .gitignore 文件 在任何当前工作的 Git 仓库中&#xff0c;每个文件都是这样的&#xff1a; 追踪的&#xff08;tracked&#xff09;- 这些是 Git 所知道的所有文件或目录。这些是新添加&#xff08;用 git add 添加&#xff09;和提交&#xff08;用 git commit 提…
阅读更多...
Ubuntu 20.04安装CMake 3.22.6版本

Ubuntu 20.04安装CMake 3.22.6版本

Ubuntu 20.04通过apt安装的cmake版本是3.16.3&#xff0c;默认安装到/usr/bin/cmake路径。 $ cmake Command cmake not found, but can be installed with:sudo snap install cmake # version 3.29.3, or sudo apt install cmake # version 3.16.3-1ubuntu1.20.04.1See sna…
阅读更多...
chatgpt之api的调用问题

chatgpt之api的调用问题

1.调用api过程中&#xff0c;出现如下报错内容 先写一个测试样例 import openaiopenai.api_key "OPEN_AI_KEY" openai.api_base"OPEN_AI_BASE_URL" # 是否需要base根据自己所在地区和key情况进行completion openai.ChatCompletion.create(model"g…
阅读更多...
【PingPong_注册安全分析报告】

【PingPong_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …
阅读更多...
C++ | Leetcode C++题解之第125题验证回文串

C++ | Leetcode C++题解之第125题验证回文串

题目&#xff1a; 题解&#xff1a; class Solution { public:bool isPalindrome(string s) {int n s.size();int left 0, right n - 1;while (left < right) {while (left < right && !isalnum(s[left])) {left;}while (left < right && !isalnu…
阅读更多...
【scikit-learn010】sklearn算法模型清单实战及经验总结（已更新）

【scikit-learn010】sklearn算法模型清单实战及经验总结（已更新）

1.一直以来想写下基于scikit-learn训练AI算法的系列文章，作为较火的机器学习框架，也是日常项目开发中常用的一款工具，最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架模型算法包相关技术点及经验。 3.欢迎批评指正，欢迎互三，跪谢一键…
阅读更多...
数学建模 —— 灰色系统（4）

数学建模 —— 灰色系统（4）

目录 什么是灰色系统&#xff1f; 一、灰色关联分析 1.1 灰色关联分析模型 1.2 灰色关联因素和关联算子集 1.2.1 灰色关联因素 1.2.2 关联算子集 1.3 灰色关联公理与灰色关联度 1.3.1 灰色关联度 1.3.2 灰色关联度计算步骤 1.4 广义关联度 1.4.1 灰色绝对关联…
阅读更多...
mysql表字段超过多少影响性能 mysql表多少效率会下降

mysql表字段超过多少影响性能 mysql表多少效率会下降

一直有传言说&#xff0c;MySQL 表的数据只要超过 2000 万行&#xff0c;其性能就会下降。而本文作者用实验分析证明&#xff1a;至少在 2023 年&#xff0c;这已不再是 MySQL 表的有效软限制。 传言 互联网上有一则传言说&#xff0c;我们应该避免单个 MySQL 表中的数据超过 …
阅读更多...
最新文章

Copyright @ 2022~2023