【初体验 threejs】【学习】【笔记】hello，正方体 3！

前言

为了满足工作需求，我已着手学习 Three.js，并决定详细记录这一学习过程。在此旅程中，如果出现理解偏差或有其他更佳的学习方法，请大家不吝赐教，在评论区给予指正或分享您的宝贵建议，我将不胜感激。

项目基础

请参考hello，正方体 2！。

1. 抗锯齿

除非直线完全水平或垂直，否则使用方形像素绘制直线是很困难的。我们将使用一种称为抗锯齿(AA) 的技术来解决这个问题。

1.1 多重采样抗锯齿 (MSAA)

抗锯齿是使用内置的 WebGL 方法执行的，即 多重采样抗锯齿 (MSAA)。

1.2 启用抗锯齿

renderer.js: 添加如下

import { WebGLRenderer } from "three";/*** @description - 创建渲染器* @returns {WebGLRenderer} - 渲染器实例*/
export const createRenderder = () => {// 创建WebGLRenderer类的一个实例// 打开抗锯齿antialiasconst renderer = new WebGLRenderer({ antialias: true });// 启用物理上正确的光照renderer.physicallyCorrectLights = true;return renderer;
};

注意
一旦创建了渲染器，就无法更改此设置。

2. 浏览器窗口大小变化

目的是为了用户调整预览窗口的大小，场景适应新的大小。

2.1 扩展 Resizer 类
  1. 因为初始化时要设置初始大小，页面变化时也要重新设置大小，所有要把这部分设置代码移入到一个函数里。
  2. 将使用 ResizeObserver 来监听容器的大小变化。
  3. 因为我们只调用了.render 一次，它在画布中绘制了一个帧。当画布被调整大小时，这个框架被拉伸以适应新的大小。所以要创建一个 onResize 钩子，每次调整大小事件触发时生成一个新帧。
  4. 在 World 中使用 onResize 函数。

Resizer.js：添加如下

import { PerspectiveCamera, WebGLRenderer } from "three";
class Resizer {#container; // 容器#camera; // 相机#renderer; // 渲染器onResize = () => {}; // 页面大小变化钩子函数/*** @param {Element} container - 容器* @param {PerspectiveCamera} camera - 相机* @param {WebGLRenderer} renderer - 渲染器*/constructor(container, camera, renderer) {this.#container = container;this.#camera = camera;this.#renderer = renderer;// 初始化sizethis.#setSize();// 监听容器大小变化const resizeObserver = new ResizeObserver(() => {this.#setSize();this.onResize();});resizeObserver.observe(container);}#setSize() {this.#camera.aspect =this.#container.clientWidth / this.#container.clientHeight;this.#camera.updateProjectionMatrix();this.#renderer.setSize(this.#container.clientWidth,this.#container.clientHeight);this.#renderer.setPixelRatio(window.devicePixelRatio);}
}
export { Resizer };

World.js：添加如下

import { createScene } from "./components/scene";
import { createCamera } from "./components/camera";
import { createCude } from "./components/cube";
import { createLights } from "./components/lights";
import { createRenderder } from "./systems/renderer";
import { Resizer } from "./systems/Resizer";
class World {#scene; // 场景#camera; // 相机#renderer; // 渲染/*** @param {Element} container - 容器*/constructor(container) {this.#scene = createScene();this.#camera = createCamera();this.#renderer = createRenderder();container.append(this.#renderer.domElement);const cube = createCude();const light = createLights();this.#scene.add(cube, light);const resizer = new Resizer(container, this.#camera, this.#renderer);resizer.onResize = () => {this.render();};}/*** @description - 渲染函数*/render() {this.#renderer.render(this.#scene, this.#camera);}
}export { World };

3. 动画循环（运动）

为立方体添加一个简单的旋转动画。

  1. 创建一个动画循环
    创建 systems/Loop.js 模块并在其中创建一个新 Loop 类
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
class Loop {#camera; // 相机#scene; // 场景#renderer; // 渲染/*** @param {PerspectiveCamera} camera - 相机* @param {Scene} scene - 场景* @param {WebGLRenderer} renderer - 渲染*/constructor(camera, scene, renderer) {this.#camera = camera;this.#scene = scene;this.#renderer = renderer;}/*** @description - 动画循环开始*/start() {}/*** @description - 动画循环结束*/stop() {}
}export { Loop };
  1. 在 World 中，将这个新类添加到导入列表中：
    World.js: 添加如下
