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，一经查实，立即删除！

相关文章

《白帽子讲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 发布 凸透镜成像原理 这一部分大家中学应该就学过…
阅读更多...
文件上传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…
阅读更多...
从迭代器到生成器:小内存也能处理大数据

从迭代器到生成器:小内存也能处理大数据

有的对象可以用for循环比如字符串和列表,有的对象不可以比如整数 my_str 123 for s in my_str;print(s)my_lst [1,2,3] for i in my_lst:print(i)my_int 123 for n in my_int:print(n) # 报错python中能够使用for循环迭代的对象叫可迭代对象也叫iterables iterables包含__i…
阅读更多...
第29天：安全开发-JS应用DOM树加密编码库断点调试逆向分析元素属性操作

第29天：安全开发-JS应用DOM树加密编码库断点调试逆向分析元素属性操作

时间轴&#xff1a; 演示案例&#xff1a; JS 原生开发-DOM 树-用户交互 DOM&#xff1a;文档操作对象 浏览器提供的一套专门用来操作网页代码内容的功能&#xff0c;实现自主或用户交互动作反馈 安全问题&#xff1a;本身的前端代码通过 DOM 技术实现代码的更新修改&#xff…
阅读更多...
“蜀道山”高校联合公益赛 Web (部分)

“蜀道山”高校联合公益赛 Web (部分)

文章目录 奶龙牌WAF海关警察训练平台恶意代码检测器 奶龙牌WAF <?php if ($_SERVER[REQUEST_METHOD] POST && isset($_FILES[upload_file])) {$file $_FILES[upload_file];if ($file[error] UPLOAD_ERR_OK) {$name isset($_GET[name]) ? $_GET[name] : basen…
阅读更多...
docker-compose搭建xxl-job、mysql

docker-compose搭建xxl-job、mysql

docker-compose搭建xxl-job、mysql 1、搭建docker以及docker-compose2、下载xxl-job需要数据库脚本3、创建文件夹以及docker-compose文件4、坑来了5、正确配置6、验证-运行成功 1、搭建docker以及docker-compose 略 2、下载xxl-job需要数据库脚本 下载地址&#xff1a;https…
阅读更多...
XML JSON

XML JSON

XML 与 JSON 结构 XML&#xff08;eXtensible Markup Language&#xff09; 1. 定义 XML 是一种标记语言&#xff0c;用于描述数据的结构和内容。主要用于数据存储与交换。 2. 特点 可扩展性&#xff1a;用户可以自定义标签。层次化结构&#xff1a;数据以树形结构组织&…
阅读更多...
【Innodb阅读笔记】之 二进制文件应用，主从复制搭建

【Innodb阅读笔记】之 二进制文件应用，主从复制搭建

一、概述 MySQL的主从复制&#xff08;Master-Slave Replication&#xff09;是一种数据复制解决方案&#xff0c;将主数据库的DDL和DML操作通过二进制日志传到从库服务器中&#xff0c;然后在从库上对这些日志重新执行&#xff08;也叫重做&#xff09;&#xff0c;从而是的从…
阅读更多...
如何制作项目网页

如何制作项目网页

一、背景 许多论文里经常会有这样一句话Supplementary material can be found at https://hri-eu.github.io/Lami/&#xff0c;这个就是将论文中的内容或者补充视频放到一个网页上&#xff0c;以更好的展示他们的工作。因此&#xff0c;这里介绍下如何使用前人提供的模板制作我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023