学习threejs，使用canvas更新纹理
👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️Texture 贴图
- 二、🍀使用canvas更新纹理
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中使用canvas更新纹理，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️Texture 贴图
创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。
构造函数：
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )
常用属性：
方法：
二、🍀使用canvas更新纹理
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene，创建THREE.CubeTextureLoader立方体纹理加载器cubeTextureLoader，加载cubeTextureLoader的六个方位的图片获取纹理对象cubeTexture，scene背景background设置为cubeTexture。
- 3、创建id为‘surface’的canvas页面元素火焰然后动画，并执行。具体实现参考下面代码样例。
- 4、初始化camera相机，定义相机位置 camera.position.set
- 5、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
- 6、加载几何模型：创建THREE.AxesHelper坐标辅助工具helper，scene场景中加入helper。创建THREE.BoxGeometry立方体几何体geometry，创建THREE.MeshBasicMaterial基础材质material，material设置map贴图（为步骤3canvas元素）、水平和垂直贴图包裹，传入geometry和material创建THREE.Mesh网格对象，scene中加入创建的网格对象。
- 7、加入controls控制，加入stats监控器，监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn60(使用CANVAS更新纹理)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script><script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}#surface {position: fixed;left: 0;bottom: 0;}
</style>
<body onload="draw()">
<canvas id="surface"></canvas>
</body>
<script>var renderer, camera, scene, gui, light, stats, controls//引入一个canvas动画function initCanvas() {$(document).ready(function () {// Set canvas drawing surfacevar space = document.getElementById("surface")var surface = space.getContext("2d")surface.scale(1, 1)// Set Particlesvar particles = []var particle_count = 150for (var i = 0; i < particle_count; i++) {particles.push(new particle())}var time = 0// Set wrapper and canvas items sizevar canvasWidth = 480var canvasHeight = 480$(".wrapper").css({width: canvasWidth, height: canvasHeight})$("#surface").css({width: canvasWidth, height: canvasHeight})// shim layer with setTimeout fallback from Paul Irishwindow.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 6000 / 60)}})()function particle() {this.speed = {x: -1 + Math.random() * 2, y: -5 + Math.random() * 5}canvasWidth = (document.getElementById("surface").width)canvasHeight = (document.getElementById("surface").height)this.location = {x: canvasWidth / 2, y: (canvasHeight / 2) + 35}this.radius = .5 + Math.random() * 1this.life = 10 + Math.random() * 10this.death = this.lifethis.r = 255this.g = Math.round(Math.random() * 155)this.b = 0}function ParticleAnimation() {surface.globalCompositeOperation = "source-over"surface.fillStyle = "black"surface.fillRect(0, 0, canvasWidth, canvasHeight)surface.globalCompositeOperation = "lighter"for (var i = 0; i < particles.length; i++) {var p = particles[i]surface.beginPath()p.opacity = Math.round(p.death / p.life * 100) / 100var gradient = surface.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius)gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")")gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")")gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)")surface.fillStyle = gradientsurface.arc(p.location.x, p.location.y, p.radius, Math.PI * 2, false)surface.fill()p.death--p.radius++p.location.x += (p.speed.x)p.location.y += (p.speed.y)//regenerate particlesif (p.death < 0 || p.radius < 0) {//a brand new particle replacing the dead oneparticles[i] = new particle()}}requestAnimFrame(ParticleAnimation)}ParticleAnimation()})}var initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xeeeeee)renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled = truerenderer.setPixelRatio(window.devicePixelRatio)document.body.appendChild(renderer.domElement)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 0, 15)}var initScene = () => {var cubeTextureLoader = new THREE.CubeTextureLoader()cubeTextureLoader.setPath('data/texture/skybox/space/')var cubeTexture = cubeTextureLoader.load(['right.jpg', 'left.jpg','top.jpg', 'bottom.jpg','front.jpg', 'back.jpg'])scene = new THREE.Scene()scene.background = cubeTexture}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var geometry = new THREE.BoxBufferGeometry(5, 5, 5)var canvas = $('#surface')[0]var texture = new THREE.Texture(canvas)material = new THREE.MeshBasicMaterial({map: texture})scene.add(new THREE.Mesh(geometry, material))}var initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {material.map.needsUpdate = truerenderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {if(!Detector.webgl)Detector.addGetWebGLMessage()initCanvas()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>
效果如下：
相关文章：
学习threejs，使用canvas更新纹理
👨⚕️ 主页： gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏：threejs gis工程师 文章目录 一、🍀前言1.1 ☘️Texture 贴图 二、…...
【笔记2-3】ESP32 bug：PSRAM chip not found or not supported 没有外部PSRAM问题解决
主要参考b站宸芯IOT老师的视频，记录自己的笔记，老师讲的主要是linux环境，但配置过程实在太多问题，就直接用windows环境了，老师也有讲一些windows的操作，只要代码会写，操作都还好，开发…...
大数据hadoop、spark、flink、kafka发展的过程
将sql 代发翻译成java 程序 将python 程序通过pyspark框架翻译成java 程序，然后运行在spark计算框架上...
设计模式-理论基础
理论基础 一、代码质量指标1.可维护性（maintainability）2.可读性（readability）3.可扩展性（extensibility）4.灵活性（flexibility）5.简洁性（simplicity）6.可复用…...
猎板 PCB特殊工艺：铸就电子行业核心竞争力新高度
在当今竞争激烈且技术驱动的电子制造领域，印制电路板（PCB）作为电子产品的关键基石，其特殊工艺的发展水平直接影响着整个行业的创新步伐与产品品质。猎板 PCB 凭借在厚铜板、孔口铺铜、HDI 板、大尺寸板以及高频高速板等特殊工艺方…...
用于目标检测的集中式特征金字塔
摘要 https://arxiv.org/pdf/2210.02093 视觉特征金字塔在多种应用中已展现出其在有效性和效率方面的优越性。然而，现有方法过度关注层间特征交互，却忽略了经验证明有益的层内特征调节。尽管一些方法试图借助注意力机制或视觉变换器来学习紧凑的层内特征表示，但它们忽略了…...
大舍传媒-关于海外媒体宣发的探讨
关于海外媒体宣发的探讨 一、海外媒体宣发的重要性 在当今全球化的时代，海外媒体宣发对于企业、组织和个人来说具有至关重要的意义。通过有效的海外媒体宣发，可以提升品牌知名度，拓展国际市场，增强影响力，吸引更多的潜…...
Python从入门到入狱
Python是从入门到入狱？这个充满调侃意味的说法在程序员圈子里流传甚广。表面看，它似乎是在嘲笑这门语言从简单易学到深陷麻烦的巨大反差，实际上却隐藏着很多值得深思的问题。要解读这个话题，得从Python的特点、使用场景以及潜在风…...
AMEYA360 | 杭晶电子：晶振在AR/VR中的应用
晶振在AR/VR设备中扮演重要角色，为其核心电子系统提供稳定的时钟信号，确保设备的高性能运行。 以下是晶振在AR/VR应用中的具体作用： 01、图像处理与同步 1、晶振为图形处理单元(GPU)和显示芯片提供精准的时钟信号，支持高速图像渲染…...
RAG评估指南：从检索到生成，全面解析LLM性能评估方法
前言 这一节我们将从时间线出发对RAG的评估方式进行对比，这些评估方式不仅限于RAG流程之中，其中基于LLM的评估方式更加适用于各行各业。 RAG常用评估方式 上一节我们讲了如何用ROUGE 这个方法评估摘要的相似度，由于篇幅限制，没…...
贪心算法实例-问题分析（C++）
贪心算法实例-问题分析 饼干分配问题 有一群孩子和一堆饼干，每个小孩都有一个饥饿度，每个饼干都有一个能量值，当饼干的能量值大于等于小孩的饥饿度时，小孩可以吃饱，求解最多有多少个孩子可以吃饱?(注:每个小孩只能吃…...
Ubuntu20.04 配置虚拟显示器和切回物理显示器
1、安装软件，用中软安装虚拟显示器软件 sudo apt-get install xserver-xorg-core-hwe-18.04 sudo apt-get install xserver-xorg-video-dummy2、添加配置文件 进入 /usr/share/X11/xorg.conf.d/ 文件夹下创建xorg.conf文件 # 创建xorg.conf文件 touch xorg.conf …...
HTML 常用标签属性汇总一〈body〉标签
背景属性：包括：bgcolor，background <body background—color:black〉 背景颜色 <body background—image : url（image/bg.gif）〉 背景图片 <body background—attachment ： fixed〉 固定背景 〈body background—repeat : repeat〉 重复排列—网页预设 〈b…...
Python yield关键字
1、什么是yield关键字 yield 是 Python 中的一个关键字，它用于定义生成器函数。生成器是一种特殊的迭代器，它可以在遍历过程中逐步产生值，而不是一次性生成所有值并将其存储在内存中。这使得生成器非常适合处理大量数据或无限序列࿰…...
tomcat的Mysql链接字符串问题
tomcat配置mysql链接需要改server.xml或content.xml。 但是server.xml或content.xml中mysql的配置看起来很古怪: url"jdbc:mysql://10.21.0.6:3306/hrdatabase?characterEncodinggbk&autoReconnecttrue" 而使用springboot开发java应用，使用ya…...
聊聊JVM G1（Garbage First）垃圾收集器
CMS的垃圾回收机制，为什么分为四步https://blog.csdn.net/genffe880915/article/details/144205658说完CMS垃圾回收器，必定要说到目前一般应用项目中都推荐的G1。G1在JDK1.7 update4时引入，在JDK9时取代CMS成为默认的垃圾收集器。它是HotSpot…...
【论文复现】隐式神经网络实现低光照图像增强
📝个人主页🌹：Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 隐式神经网络实现低光照图像增强 引言那么目前低光照图像增强还面临哪些挑战呢？ 挑战1. 不可预测的亮度降低和噪声挑战2.度量友好…...
Python知识分享第十九天-网络编程
网络编程 概述用来实现 网络互联 不同计算机上运行的程序间可以进行数据交互也叫Socket编程 套接字编程 三要素IP地址概述设备在网络中的唯一标识分类IPV4城域网13广域网22局域网31IPV6八字节 十六进制相关dos命令查看ipwindows: ipconfigmac和linux: ifconfig测试网络ping 域…...
C# 绘制GDI红绿灯控件
C# 绘制GDI红绿灯控件 using System; using System.Windows.Forms; using System.Drawing;public class TrafficLightControl : Control {protected override void OnPaint(PaintEventArgs e){base.OnPaint(e);Graphics g e.Graphics;g.SmoothingMode System.Drawing.Drawin…...
Centos 8 服务器时间校正
Centos 8 服务器时间校正 使用chrony服务自动同步时间： 1.安装chrony： sudo dnf install chrony 2.启动并使chrony服务自动启动： sudo systemctl start chronyd sudo systemctl enable chronyd 3.添加配置置文件/etc/chrony.conf指向了可靠…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...