import { createScene } from "./components/scene";
import { createCamera } from "./components/camera";
import { createCude } from "./components/cube";
import { createLights } from "./components/lights";
import { createRenderder } from "./systems/renderer";
import { Resizer } from "./systems/Resizer";
import { Loop } from "./systems/Loop";
class World {#scene; // 场景#camera; // 相机#renderer; // 渲染#loop; // 动画循环/*** @param {Element} container - 容器*/constructor(container) {this.#scene = createScene();this.#camera = createCamera();this.#renderer = createRenderder();this.#loop = new Loop(this.#camera, this.#scene, this.#renderer);container.append(this.#renderer.domElement);const cube = createCude();const light = createLights();this.#scene.add(cube, light);const resizer = new Resizer(container, this.#camera, this.#renderer);resizer.onResize = () => {this.render();};}/*** @description - 渲染函数*/render() {this.#renderer.render(this.#scene, this.#camera);}/*** @description - 动画循环开始*/start() {this.#loop.start();}/*** @description - 动画循环结束*/stop() {this.#loop.stop();}
}export { World };
  1. 启动动画循环
    main.js：添加如下
import { World } from "../World/World";function main() {// 获取容器const container = document.querySelector("#scene-container");// 创建一个world类实例const world = new World(container);// 开始动画循环world.start();
}main();
  1. 使用.setAnimationLoop 创建循环
    在内部，循环是使用 .requestAnimationFrame。这种内置的浏览器方法可以智能地安排帧与显示器的刷新率同步，如果您的硬件跟不上，它会平滑地降低帧率。然而，.setAnimationLoop 还有一点额外的魔力可以确保循环在虚拟现实和增强现实环境中工作。
    Loop.js：添加如下
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
class Loop {#camera; // 相机#scene; // 场景#renderer; // 渲染/*** @param {PerspectiveCamera} camera - 相机* @param {Scene} scene - 场景* @param {WebGLRenderer} renderer - 渲染*/constructor(camera, scene, renderer) {this.#camera = camera;this.#scene = scene;this.#renderer = renderer;}/*** @description - 动画循环开始*/start() {this.#renderer.setAnimationLoop(() => {this.#renderer.render(this.#scene, this.#camera);});}/*** @description - 动画循环结束*/stop() {this.#renderer.setAnimationLoop(null);}
}export { Loop };
  1. 移除 onResize 钩子
    现在循环正在运行，每当我们调整窗口大小时，都会在循环的下一次迭代中生成一个新帧。这足够快，不会注意到任何延迟，因此我们不再需要在调整大小时手动重绘场景。从 World 中移除 resizer.onResize 钩子
    World.js：添加如下
import { createScene } from "./components/scene";
import { createCamera } from "./components/camera";
import { createCude } from "./components/cube";
import { createLights } from "./components/lights";
import { createRenderder } from "./systems/renderer";
import { Resizer } from "./systems/Resizer";
import { Loop } from "./systems/Loop";
class World {#scene; // 场景#camera; // 相机#renderer; // 渲染#loop; // 动画循环/*** @param {Element} container - 容器*/constructor(container) {this.#scene = createScene();this.#camera = createCamera();this.#renderer = createRenderder();this.#loop = new Loop(this.#camera, this.#scene, this.#renderer);container.append(this.#renderer.domElement);const cube = createCude();const light = createLights();this.#scene.add(cube, light);new Resizer(container, this.#camera, this.#renderer);}/*** @description - 渲染函数*/render() {this.#renderer.render(this.#scene, this.#camera);}/*** @description - 动画循环开始*/start() {this.#loop.start();}/*** @description - 动画循环结束*/stop() {this.#loop.stop();}
}export { World };

4. 动画系统

