12.Three.js纹理动画与动效墙案例

12.Three.js纹理动画与动效墙案例

在Three.js的数字孪生场景应用中，我们通常会使用到一些动画渲染效果，如动效墙，飞线、雷达等等，今天主要了解一下其中一种动画渲染效果：纹理动画。下面实现以下动效墙效果（警戒墙动画）。根据该案例的实现思路还可以实现很多种动画效果。

在这里插入图片描述

1.纹理贴图和纹理动画

首先了解一下Three.js纹理贴图相关的类 Texture，构造函数如下：

Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, colorSpace )

该api用于是一个纹理贴图对象，可以将其应用到一个表面，或者作为反射/折射贴图。

一般通过TextureLoader方式加载和创建：

const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping; //水平方向重复包裹
texture.wrapT = THREE.RepeatWrapping; //垂直方向重复包裹
texture.repeat.set( 4, 4 );

参数说明：

wrapS：这个值定义了纹理贴图在水平方向上将如何包裹

wrapT：这个值定义了纹理贴图在垂直方向上将如何包裹

方法说明：

texture.repeat.set( 4, 4 )： 设定在水平、垂直方向上的重复次数

在我们给网格模型设置材质的时候，除了可以设置通用的基础材质或者兰伯特材质，还可以加上我们的纹理贴图，为网格模型套上”皮肤“

