three.js 在 webGL 添加纹理
在我们生成了3D设计之后，我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中，可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。
使用 webGL
在 webGL 中，gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参数，包括目标，细节级别，内部格式，图像的宽度和高度，以及图像数据的格式和类型。
为了方便，我将使用 vite 搭建一个原生 js 项目。
1.创建项目
npm create vite@latest p5-demo
选：Vanilla
选：JavaScript
2.初始化项目
cd p5-demo
cnpm install
3.安装 p5.js
cnpm install p5 --save
cd p5-demo
curl -O https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js
编写 three_texture.html 如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="three.min.js"></script>
</head>
<body><script>// curl -O https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js// Set up the scenevar scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1, 1000);var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// Create a cubevar geometry = new THREE.BoxGeometry(3, 3, 3);//// 随意选一个.jpg 文件作为纹理图像var texture = new THREE.TextureLoader().load("./海边.jpg");var material = new THREE.MeshBasicMaterial({ map: texture });var cube = new THREE.Mesh(geometry, material);scene.add(cube);// Position the cameracamera.position.z = 5; // Render the scenefunction render() {requestAnimationFrame(render);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}render();</script>
</body>
</html>
5.运行 npm run dev
访问 http://localhost:5173/three_texture.html
在 p5.js 中使用 texture() 函数可以将纹理应用到一个对象上。texture() 函数接受一个参数：纹理图像文件。
编写 p5_texture.html 如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5.js Texture Example</title><script src="p5.min.js"></script>
</head>
<body><script>let img;function preload() { img = loadImage("./海边.jpg");}function setup() {createCanvas(650, 400, WEBGL);noStroke();}function draw() {background(200);texture(img);rotateX(frameCount * 0.01);rotateY(frameCount * 0.01);box(100);}</script>
</body>
</html>
访问 http://localhost:5173/p5_texture.html
可见同样的程序 p5.js 的代码量比 three.js 和 python 都要少。
相关文章：
three.js 在 webGL 添加纹理
在我们生成了3D设计之后，我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中，可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。 使用 webGL 在 webGL 中，gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参…...
【5】单调队列学习笔记
前言 鸽了很久， 2023 / 1 / 5 2023/1/5 2023/1/5 开始， 2023 / 1 / 21 2023/1/21 2023/1/21 才完工。 中途去集训了，没时间来补漏洞。 单调队列 单调队列是一种非常实用的数据结构，可以用于查询一个定长区间在以一定速度向后滑…...
deepseek为什么要开源
一、生态位的抢占与锁定：以 JDK 版本为例 在软件开发的世界里，生态位的抢占和先入为主的效应十分显著。就拿 Java 开发中的 JDK 版本来说，目前大多数开发者仍在广泛使用 JDK8。尽管 JDK17 和 JDK21 已经推出，且具备更多先进特性…...
MySQL基本建表操作
目录 1，创建数据库db_ck 1.1创建表 1.2 查看创建好的表 2,创建表t_hero 2.1 先进入数据库Db_Ck 2.1.1 这里可以看是否进入数据库: 2.2 创建表t_Hero 2.2.1 我们可以先在文本文档里面写好然后粘贴进去，因为直接写的话，错了要重新开始 …...
防火墙旁挂组网双机热备负载均衡
一，二层交换网络： 使用MSTPVRRP组网形式 VLAN 2--->SW3为主,SW4 作为备份 VLAN 3--->SW4为主,SW3 作为备份 MSTP 设计 --->SW3 、 4 、 5 运行 实例 1 ： VLAN 2 实例 2 ： VLAN 3 SW3 是实例 1 的主根，实…...
大白话react第十八章React 与 WebGL 项目的高级拓展与优化
大白话react第十八章React 与 WebGL 项目的高级拓展与优化 1. 实现 3D 模型的导入与动画 在之前的基础上，我们可以导入更复杂的 3D 模型，并且让这些模型动起来，就像在游戏里看到的角色和场景一样。这里我们使用 GLTF 格式的模型，…...
JavaScript系列06-深入理解 JavaScript 事件系统：从原生事件到 React 合成事件
JavaScript 事件系统是构建交互式 Web 应用的核心。本文从原生 DOM 事件到 React 的合成事件，内容涵盖： JavaScript 事件基础：事件类型、事件注册、事件对象事件传播机制：捕获、目标和冒泡阶段高级事件技术：事件委托、…...
C++：string容器（下篇）
1.string浅拷贝的问题 // 为了和标准库区分，此处使用String class String { public :/*String():_str(new char[1]){*_str \0;}*///String(const char* str "\0") // 错误示范//String(const char* str nullptr) // 错误示范String(const char* str …...
2.数据结构-栈和队列
数据结构-栈和队列 2.1栈2.1.1栈的表示和实现2.1.2栈的应用举例数制转换括号匹配检验迷宫给求解表达式求值 2.1.3链栈的表示和实现2.1.4栈与递归的实现遍历输出链表中各个结点的递归算法*Hanoi塔问题的递归算法 2.2队列2.2.1循环队列——队列的顺序表示和实现2.2.2链队——队列…...
aws(学习笔记第三十一课) aws cdk深入学习（batch-arm64-instance-type）
aws(学习笔记第三十一课) aws cdk深入学习 学习内容： 深入练习aws cdk下部署batch-arm64-instance-type 1. 深入练习aws cdk下部署batch-arm64-instance-type 代码链接 代码链接 代码链接 -> batch-arm64-instance-type之前代码学习 之前学习代码链接 -> aw…...
MySQL 中，SELECT ... FOR UPDATE
在 MySQL 中，SELECT ... FOR UPDATE 语句会对查询结果集中的行加排他锁（X 锁）。关于其他事务是否能读取当前行，以下是详细说明： 1. 排他锁（X 锁）的特性 排他锁是一种独占锁，加锁后&…...
云服务运维智能时代：阿里云操作系统控制台
阿里云操作系统控制台 引言需求介绍操作系统使用实例获得的帮助与提升建议 引言 阿里云操作系统控制台是一款创新型云服务器运维工具，专为简化用户的运维工作而设计。它采用智能化和可视化的方式，让运维变得更加高效、直观。借助AI技术，控制…...
【Agent的革命之路——LangGraph】如何使用config
有时我们希望在调用代理时能够对其进行配置。这包括配置使用哪个语言模型（LLM）等例子。下面我们将通过一个示例来详细介绍如何进行这样的配置。 在介绍 configurable 之前我们先介绍一下 Langchain 的 RunnableConfig。RunnableConfig是一个配置对象&…...
ArcGIS操作：15 计算点的经纬度，并添加到属性表
注意：需要转化为地理坐标系 1、打开属性表，添加字段 2、计算字段（以计算纬度为例 !Shape!.centroid.Y ) 3、效果...
Docker基础入门
第 1 章：核心概念与安装配置 本章首先介绍Docker 的三大核心概念： 镜像 (Image)容器（Container)仓库（Repository） 只有理解了这三个核心概念，才能顺利地理解Docker容器的整个生命周期。 随后࿰…...
【Linux】详谈 基础I/O
目录 一、理解文件 狭义的理解： 广义理解： 文件操作的归类认知 系统角度 二、系统文件I/O 2.1 标志位的传递 系统级接口open 编辑 open返回值 写入文件 读文件 三、文件描述符 3.1（0 & 1 & 2） 3.2 文件描…...
爬虫案例七Python协程爬取视频
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、Python协程爬取视频 前言 提示：这里可以添加本文要记录的大概内容： 爬虫案例七协程爬取视频 提示：以下是本篇文章正文…...
[20250304] 关于 RISC-V芯片 的介绍
[20250304] 关于 RISC-V芯片 的介绍 1. 调研报告 一、RISC-V 芯片结构分析 RISC-V 芯片基于开源指令集架构（ISA），其核心优势在于模块化设计与高度灵活性。 指令集架构 基础指令集：包含 RV32I（32 位）、R…...
一学就会：A*算法详细介绍（Python）
📢本篇文章是博主人工智能学习以及算法研究时，用于个人学习、研究或者欣赏使用，并基于博主对相关等领域的一些理解而记录的学习摘录和笔记，若有不当和侵权之处，指出后将会立即改正，还望谅解。文章分类在&am…...
Hadoop、Hive、Spark的关系
Part1：Hadoop、Hive、Spark关系概览 1、MapReduce on Hadoop 和spark都是数据计算框架，一般认为spark的速度比MR快2-3倍。 2、mapreduce是数据计算的过程，map将一个任务分成多个小任务，reduce的部分将结果汇总之后返回。 3、HIv…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...