每次循环运行时，希望通过将它们向前移动一帧来更新所有这些动画。就在我们渲染每一帧之前，我们会让立方体旋转一点点， 几乎是肉眼无法看到的微小量，但随着时间的推移会产生流畅的动画效果。

  1. Loop.tick 方法
    为了处理所有这些，我们需要一个更新所有动画的函数，并且这个函数应该在每一帧开始时运行一次。
    Loop.js：添加如下
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
class Loop {#camera; // 相机#scene; // 场景#renderer; // 渲染/*** @param {PerspectiveCamera} camera - 相机* @param {Scene} scene - 场景* @param {WebGLRenderer} renderer - 渲染*/constructor(camera, scene, renderer) {this.#camera = camera;this.#scene = scene;this.#renderer = renderer;}/*** @description - 动画循环开始*/start() {this.#renderer.setAnimationLoop(() => {this.tick();this.#renderer.render(this.#scene, this.#camera);});}/*** @description - 动画循环结束*/stop() {this.#renderer.setAnimationLoop(null);}/*** @description - 更新动画*/tick() {}
}export { Loop };
  1. cube.tick 方法
    为动画对象创建一个.tick 方法，更新自身。
    cube.js: 添加如下
import { BoxGeometry, Mesh, MeshStandardMaterial, MathUtils } from "three";
/*** @description - 创建立方体* @returns {Mesh} - 网格实例*/export const createCude = () => {// 创建边长为2的几何体（就是边长2米）const geometry = new BoxGeometry(2, 2, 2);// 创建一个高质量、通用、物理精确的材料 设置颜色为紫色const material = new MeshStandardMaterial({ color: "purple" });// 创建一个网格添加几何体和材质const cube = new Mesh(geometry, material);// 旋转立方体cube.rotation.set(-0.5, -0.1, 0.8);// 添加更新动画方法tickcube.tick = () => {cube.rotation.z += 0.01;cube.rotation.x += 0.01;cube.rotation.y += 0.01;};return cube;
};

注意
像这样在运行时向现有类添加属性称为 猴子补丁。

  1. Loop.#updatables
    循环类中的动画对象列表。
    Loop.js：添加如下
import { PerspectiveCamera, Scene, WebGLRenderer, Object3D } from "three";
class Loop {#camera; // 相机#scene; // 场景#renderer; // 渲染#updatables = []; // 循环里的动画对象列表/*** @param {PerspectiveCamera} camera - 相机* @param {Scene} scene - 场景* @param {WebGLRenderer} renderer - 渲染* @param {Object3D[]} updatables - 循环里的动画对象列表*/constructor(camera, scene, renderer, updatables = []) {this.#camera = camera;this.#scene = scene;this.#renderer = renderer;this.#updatables = updatables;}/*** @description - 动画循环开始*/start() {this.#renderer.setAnimationLoop(() => {this.tick();this.#renderer.render(this.#scene, this.#camera);});}/*** @description - 动画循环结束*/stop() {this.#renderer.setAnimationLoop(null);}/*** @description - 更新动画*/tick() {for (const object of this.#updatables) {object.tick();}}/*** @description - 添加动画对象* @param  {...Object3D} object*/addObjectToUpdatables(...object) {this.#updatables.push(...object);}/*** @description - 删除动画对象* @param  {...Object3D} object*/removeObjectFromUpdatables(...object) {this.#updatables = this.#updatables.filter((obj) => !object.includes(obj));}
}export { Loop };
  1. 添加 cube 到 Loop.#updatables
    World.js：添加如下
import { createScene } from "./components/scene";
import { createCamera } from "./components/camera";
import { createCude } from "./components/cube";
import { createLights } from "./components/lights";
import { createRenderder } from "./systems/renderer";
import { Resizer } from "./systems/Resizer";
import { Loop } from "./systems/Loop";
class World {#scene; // 场景#camera; // 相机#renderer; // 渲染#loop; // 动画循环/*** @param {Element} container - 容器*/constructor(container) {this.#scene = createScene();this.#camera = createCamera();this.#renderer = createRenderder();this.#loop = new Loop(this.#camera, this.#scene, this.#renderer);container.append(this.#renderer.domElement);const cube = createCude();this.#loop.addObjectToUpdatables(cube);const light = createLights();this.#scene.add(cube, light);new Resizer(container, this.#camera, this.#renderer);}/*** @description - 渲染函数*/render() {this.#renderer.render(this.#scene, this.#camera);}/*** @description - 动画循环开始*/start() {this.#loop.start();}/*** @description - 动画循环结束*/stop() {this.#loop.stop();}
}export { World };

