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

three.js 在 webGL 添加纹理

news 2026/3/30 13:22:38

在我们生成了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设计之后&#xff0c;我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中&#xff0c;可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。 使用 webGL 在 webGL 中&#xff0c;gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参…...

编程日记 2025/3/11 4:44:27

【5】单调队列学习笔记

前言 鸽了很久&#xff0c; 2023 / 1 / 5 2023/1/5 2023/1/5 开始&#xff0c; 2023 / 1 / 21 2023/1/21 2023/1/21 才完工。 中途去集训了&#xff0c;没时间来补漏洞。 单调队列 单调队列是一种非常实用的数据结构&#xff0c;可以用于查询一个定长区间在以一定速度向后滑…...

编程日记 2025/3/11 4:41:24

deepseek为什么要开源

一、生态位的抢占与锁定&#xff1a;以 JDK 版本为例​ 在软件开发的世界里&#xff0c;生态位的抢占和先入为主的效应十分显著。就拿 Java 开发中的 JDK 版本来说&#xff0c;目前大多数开发者仍在广泛使用 JDK8。尽管 JDK17 和 JDK21 已经推出&#xff0c;且具备更多先进特性…...

编程日记 2025/3/11 4:38:20

MySQL基本建表操作

目录 1&#xff0c;创建数据库db_ck 1.1创建表 1.2 查看创建好的表 2,创建表t_hero 2.1 先进入数据库Db_Ck 2.1.1 这里可以看是否进入数据库: 2.2 创建表t_Hero 2.2.1 我们可以先在文本文档里面写好然后粘贴进去&#xff0c;因为直接写的话&#xff0c;错了要重新开始 …...

编程日记 2025/3/11 4:36:19

防火墙旁挂组网双机热备负载均衡

一&#xff0c;二层交换网络&#xff1a; 使用MSTPVRRP组网形式 VLAN 2--->SW3为主,SW4 作为备份 VLAN 3--->SW4为主,SW3 作为备份 MSTP 设计 --->SW3 、 4 、 5 运行 实例 1 &#xff1a; VLAN 2 实例 2 &#xff1a; VLAN 3 SW3 是实例 1 的主根&#xff0c;实…...

编程日记 2025/3/11 4:35:17

大白话react第十八章React 与 WebGL 项目的高级拓展与优化

大白话react第十八章React 与 WebGL 项目的高级拓展与优化 1. 实现 3D 模型的导入与动画 在之前的基础上&#xff0c;我们可以导入更复杂的 3D 模型&#xff0c;并且让这些模型动起来&#xff0c;就像在游戏里看到的角色和场景一样。这里我们使用 GLTF 格式的模型&#xff0c…...

编程日记 2025/3/11 4:27:11

JavaScript系列06-深入理解 JavaScript 事件系统：从原生事件到 React 合成事件

JavaScript 事件系统是构建交互式 Web 应用的核心。本文从原生 DOM 事件到 React 的合成事件&#xff0c;内容涵盖&#xff1a; JavaScript 事件基础&#xff1a;事件类型、事件注册、事件对象事件传播机制&#xff1a;捕获、目标和冒泡阶段高级事件技术&#xff1a;事件委托、…...

编程日记 2025/3/11 4:24:07

C++：string容器（下篇）

1.string浅拷贝的问题 // 为了和标准库区分&#xff0c;此处使用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 …...

编程日记 2025/3/11 4:23:05

2.数据结构-栈和队列

数据结构-栈和队列 2.1栈2.1.1栈的表示和实现2.1.2栈的应用举例数制转换括号匹配检验迷宫给求解表达式求值 2.1.3链栈的表示和实现2.1.4栈与递归的实现遍历输出链表中各个结点的递归算法*Hanoi塔问题的递归算法 2.2队列2.2.1循环队列——队列的顺序表示和实现2.2.2链队——队列…...

编程日记 2025/3/11 4:21:03

aws(学习笔记第三十一课) aws cdk深入学习（batch-arm64-instance-type）

aws(学习笔记第三十一课) aws cdk深入学习 学习内容&#xff1a; 深入练习aws cdk下部署batch-arm64-instance-type 1. 深入练习aws cdk下部署batch-arm64-instance-type 代码链接 代码链接 代码链接 -> batch-arm64-instance-type之前代码学习 之前学习代码链接 -> aw…...

