当前位置： 首页 > news >正文

学习threejs，使用canvas更新纹理

news 2025/7/18 19:35:10

👨‍⚕️ 主页： 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更新纹理

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️Texture 贴图 二、&#x1…...

编程日记 2024/12/5 13:25:58

【笔记2-3】ESP32 bug：PSRAM chip not found or not supported 没有外部PSRAM问题解决

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…...

编程日记 2024/12/5 13:24:57

大数据hadoop、spark、flink、kafka发展的过程

将sql 代发翻译成java 程序 将python 程序通过pyspark框架翻译成java 程序&#xff0c;然后运行在spark计算框架上...

编程日记 2024/12/5 13:22:54

设计模式-理论基础

理论基础 一、代码质量指标1.可维护性&#xff08;maintainability&#xff09;2.可读性&#xff08;readability&#xff09;3.可扩展性&#xff08;extensibility&#xff09;4.灵活性&#xff08;flexibility&#xff09;5.简洁性&#xff08;simplicity&#xff09;6.可复用…...

编程日记 2024/12/5 13:20:53

猎板 PCB特殊工艺：铸就电子行业核心竞争力新高度

在当今竞争激烈且技术驱动的电子制造领域&#xff0c;印制电路板&#xff08;PCB&#xff09;作为电子产品的关键基石&#xff0c;其特殊工艺的发展水平直接影响着整个行业的创新步伐与产品品质。猎板 PCB 凭借在厚铜板、孔口铺铜、HDI 板、大尺寸板以及高频高速板等特殊工艺方…...

编程日记 2024/12/5 13:18:51

用于目标检测的集中式特征金字塔

摘要 https://arxiv.org/pdf/2210.02093 视觉特征金字塔在多种应用中已展现出其在有效性和效率方面的优越性。然而，现有方法过度关注层间特征交互，却忽略了经验证明有益的层内特征调节。尽管一些方法试图借助注意力机制或视觉变换器来学习紧凑的层内特征表示，但它们忽略了…...

编程日记 2024/12/5 13:16:48

大舍传媒-关于海外媒体宣发的探讨

关于海外媒体宣发的探讨 一、海外媒体宣发的重要性 在当今全球化的时代&#xff0c;海外媒体宣发对于企业、组织和个人来说具有至关重要的意义。通过有效的海外媒体宣发&#xff0c;可以提升品牌知名度&#xff0c;拓展国际市场&#xff0c;增强影响力&#xff0c;吸引更多的潜…...

编程日记 2024/12/5 13:14:46

Python从入门到入狱

Python是从入门到入狱&#xff1f;这个充满调侃意味的说法在程序员圈子里流传甚广。表面看&#xff0c;它似乎是在嘲笑这门语言从简单易学到深陷麻烦的巨大反差&#xff0c;实际上却隐藏着很多值得深思的问题。要解读这个话题&#xff0c;得从Python的特点、使用场景以及潜在风…...

编程日记 2024/12/5 13:12:44

AMEYA360 | 杭晶电子：晶振在AR/VR中的应用

晶振在AR/VR设备中扮演重要角色&#xff0c;为其核心电子系统提供稳定的时钟信号&#xff0c;确保设备的高性能运行。 以下是晶振在AR/VR应用中的具体作用&#xff1a; 01、图像处理与同步 1、晶振为图形处理单元(GPU)和显示芯片提供精准的时钟信号&#xff0c;支持高速图像渲染…...

编程日记 2024/12/5 13:09:42

RAG评估指南：从检索到生成，全面解析LLM性能评估方法

前言 这一节我们将从时间线出发对RAG的评估方式进行对比&#xff0c;这些评估方式不仅限于RAG流程之中&#xff0c;其中基于LLM的评估方式更加适用于各行各业。 RAG常用评估方式 上一节我们讲了如何用ROUGE 这个方法评估摘要的相似度&#xff0c;由于篇幅限制&#xff0c;没…...