小结
立方体应该立即开始旋转。

5. 将动画速度与帧速率解耦

我们动画的速度取决于观看它的设备。我们的动画循环不会以固定速率生成帧。这意味着，在 60Hz 屏幕上，目标帧率为 60FPS，在 90Hz 屏幕上，目标帧率为 90FPS，以此类推。
在每一种情况下，动画循环都会以较低的速率生成帧，并且这个速率可能会因为许多因素从一个时刻到下一个时刻波动。这称为可变帧速率。
为了防止这种情况，我们需要将动画速度与帧速率解耦。我们将这样做：当我们告诉一个对象.tick 前进一帧时，我们将根据前一帧花费的时间来缩放移动的大小。

  1. 使用 Clock 类
    用 Clock.getDelta 来衡量前一帧花了多长时间。.getDelta 告诉我们自上次调用.getDelta 以来已经过去了多少时间。
    将结果保存在一个名为 delta 的变量中，然后我们将其传递给每个动画对象的.tick 方法。
    Loop.js：添加如下
import {PerspectiveCamera,Scene,WebGLRenderer,Object3D,Clock,
} from "three";
class Loop {#camera; // 相机#scene; // 场景#renderer; // 渲染#updatables = []; // 循环里的动画对象列表#clock; // 秒表/*** @param {PerspectiveCamera} camera - 相机* @param {Scene} scene - 场景* @param {WebGLRenderer} renderer - 渲染* @param {Object3D[]} updatables - 循环里的动画对象列表*/constructor(camera, scene, renderer, updatables = []) {this.#camera = camera;this.#scene = scene;this.#renderer = renderer;this.#updatables = updatables;this.#clock = new Clock();}/*** @description - 动画循环开始*/start() {this.#renderer.setAnimationLoop(() => {this.tick();this.#renderer.render(this.#scene, this.#camera);});}/*** @description - 动画循环结束*/stop() {this.#renderer.setAnimationLoop(null);}/*** @description - 更新动画*/tick() {// .getDelta告诉我们自上次调用.getDelta以来已经过去了多少时间。const delta = this.#clock.getDelta();for (const object of this.#updatables) {object.tick(delta);}}/*** @description - 添加动画对象* @param  {...Object3D} object*/addObjectToUpdatables(...object) {this.#updatables.push(...object);}/*** @description - 删除动画对象* @param  {...Object3D} object*/removeObjectFromUpdatables(...object) {this.#updatables = this.#updatables.filter((obj) => !object.includes(obj));}
}export { Loop };

cube.js：添加如下

import { BoxGeometry, Mesh, MeshStandardMaterial, MathUtils } from "three";
/*** @description - 创建立方体* @returns {Mesh} - 网格实例*/export const createCude = () => {// 创建边长为2的几何体（就是边长2米）const geometry = new BoxGeometry(2, 2, 2);// 创建一个高质量、通用、物理精确的材料 设置颜色为紫色const material = new MeshStandardMaterial({ color: "purple" });// 创建一个网格添加几何体和材质const cube = new Mesh(geometry, material);// 旋转立方体cube.rotation.set(-0.5, -0.1, 0.8);// 度数转弧度const radiansPerSecond = MathUtils.degToRad(30);// 添加更新动画方法tickcube.tick = (delta) => {const radian = radiansPerSecond * delta;cube.rotation.z += radian;cube.rotation.x += radian;cube.rotation.y += radian;};return cube;
};

6. 总结

至此已经全部完成。你好，正方体 3！如果出现理解偏差或有其他更佳的学习方法，请大家不吝赐教，在评论区给予指正或分享您的宝贵建议，我将不胜感激。

主要文献

three.js 官网
《discoverthreejs》

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Python支持多种数据类型及案列】

【Python支持多种数据类型及案列】