编程日记 2025/3/11 4:16:57

MySQL 中，SELECT ... FOR UPDATE

在 MySQL 中&#xff0c;SELECT ... FOR UPDATE 语句会对查询结果集中的行加排他锁&#xff08;X 锁&#xff09;。关于其他事务是否能读取当前行&#xff0c;以下是详细说明&#xff1a; 1. 排他锁&#xff08;X 锁&#xff09;的特性 排他锁是一种独占锁&#xff0c;加锁后&…...

编程日记 2025/3/11 4:09:49

云服务运维智能时代：阿里云操作系统控制台

阿里云操作系统控制台 引言需求介绍操作系统使用实例获得的帮助与提升建议 引言 阿里云操作系统控制台是一款创新型云服务器运维工具&#xff0c;专为简化用户的运维工作而设计。它采用智能化和可视化的方式&#xff0c;让运维变得更加高效、直观。借助AI技术&#xff0c;控制…...

编程日记 2025/3/11 4:06:46

【Agent的革命之路——LangGraph】如何使用config

有时我们希望在调用代理时能够对其进行配置。这包括配置使用哪个语言模型&#xff08;LLM&#xff09;等例子。下面我们将通过一个示例来详细介绍如何进行这样的配置。 在介绍 configurable 之前我们先介绍一下 Langchain 的 RunnableConfig。RunnableConfig是一个配置对象&…...

编程日记 2025/3/11 4:05:44

ArcGIS操作：15 计算点的经纬度，并添加到属性表

注意&#xff1a;需要转化为地理坐标系 1、打开属性表&#xff0c;添加字段 2、计算字段&#xff08;以计算纬度为例 !Shape!.centroid.Y ) 3、效果...

编程日记 2025/3/11 4:04:43

Docker基础入门

第 1 章&#xff1a;核心概念与安装配置 本章首先介绍Docker 的三大核心概念&#xff1a; 镜像 (Image)容器&#xff08;Container)仓库&#xff08;Repository&#xff09; 只有理解了这三个核心概念&#xff0c;才能顺利地理解Docker容器的整个生命周期。 随后&#xff0…...

编程日记 2025/3/11 3:59:38

【Linux】详谈 基础I/O

目录 一、理解文件 狭义的理解&#xff1a; 广义理解&#xff1a; 文件操作的归类认知 系统角度 二、系统文件I/O 2.1 标志位的传递 系统级接口open ​编辑 open返回值 写入文件 读文件 三、文件描述符 3.1&#xff08;0 & 1 & 2&#xff09; 3.2 文件描…...

编程日记 2025/3/11 3:57:35

爬虫案例七Python协程爬取视频

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python协程爬取视频 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 爬虫案例七协程爬取视频 提示&#xff1a;以下是本篇文章正文…...

编程日记 2025/3/11 3:52:30

[20250304] 关于 RISC-V芯片 的介绍

[20250304] 关于 RISC-V芯片 的介绍 1. 调研报告 一、RISC-V 芯片结构分析 RISC-V 芯片基于开源指令集架构&#xff08;ISA&#xff09;&#xff0c;其核心优势在于模块化设计与高度灵活性。 指令集架构 基础指令集&#xff1a;包含 RV32I&#xff08;32 位&#xff09;、R…...

编程日记 2025/3/11 3:50:28

一学就会：A*算法详细介绍（Python）

&#x1f4e2;本篇文章是博主人工智能学习以及算法研究时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在&am…...

编程日记 2025/3/11 3:48:26

Hadoop、Hive、Spark的关系

Part1&#xff1a;Hadoop、Hive、Spark关系概览 1、MapReduce on Hadoop 和spark都是数据计算框架&#xff0c;一般认为spark的速度比MR快2-3倍。 2、mapreduce是数据计算的过程&#xff0c;map将一个任务分成多个小任务&#xff0c;reduce的部分将结果汇总之后返回。 3、HIv…...

编程日记 2025/3/11 3:45:21

实时手机检测-通用实战案例：手机质检报告自动生成系统集成方案

实时手机检测-通用实战案例&#xff1a;手机质检报告自动生成系统集成方案 1. 引言&#xff1a;从人工质检到智能报告的跨越 想象一下&#xff0c;在一个大型手机生产线上&#xff0c;质检员每天需要手动检查成千上万张手机外观照片&#xff0c;寻找划痕、污渍、装配瑕疵。这…...