编程日记 2024/12/5 13:08:41

贪心算法实例-问题分析（C++）

贪心算法实例-问题分析 饼干分配问题 有一群孩子和一堆饼干&#xff0c;每个小孩都有一个饥饿度&#xff0c;每个饼干都有一个能量值&#xff0c;当饼干的能量值大于等于小孩的饥饿度时&#xff0c;小孩可以吃饱&#xff0c;求解最多有多少个孩子可以吃饱?(注:每个小孩只能吃…...

编程日记 2024/12/5 13:05:38

Ubuntu20.04 配置虚拟显示器和切回物理显示器

1、安装软件&#xff0c;用中软安装虚拟显示器软件 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 …...

编程日记 2024/12/5 13:02:34

HTML 常用标签属性汇总一〈body〉标签

背景属性：包括：bgcolor，background <body background—color:black〉 背景颜色 <body background—image : url（image/bg.gif）〉 背景图片 <body background—attachment ： fixed〉 固定背景 〈body background—repeat : repeat〉 重复排列—网页预设 〈b…...

编程日记 2024/12/5 13:00:32

Python yield关键字

1、什么是yield关键字 yield 是 Python 中的一个关键字&#xff0c;它用于定义生成器函数。生成器是一种特殊的迭代器&#xff0c;它可以在遍历过程中逐步产生值&#xff0c;而不是一次性生成所有值并将其存储在内存中。这使得生成器非常适合处理大量数据或无限序列&#xff0…...

编程日记 2024/12/5 12:58:30

tomcat的Mysql链接字符串问题

tomcat配置mysql链接需要改server.xml或content.xml。 但是server.xml或content.xml中mysql的配置看起来很古怪: url"jdbc:mysql://10.21.0.6:3306/hrdatabase?characterEncodinggbk&amp;autoReconnecttrue" 而使用springboot开发java应用&#xff0c;使用ya…...

编程日记 2024/12/5 12:56:28

聊聊JVM G1（Garbage First）垃圾收集器

CMS的垃圾回收机制&#xff0c;为什么分为四步https://blog.csdn.net/genffe880915/article/details/144205658说完CMS垃圾回收器&#xff0c;必定要说到目前一般应用项目中都推荐的G1。G1在JDK1.7 update4时引入&#xff0c;在JDK9时取代CMS成为默认的垃圾收集器。它是HotSpot…...

编程日记 2024/12/5 12:54:26

【论文复现】隐式神经网络实现低光照图像增强

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 隐式神经网络实现低光照图像增强 引言那么目前低光照图像增强还面临哪些挑战呢&#xff1f; 挑战1. 不可预测的亮度降低和噪声挑战2.度量友好…...

编程日记 2024/12/5 12:53:25

Python知识分享第十九天-网络编程

网络编程 概述用来实现 网络互联 不同计算机上运行的程序间可以进行数据交互也叫Socket编程 套接字编程 三要素IP地址概述设备在网络中的唯一标识分类IPV4城域网13广域网22局域网31IPV6八字节 十六进制相关dos命令查看ipwindows: ipconfigmac和linux: ifconfig测试网络ping 域…...

编程日记 2024/12/5 12:52:25

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…...

编程日记 2024/12/5 12:49:21

Centos 8 服务器时间校正

Centos 8 服务器时间校正 使用chrony服务自动同步时间&#xff1a; 1.安装chrony&#xff1a; sudo dnf install chrony 2.启动并使chrony服务自动启动&#xff1a; sudo systemctl start chronyd sudo systemctl enable chronyd 3.添加配置置文件/etc/chrony.conf指向了可靠…...

编程日记 2024/12/5 12:47:19

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/25 2:07:42

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/7/17 22:04:36

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/7/17 23:01:16

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/7/13 7:16:00

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/7/18 7:44:20

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/7/8 17:57:05

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/6/16 12:37:53

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/7/12 13:46:11

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/7/6 8:20:01

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/7/16 3:32:21