let texture;function initObject() {const geometry = new THREE.PlaneGeometry(600, 100 );texture = new THREE.TextureLoader().load( "./img/warning.png" );texture.repeat.set( 5, 1 );// 设置.wrapS也就是U方向，纹理映射模式(包裹模式)texture.wrapS = THREE.RepeatWrapping;//对应offste.x偏移// 设置.wrapT也就是V方向，纹理映射模式texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移let material = new THREE.MeshBasicMaterial({map: texture,color: "#FFFFFF", side: THREE.DoubleSide,transparent:true});let mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshmesh.rotateX(Math.PI/2);scene.add(mesh);}

在这里插入图片描述

2.纹理对象.offset属性

纹理对象Texture的.offset的功能是偏移贴图在Mesh上位置，本质上相当于修改了UV顶点坐标。

texture.offset.x +=0.5;//纹理U方向偏移

texture.offset.y +=0.5;//纹理V方向偏移

该属性结合渲染循环，动态的修改uv坐标就可以实现uv动画了

// 渲染循环
function render() {texture.offset.x +=0.001;//设置纹理动画：偏移量根据纹理和动画需要，设置合适的值renderer.render(scene, camera);requestAnimationFrame(render);
}
render();

3.基于平面几何体的动效墙效果代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Three框架</title><script src="../three.js-master/build/three.js"></script><script src="../three.js-master/examples/js/controls/OrbitControls.js"></script><script src="../three.js-master/examples/js/loaders/GLTFLoader.js"></script><script src="../three.js-master/examples/js/loaders/OBJLoader.js"></script><script src="../three.js-master/examples/js/loaders/MTLLoader.js"></script><style type="text/css">body {margin: 0;padding: 0;overflow-y: hidden;overflow-x: hidden;}div#webgl {width: 100vw;height: 100vh;}</style><script>var renderer;function initThree() {let dom = document.getElementById("webgl");width = dom.clientWidth;height = dom.clientHeight;renderer = new THREE.WebGLRenderer({antialias: true,});renderer.setSize(width, height);dom.appendChild(renderer.domElement);renderer.setClearColor("#ffffff", 1.0);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);// camera = new THREE.OrthographicCamera( width/-2, width/2, height/2, height/-2, 1, 10000 );camera.position.x = 0;camera.position.y = 1000;camera.position.z = 0;camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;camera.lookAt({x: 0,y: 0,z: 0,});}var scene;function initScene() {scene = new THREE.Scene();}var light;function initLight() {light = new THREE.DirectionalLight(0xffffff, 1.0);light.position.set(100, 100, 200);scene.add(light);}let texture;function initObject() {const geometry = new THREE.PlaneGeometry(600, 100 );texture = new THREE.TextureLoader().load( "./img/warning.png" );texture.repeat.set( 5, 1 );// 设置.wrapS也就是U方向，纹理映射模式(包裹模式)texture.wrapS = THREE.RepeatWrapping;//对应offste.x偏移// 设置.wrapT也就是V方向，纹理映射模式texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移let material = new THREE.MeshBasicMaterial({map: texture,color: "#FFFFFF", side: THREE.DoubleSide,transparent:true});let mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshmesh.rotateX(Math.PI/2);scene.add(mesh);}function threeStart() {initThree(); //初始化Three.js渲染器等初始操作initCamera(); //初始化相机initScene(); //初始化场景initLight(); //初始化灯光initControls(); //初始化控制器initObject(); //初始化渲染物体initAxesHelper();render(); //执行渲染}function initAxesHelper() {// AxesHelper：辅助观察的坐标系(红x、绿y、蓝z)const axesHelper = new THREE.AxesHelper(1500);scene.add(axesHelper);}function initControls() {// 设置相机控件轨道控制器OrbitControlsconst controls = new THREE.OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景controls.addEventListener("change", function () {renderer.render(scene, camera); //执行渲染操作}); //监听鼠标、键盘事件}function render() {// texture.offset.x -=0.01;//设置纹理动画：偏移量根据纹理和动画需要，设置合适的值renderer.render(scene, camera);requestAnimationFrame(render);}</script>
</head><body onload="threeStart();"><div id="webgl"></div>
</body></html>

4.通过坐标的自定义几何体创建的动效墙效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Three框架</title><script src="../three.js-master/build/three.js"></script><script src="../three.js-master/examples/js/controls/OrbitControls.js"></script><script src="../three.js-master/examples/js/loaders/GLTFLoader.js"></script><script src="../three.js-master/examples/js/loaders/OBJLoader.js"></script><script src="../three.js-master/examples/js/loaders/MTLLoader.js"></script><style type="text/css">body {margin: 0;padding: 0;overflow-y: hidden;overflow-x: hidden;}div#webgl {width: 100vw;height: 100vh;}</style><script>var renderer;function initThree() {let dom = document.getElementById("webgl");width = dom.clientWidth;height = dom.clientHeight;renderer = new THREE.WebGLRenderer({antialias: true,});renderer.setSize(width, height);dom.appendChild(renderer.domElement);renderer.setClearColor("#ffffff", 1.0);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);// camera = new THREE.OrthographicCamera( width/-2, width/2, height/2, height/-2, 1, 10000 );camera.position.x = 0;camera.position.y = 1000;camera.position.z = 0;camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;camera.lookAt({x: 0,y: 0,z: 0,});}var scene;function initScene() {scene = new THREE.Scene();}var light;function initLight() {light = new THREE.DirectionalLight(0xffffff, 1.0);light.position.set(100, 100, 200);scene.add(light);}let texture;function initObject() {let c = [100,100, //第一个点-100,100, //第二个点-100,-100,100,-100,100,100]let posArr = [];let uvrr = [];let h = 50; //围墙拉伸高度for (let i = 0; i < c.length - 2; i += 2) {// 围墙多边形上两个点构成一个直线扫描出来一个高度为h的矩形// 矩形的三角形1posArr.push(c[i], c[i + 1], 0, c[i + 2], c[i + 3], 0, c[i + 2], c[i + 3], h);// 矩形的三角形2posArr.push(c[i], c[i + 1], 0, c[i + 2], c[i + 3], h, c[i], c[i + 1], h);// 注意顺序问题，和顶点位置坐标对应uvrr.push(0, 0, 1, 0, 1, 1);uvrr.push(0, 0, 1, 1, 0, 1);}let geometry = new THREE.BufferGeometry(); //声明一个空几何体对象// 设置几何体attributes属性的位置position属性geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(posArr), 3);// 设置几何体attributes属性的位置uv属性geometry.attributes.uv = new THREE.BufferAttribute(new Float32Array(uvrr), 2);geometry.computeVertexNormals()texture = new THREE.TextureLoader().load( "./img/warning.png" );// texture = new THREE.TextureLoader().load( "./img/wall.png" );texture.repeat.set( 5, 1 );// 设置.wrapS也就是U方向，纹理映射模式(包裹模式)texture.wrapS = THREE.RepeatWrapping;//对应offste.x偏移// 设置.wrapT也就是V方向，纹理映射模式texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移let material = new THREE.MeshBasicMaterial({map: texture,color: "#FFFFFF", side: THREE.DoubleSide,transparent:true});let mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh);mesh.rotateX(-Math.PI / 2);}function threeStart() {initThree(); //初始化Three.js渲染器等初始操作initCamera(); //初始化相机initScene(); //初始化场景initLight(); //初始化灯光initControls(); //初始化控制器initObject(); //初始化渲染物体// initAxesHelper();render(); //执行渲染}function initAxesHelper() {// AxesHelper：辅助观察的坐标系(红x、绿y、蓝z)const axesHelper = new THREE.AxesHelper(1500);scene.add(axesHelper);}function initControls() {// 设置相机控件轨道控制器OrbitControlsconst controls = new THREE.OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景controls.addEventListener("change", function () {renderer.render(scene, camera); //执行渲染操作}); //监听鼠标、键盘事件}function render() {texture.offset.x -= 0.01;//设置纹理动画：偏移量根据纹理和动画需要，设置合适的值renderer.render(scene, camera);requestAnimationFrame(render);}</script>
</head><body onload="threeStart();"><div id="webgl"></div>
</body></html>

视频地址：https://www.bilibili.com/video/BV1K7BRYeEyq/

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

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

相关文章

node.js中实现MySQL的增量备份

node.js中实现MySQL的增量备份

有时候&#xff0c;我们需要对生产库进行备份&#xff0c;不要求实时性很高&#xff0c;大概每天一次就行&#xff0c;为性能考虑&#xff0c;只备份最新更改内容&#xff0c;即增量备份即可&#xff0c;这种场景下对DB的设计和备份语句有所要求。 首先要求按源表各字段定义目标…
阅读更多...
《白帽子讲Web安全》13-14章

《白帽子讲Web安全》13-14章

《白帽子讲Web安全》13-14章 《白帽子讲Web安全》13-14章13、应用层拒绝服务攻击13.1、DDOS简介13.2、应用层DDOS13.2.1、CC攻击13.2.2、限制请求频率13.2.3、道高一尺&#xff0c;魔高一丈 13.3、验证码的那些事儿13.4、防御应用层DDOS13.5、资源耗尽攻击13.5.1、Slowloris攻击…
阅读更多...
【电子元器件】Nand Flash基础介绍

【电子元器件】Nand Flash基础介绍

本文章是笔者理论结合实践进行整理的备忘笔记。希望在帮助自己温习避免遗忘的同时&#xff0c;也能帮助其他需要参考的朋友。如有谬误&#xff0c;欢迎大家进行指正。 一、什么是Nand Flash Flash主要分两种&#xff0c;Nand Flash和Nor flash。 Nor的成本相对高&#xff0c…
阅读更多...
JVM_垃圾收集器详解

JVM_垃圾收集器详解

1、 前言 JVM就是Java虚拟机&#xff0c;说白了就是为了屏蔽底层操作系统的不一致而设计出来的一个虚拟机&#xff0c;让用户更加专注上层&#xff0c;而不用在乎下层的一个产品。这就是JVM的跨平台&#xff0c;一次编译&#xff0c;到处运行。 而JVM中的核心功能其实就是自动…
阅读更多...
python除了熟悉的pandas，openpyxl库也很方便的支持编辑Excel表

python除了熟悉的pandas，openpyxl库也很方便的支持编辑Excel表

excel表格是大家经常用到的文件格式&#xff0c;各行各业都会跟它打交道。之前文章我们介绍了使用openpyxl和xlrd库读取excel表数据&#xff0c;使用xlwt库创建和编辑excel表&#xff0c;在办公自动化方面可以方便我们快速处理数据&#xff0c;帮助我们提升效率。 python之open…
阅读更多...
网络知识1-TCP/IP模型

网络知识1-TCP/IP模型

从用户端到服务端&#xff0c;tcp/ip模型可分为应用层、传输层、网络层、网络接口层 以下使用寄快递为例进行解释 应用层职责&#xff1a; 只关注与为用户提供应用功能&#xff0c;如HTTP、FTP、telnet、DNS、SMTP等 &#xff0c;应用层的职责就像我们寄快递时将快递给快递员…
阅读更多...
机器学习（二十五）：决策树算法以及决策树和神经网络的对比

机器学习（二十五）：决策树算法以及决策树和神经网络的对比

一、决策树集合 单一决策树会对训练数据的变化很敏感。例子&#xff1a;输入十个数据&#xff0c;判断是否是猫。只替换其中一个数据&#xff0c;信息增益最高的分裂特征就发生了改变&#xff0c;决策树就发生了变化。 使用决策树集合可以使算法更加健壮。例子&#xff1a;使用…
阅读更多...
通俗理解人工智能、机器学习和深度学习的关系

通俗理解人工智能、机器学习和深度学习的关系

最近几年人工智能成为极其热门的概念和话题&#xff0c;可以说彻底出圈了。但人工智能的概念在1955年就提出来了&#xff0c;可以说非常古老。我在上小学的时候《科学》课本上就有人工智能的概念介绍&#xff0c;至今还有印象&#xff0c;但那些年AI正处于“寒冬”&#xff0c;…
阅读更多...
CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标

CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标

注&#xff1a;本文为 “CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标” 几篇相关文章合辑。 文章中部分超链接、图片异常受引用之前的原文所限。 相机自动对焦原理 TriumphRay 于 2020-01-16 18:59:41 发布 凸透镜成像原理 这一部分大家中学应该就学过…
阅读更多...
ms-hot29 解码方法

ms-hot29 解码方法

leetcode原题链接: 解码方法 ms-hot目录: ​​​​​​ ms-hot目录 上一篇&#xff1a;ms-hot28 合并两个有序数组 下一篇&#xff1a;二叉树的中序遍历 题目描述 一条包含字母 A-Z 的消息通过以下映射进行了 编码 &#xff1a; "1" -> A "2"…
阅读更多...
Qt中QSpinBox valueChanged 信号触发两次

Qt中QSpinBox valueChanged 信号触发两次

Qt中QSpinBox valueChanged 信号触发两次 如果使用鼠标调整&#xff0c;这个信号则会被触发两次如果使用键盘输入&#xff0c;则会触发一次 connect(ui->spinBox_rows, SIGNAL(valueChanged(int)), this, SLOT(test()));https://blog.csdn.net/dododododoooo/article/deta…
阅读更多...
c++的虚继承说明、案例、代码

c++的虚继承说明、案例、代码

虚继承的基本概念 在 C 中&#xff0c;虚继承主要用于解决多继承时可能出现的菱形继承问题。菱形继承是指一个类有两个&#xff08;或更多&#xff09;子类&#xff0c;而这两个子类又同时继承自一个共同的基类&#xff0c;当这些子类又被另一个类继承时&#xff0c;就形成了菱…
阅读更多...
Mysql误删表中数据与误删表的恢复方法

Mysql误删表中数据与误删表的恢复方法

查看数据库是否开启binlog日志 mysql> show variables like %log_bin%; ------------------------------------------------------------------------ | Variable_name | Value | ------------------------------------…
阅读更多...
ZYNQ试用于哪些场景

ZYNQ试用于哪些场景

ZYNQ系列SoC&#xff08;System on Chip&#xff09;由于其独特的处理器与FPGA&#xff08;可编程逻辑&#xff09;集成设计&#xff0c;非常适合应用于多种需要高性能、灵活性和低功耗的场景。 以下是一些ZYNQ特别适用的场景&#xff1a; 嵌入式系统&#xff1a;ZYNQ的ARM处理…
阅读更多...
文件上传upload-labs-docker通关

文件上传upload-labs-docker通关

&#xff08;图片加载不出&#xff0c;说明被和谐了&#xff09; 项目一&#xff1a; sqlsec/ggctf-upload - Docker Image | Docker Hub 学习过程中,可以对照源码进行白盒分析. 补充&#xff1a;环境搭建在Linux虚拟机上的同时&#xff0c;以另一台Windows虚拟机进行测试最…
阅读更多...
Linux的介绍及虚拟机centOS系统的下载与应用

Linux的介绍及虚拟机centOS系统的下载与应用

1、什么是Linux Linux 是一种类 Unix 操作系统&#xff0c;它的内核&#xff08;Kernel&#xff09;由 Linus Torvalds 于 1991 年首次发布。作为一个开源、免费的操作系统&#xff0c;Linux 被广泛用于服务器、桌面计算机、嵌入式设备、移动设备等各种场景。 1、操作系统 操…
阅读更多...
如何在 Ubuntu 22.04 上安装 Metabase 数据可视化分析工具

如何在 Ubuntu 22.04 上安装 Metabase 数据可视化分析工具

简介 Metabase 提供了一个简单易用的界面&#xff0c;让你能够轻松地对数据进行探索和分析。通过本文的指导&#xff0c;你将能够在 Ubuntu 22.04 系统上安装并配置 Metabase&#xff0c;并通过 Nginx 进行反向代理以提高安全性。本教程假设你已经拥有了一个非 root 用户&…
阅读更多...
spring +fastjson 的 rce

spring +fastjson 的 rce

前言 众所周知&#xff0c;spring 下是不可以上传 jsp 的木马来 rce 的&#xff0c;一般都是控制加载 class 或者 jar 包来 rce 的&#xff0c;我们的 fastjson 的高版本正好可以完成这些&#xff0c;这里来简单分析一手 环境搭建 <dependency><groupId>org.spr…
阅读更多...
js 高亮文本中包含的关键词标红

js 高亮文本中包含的关键词标红

在开发中&#xff0c;遇到需要将文本中包含的关键字高亮的情况&#xff0c;可以做以下处理。 <div class"title"v-html"highlightKeywords(item.title, state1.tags1.concat(state2.tags2).concat(state3.tags3))"> </div> ...... ...... con…
阅读更多...
如何使用MySQL实现多租户架构：设计与实现全解析

如何使用MySQL实现多租户架构：设计与实现全解析

项目背景 在现代SaaS&#xff08;软件即服务&#xff09;应用中&#xff0c;多租户架构是一种常见的设计模式。多租户架构能够让多个客户&#xff08;租户&#xff09;共享同一个应用实例和数据库资源&#xff0c;而不会相互干扰。在实际的业务场景中&#xff0c;采用多租户架…
阅读更多...
最新文章

Copyright @ 2022~2023