Python 数据类型教学 Python支持多种数据类型，每种类型有其特定的用途和特点。以下是Python中常见的数据类型及其示例。 1. 基本数据类型 整数（int） 整数是没有小数部分的数字。例如：-2, -1, 0, 1, 2 a 10 b -5 print(type(a)…
阅读更多...
多元多项式的特征列与零点的关系定理

多元多项式的特征列与零点的关系定理

下面这个定理来自《计算机代数》6.1三角列与特征列（王东明、夏壁灿著） 【定理】 设 C [ C 1 , … , C r ] \mathbb{C }\left\lbrack C_{1},\ldots,C_{r} \right\rbrack C[C1​,…,Cr​]为多项式组 P ⊂ K [ x ] \mathbb{P \subset}\mathcal{K\lbrack}\…
阅读更多...
Java共享台球室无人系统支持微信小程序+微信公众号

Java共享台球室无人系统支持微信小程序+微信公众号

共享台球室无人系统 🎱 创新台球体验 近年来，共享经济如火如荼，从共享单车到共享汽车，无一不改变着我们的生活方式。而如今，这一模式已经渗透到了更多领域，共享台球室便是其中之一。不同于传统的台球室&a…
阅读更多...
java溯本求源之基础（二十四）之--常见List的实现共同点

java溯本求源之基础（二十四）之--常见List的实现共同点

兄弟们终于到了上代码讲代码的环节了，之前的一些代码都是小打小闹，现在才是重头戏，今天来简单说说一些集合，首先这些都是基于数组实现的，当然Collections.emptyList不算奥，别犟。剩下的不多墨迹直接上重点&…
阅读更多...
从中概回购潮，看互联网的未来

从中概回购潮，看互联网的未来

王兴的饭否语录里有这样一句话：“对未来越有信心，对现在越有耐心。” 而如今的美团，已经不再掩饰对未来的坚定信心。6月11日，美团在港交所公告，计划回购不超过20亿美元的B类普通股股份。 而自从港股一季度财报季结束…
阅读更多...
Hue Hadoop 图形化用户界面 BYD

Hue Hadoop 图形化用户界面 BYD

软件简介 Hue 是运营和开发 Hadoop 应用的图形化用户界面。Hue 程序被整合到一个类似桌面的环境，以 web 程序的形式发布，对于单独的用户来说不需要额外的安装。
阅读更多...
SBT30100VFCT-ASEMI大功率肖特基SBT30100VFCT

SBT30100VFCT-ASEMI大功率肖特基SBT30100VFCT

编辑：ll SBT30100VFCT-ASEMI大功率肖特基SBT30100VFCT 型号：SBT30100VFCT 品牌：ASEMI 封装：TO-220 最大平均正向电流（IF）：30A 最大循环峰值反向电压（VRRM）&#xf…
阅读更多...
python 打开exe

python 打开exe

python 打开exe 在Python中，可以使用subprocess模块来打开一个exe文件。以下是两种不同的实现方法： 方法一： import subprocess 使用subprocess模块打开exe文件 subprocess.Popen(‘path_to_exe_file.exe’) 方法二： import …
阅读更多...
Spring事务管理与Spring AOP详解

Spring事务管理与Spring AOP详解

Spring事务管理与Spring AOP详解 一、引言 在企业级应用开发中，事务管理和面向切面编程（AOP）是两个至关重要的概念。Spring框架作为Java企业级应用的首选框架之一，为事务管理和AOP提供了强大的支持。本文将详细解析Spring的事务…
阅读更多...
服务器----阿里云服务器重启或关机，远程连接进不去，个人博客无法打开

服务器----阿里云服务器重启或关机，远程连接进不去，个人博客无法打开

问题描述 在使用阿里云免费的新加坡服务器时，发现重启或者是关机在开服务器后，就会出现远程连接不上、个人博客访问不了等问题 解决方法 进入救援模式连接主机，用户名是root，密码是自己设置的 点击访问博客查看更多内容
阅读更多...
服务器可以充当负载均衡器

服务器可以充当负载均衡器

5. 负载均衡和集群支持：服务器可以充当负载均衡器，将网络流量分配到多个服务器节点，提高系统性能。此外，服务器还可以支持集群技术，通过将多个服务器连接在一起，提供高可用性和可扩展性。 6. 数据中心和云服…
阅读更多...
AcWing 1273：天才的记忆 ← ST算法求解RMQ问题

AcWing 1273：天才的记忆 ← ST算法求解RMQ问题

【题目来源】https://www.acwing.com/problem/content/1275/【题目描述】 从前有个人名叫 WNB，他有着天才般的记忆力，他珍藏了许多许多的宝藏。 在他离世之后留给后人一个难题（专门考验记忆力的啊！），如果谁…
阅读更多...
CSS选择符和可继承属性

CSS选择符和可继承属性

属性选择符&#xff1a; 示例&#xff1a;a[target"_blank"] { text-decoration: none; }&#xff08;选择所有target"_blank"的<a>元素&#xff09; /* 选择所有具有class属性的h1元素 */ h1[class] { color: silver; } /* 选择所有具有hre…
阅读更多...
【源码】Spring事务之传播特性的详解

【源码】Spring事务之传播特性的详解

Spring事务系列 1、【源码】SpringBoot事务注册原理 2、【源码】Spring Data JPA原理解析之事务注册原理 3、【源码】Spring Data JPA原理解析之事务执行原理 4、【源码】SpringBoot编程式事务使用及执行原理 5、【源码】Spring事务之传播特性的详解 6、【源码】Spring事…
阅读更多...
简说Navicat

简说Navicat

Navicat 是一款功能强大的数据库管理工具&#xff0c;广泛应用于管理和开发各种数据库&#xff0c;如 MySQL、MariaDB、SQL Server、SQLite、Oracle 和 PostgreSQL。Navicat 提供了一系列直观的图形界面和丰富的功能&#xff0c;极大地简化了数据库管理和开发的复杂性。 Navic…
阅读更多...
Zato库（续）

Zato库（续）

Zato库高级教程&#xff08;续&#xff09; 在前面的教程中&#xff0c;我们介绍了Zato的基础功能和一些进阶功能。现在&#xff0c;我们将进一步探讨一些高级功能和实际应用中的使用场景&#xff0c;以帮助开发者更好地掌握Zato的强大功能。 负载均衡和高可用配置 配置多服…
阅读更多...
配置文件-基础配置，applicationproperties.yml

配置文件-基础配置，applicationproperties.yml

黑马程序员Spring Boot2 文章目录 1、属性配置2、配置文件分类3、yaml文件4、yaml数据读取4.1 读取单个数据4.2 读取全部属性数据4.3 读取引用类型属性数据 1、属性配置 SpringBoot默认配置文件application.properties&#xff0c;通过键值对配置对应属性修改配置 修改服务器端…
阅读更多...
浏览器必装插件推荐：最新版Simple Allow Copy，解除网页复制限制！

浏览器必装插件推荐：最新版Simple Allow Copy，解除网页复制限制！

经常在网上找资料的朋友&#xff0c;尤其是学生党&#xff0c;总会遇到一个问题&#xff1a;很多资料网站的文字是禁止复制的。于是大家通常会使用各种文字识别软件来图文转换&#xff0c;或者直接手打。 今天这款小工具&#xff0c;可以轻松复制各种氪金网站上的任何文字&…
阅读更多...
文件查看相关的命令（Linux篇）

文件查看相关的命令（Linux篇）

1.cat&#xff1a;从文件上到下查看文件内容的命令 [rootlocalhost ~]# cd Desktop/ [rootlocalhost Desktop]# ls xxx.txt [rootlocalhost Desktop]# cat xxx.txt 1.shdadjaksdj 2.bbbbbbbbbbb 3.wewqhwiehqi gggggggggggggggg hhhhhhhhhhhhhh zzzzzzzzzzzz 2.tac&#xff1…
阅读更多...
视频监控平台：通过网络SDK对TCL网络摄像机进行PTZ控制 的源代码介绍及分享

视频监控平台：通过网络SDK对TCL网络摄像机进行PTZ控制 的源代码介绍及分享

目录 一、视频监控平台介绍 &#xff08;一&#xff09;概述 &#xff08;二&#xff09;视频接入能力介绍 &#xff08;三&#xff09;功能介绍 二、TCL网络摄像机 &#xff08;一&#xff09;360度全景自动旋转&#xff1a; &#xff08;二&#xff09;高清夜视和全彩…
阅读更多...
最新文章

Copyright @ 2022~2023