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

学习threejs，使用canvas更新纹理

news 2026/4/3 12:21:18

👨‍⚕️ 主页： 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 贴图二、&#x1…...

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

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

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

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

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

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

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

设计模式-理论基础

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

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

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

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

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

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

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

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

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

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

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

Python从入门到入狱

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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 中的一个关键字，它用于定义生成器函数。生成器是一种特殊的迭代器，它可以在遍历过程中逐步产生值，而不是一次性生成所有值并将其存储在内存中。这使得生成器非常适合处理大量数据或无限序列&#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&autoReconnecttrue" 而使用springboot开发java应用，使用ya…...

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

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

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

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

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

📝个人主页🌹：Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 隐式神经网络实现低光照图像增强引言那么目前低光照图像增强还面临哪些挑战呢？ 挑战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服务自动同步时间： 1.安装chrony： sudo dnf install chrony 2.启动并使chrony服务自动启动： sudo systemctl start chronyd sudo systemctl enable chronyd 3.添加配置置文件/etc/chrony.conf指向了可靠…...

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

单克隆抗体如何被制备并应用于疾病治疗？

一、什么是单克隆抗体？其与多克隆抗体有何区别？单克隆抗体（Monoclonal Antibody，mAb）是指由单一B淋巴细胞克隆所产生的高度均一、仅针对某一特定抗原表位进行识别的抗体。这类抗体具有高度特异性。与之相对的是多克隆抗…...

编程新知 2026/4/3 11:52:10

GLM-4.1V-9B-Base效果展示：书法作品字体+内容+文化内涵中文解析

GLM-4.1V-9B-Base效果展示：书法作品字体内容文化内涵中文解析 1. 模型能力概览 GLM-4.1V-9B-Base是智谱开源的视觉多模态理解模型，在中文视觉理解任务上表现出色。不同于常规的图片识别工具，这款模型能够深入理解图像中的文化元素&#xff…...

编程新知 2026/4/3 11:07:43

学习Spring Ai的摸索实践

摸索AI（一）安装Ollama和本地大模型部署https://www.chendd.cn/blog/article/2012500757664628737.html摸索AI（二）Spring AI实现的Hello Worldhttps://www.chendd.cn/blog/article/2013071822723874817.html 摸索AI（三…...

编程新知 2026/4/3 10:41:31

3步搞定PDF处理难题：Windows版Poppler让文档操作变得如此简单

3步搞定PDF处理难题：Windows版Poppler让文档操作变得如此简单【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 您是否经常需要从PDF文件…...

编程新知 2026/4/3 10:21:10

别再对着文档发愁了！手把手教你读懂并配置StrongSwan的ipsec.conf文件

从零到精通：StrongSwan的ipsec.conf实战配置指南第一次打开ipsec.conf文件时，那些密密麻麻的参数确实让人望而生畏。作为一款功能强大的IPsec实现，StrongSwan的配置文件看似复杂，实则遵循着清晰的逻辑结构。本文将带你从实际应用…...

编程新知 2026/4/3 10:15:05

2026年成都上门回收黄金新趋势：安全便捷更放心

随着经济的发展和人们生活水平的提高，黄金作为一种重要的投资和保值手段，越来越受到人们的青睐。然而，在黄金回收的过程中，用户常常面临诸多痛点，如价格不透明、流程复杂、门店选择困难等。为了解决这些问题&#xff0…...

编程新知 2026/4/3 9:56:57

如何分析和改善网站的SEO效果

如何分析和改善网站的SEO效果在当今互联网时代，一个优秀的网站不仅需要内容丰富，还需要有良好的搜索引擎优化（SEO）效果。SEO是提升网站在搜索引擎中排名的关键手段，本文将详细探讨如何分析和改善网站的SEO效果&#…...

编程新知 2026/4/3 9:12:03

如何高效管理百度网盘文件：自动化批量转存与分享的完整指南

如何高效管理百度网盘文件：自动化批量转存与分享的完整指南【免费下载链接】BaiduPanFilesTransfers 百度网盘批量转存、分享和检测工具项目地址: https://gitcode.com/gh_mirrors/ba/BaiduPanFilesTransfers 在数字资源日益丰富的今天，百度网盘…...

编程新知 2026/4/3 8:47:28

如何在Windows部署Claude Code？保姆级教程

🧠 什么是 Claude Code？ Claude Code 是 Anthropic 推出的一个命令行编程助手（CLI AI Agent）。你可以理解为： “代码 Agent 大模型本地执行能力” 简单来说就是 Claude（大脑） Terminal…...

编程新知 2026/4/3 7:14:16

YOLO X Layout快速部署：Docker一键启动，开箱即用

YOLO X Layout快速部署：Docker一键启动，开箱即用 1. 简介与核心价值你是否经常需要处理大量文档图片，却苦于手动标注各种元素区域？YOLO X Layout正是为解决这个问题而生的智能工具。它能自动识别文档中的文本、表格、图片、标题…...

编程新知 2026/4/3 6:43:51

学习threejs，使用canvas更新纹理

文章目录

一、🍀前言

1.1 ☘️Texture 贴图

二、🍀使用canvas更新纹理

1. ☘️实现思路

2. ☘️代码样例

相关文章：

学习threejs，使用canvas更新纹理

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

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

设计模式-理论基础

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

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

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

Python从入门到入狱

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

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

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

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

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

Python yield关键字

tomcat的Mysql链接字符串问题

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

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

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

C# 绘制GDI红绿灯控件

Centos 8 服务器时间校正

单克隆抗体如何被制备并应用于疾病治疗？

GLM-4.1V-9B-Base效果展示：书法作品字体+内容+文化内涵中文解析

学习Spring Ai的摸索实践

3步搞定PDF处理难题：Windows版Poppler让文档操作变得如此简单

别再对着文档发愁了！手把手教你读懂并配置StrongSwan的ipsec.conf文件

2026年成都上门回收黄金新趋势：安全便捷更放心

如何分析和改善网站的SEO效果

如何高效管理百度网盘文件：自动化批量转存与分享的完整指南

如何在Windows部署Claude Code？保姆级教程

YOLO X Layout快速部署：Docker一键启动，开箱即用