编程新知 2026/3/30 13:04:25

ChatGLM3-6B-128K在客服系统中的应用：智能回复生成

ChatGLM3-6B-128K在客服系统中的应用&#xff1a;智能回复生成 1. 引言 想象一下&#xff0c;一个繁忙的电商客服中心&#xff0c;每天要处理成千上万的客户咨询。传统的人工客服需要不断重复回答相似的问题&#xff0c;不仅效率低下&#xff0c;还容易因为疲劳而出错。现在&…...

编程新知 2026/3/30 13:02:24

FLUX.1-dev像素生成器教程：多提示词加权与逻辑组合语法详解

FLUX.1-dev像素生成器教程&#xff1a;多提示词加权与逻辑组合语法详解 1. 像素幻梦创意工坊简介 像素幻梦 (Pixel Dream Workshop) 是一款基于FLUX.1-dev扩散模型的像素艺术生成工具&#xff0c;专为创作者设计。它采用16-bit像素风格的现代明亮界面&#xff0c;提供沉浸式的…...

编程新知 2026/3/30 12:54:22

终极游戏画质升级指南：用OptiScaler解锁全显卡超采样自由

终极游戏画质升级指南&#xff1a;用OptiScaler解锁全显卡超采样自由 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler OptiScaler是…...

编程新知 2026/3/30 12:50:19

SillyTavern角色卡片系统全解析：从技术原理到实战应用

SillyTavern角色卡片系统全解析&#xff1a;从技术原理到实战应用 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 技术原理&#xff1a;PNG元数据驱动的角色存储机制 SillyTavern角色卡片…...

编程新知 2026/3/30 12:40:15

RMBG-2.0模型量化压缩：减小体积提升速度

RMBG-2.0模型量化压缩&#xff1a;减小体积提升速度 1. 引言 抠图工具RMBG-2.0确实效果惊艳&#xff0c;但原版模型动不动就几个GB的大小&#xff0c;在普通电脑上跑起来慢吞吞的&#xff0c;更别说在手机或边缘设备上部署了。如果你也遇到过模型太大、推理太慢的问题&#x…...

编程新知 2026/3/30 12:14:10

GTE-Pro行业落地：制造业设备维修手册语义检索替代传统目录树导航

GTE-Pro行业落地&#xff1a;制造业设备维修手册语义检索替代传统目录树导航 1. 引言&#xff1a;当维修师傅找不到说明书时 想象一下这个场景&#xff1a;工厂里一台关键设备突然报警停机&#xff0c;维修师傅小王满头大汗地站在机器旁。他记得这台设备的维修手册有上千页&a…...

编程新知 2026/3/30 12:02:04

终极指南：如何轻松解包Godot PCK文件并提取游戏资源

终极指南&#xff1a;如何轻松解包Godot PCK文件并提取游戏资源 【免费下载链接】godot-unpacker godot .pck unpacker 项目地址: https://gitcode.com/gh_mirrors/go/godot-unpacker 还在为Godot游戏的PCK文件无法解包而烦恼吗&#xff1f;无论你是游戏开发者想要复用资…...

编程新知 2026/3/30 10:18:10

毕业季论文救星：深度解析百考通AI如何智能攻克文献综述与开题报告

又到一年毕业季&#xff0c;无数莘莘学子在为自己学术生涯的“终极答卷”——毕业论文而挑灯夜战。其中&#xff0c;文献综述的浩如烟海与开题报告的千头万绪&#xff0c;无疑是横亘在大多数同学面前的两座大山。你是否也曾面对海量文献不知如何筛选梳理&#xff1f;是否为构建…...

编程新知 2026/3/30 10:06:01

Cadence 17.4 ORCAD PSpice 保姆级教程：手把手教你搭建RC低通滤波器并验证效果

Cadence 17.4 ORCAD PSpice 从零到精通&#xff1a;RC低通滤波器实战全解析 在电子设计领域&#xff0c;仿真工具的重要性不言而喻。对于初学者而言&#xff0c;Cadence 17.4 ORCAD PSpice可能看起来界面复杂、功能繁多&#xff0c;让人望而生畏。但别担心&#xff0c;本文将从…...

编程新知 2026/3/30 10:06:00