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

学习threejs，通过设置纹理属性来修改纹理贴图的位置和大小

news 来源：原创 2025/5/14 0:43:45

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️Texture 贴图
二、🍀通过设置纹理属性来修改纹理贴图的位置和大小
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中通过设置纹理属性来修改纹理贴图的位置和大小，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️Texture 贴图

创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。
构造函数：
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )
常用属性：
在这里插入图片描述
方法：

二、🍀通过设置纹理属性来修改纹理贴图的位置和大小

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene，创建THREE.CubeTextureLoader立方体纹理加载器cubeTextureLoader，加载cubeTextureLoader的六个方位的图片获取纹理对象cubeTexture，scene背景background设置为cubeTexture。
3、初始化camera相机，定义相机位置 camera.position.set
4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
5、加载几何模型：创建THREE.AxesHelper坐标辅助工具helper，scene场景中加入helper。创建THREE.BoxGeometry立方体几何体geometry，创建THREE.MeshBasicMaterial基础材质material，material设置map贴图、水平和垂直贴图包裹，传入geometry和material创建THREE.Mesh网格对象，scene中加入创建的网格对象。
6、加入gui控制（material添加修改纹理贴图的位置和大小方法，具体实现看下面代码样例）、controls控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn58(通过设置纹理属性来修改纹理贴图的位置和大小)</title><script src="lib/threejs/127/three.js-master/build/three.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;}
</style>
<body onload="draw()">
</body>
<script>var renderer, camera, scene, gui, light, stats, controlsvar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xeeeeee)renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)renderer.shadowMap.enabled = truedocument.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 initGui = () => {gui = {offsetX: 0,offsetY: 0,repeatX: 1,repeatY: 1,rotation: 0,centerX: 0.5,centerY: 0.5,RepeatWrapping: true}var datGui = new dat.GUI()//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, "offsetX", 0.0, 1.0).onChange(updateUV)datGui.add(gui, "offsetY", 0.0, 1.0).onChange(updateUV)datGui.add(gui, "repeatX", 0.25, 2.0).onChange(updateUV)datGui.add(gui, "repeatY", 0.25, 2.0).onChange(updateUV)datGui.add(gui, "rotation", -2.0, 2.0).onChange(updateUV)datGui.add(gui, "centerX", 0.0, 1.0).onChange(updateUV)datGui.add(gui, "centerY", 0.0, 1.0).onChange(updateUV)datGui.add(gui, 'RepeatWrapping').onChange(e => {if (e) {// wrapS表示x轴的纹理的回环方式material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping} else {material.map.wrapS = material.map.wrapT = THREE.ClampToEdgeWrapping //设置会默认的最后一像素伸展}material.map.needsUpdate = true})}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.BoxGeometry(5, 5, 5)var loader = new THREE.TextureLoader()var texture = loader.load('data/img/UV_Grid_Sm.jpg')texture.wrapS = texture.wrapT = THREE.RepeatWrappingtexture.matrixAutoUpdate = false // 设置纹理属性matrixAutoUpdate为false以后，纹理将通过matrix属性设置的矩阵更新纹理显示material = new THREE.MeshBasicMaterial({map: texture})scene.add(new THREE.Mesh(geometry, material))}var updateUV = () => {// 一种方法，直接全写在一个方法内//texture.matrix.setUvTransform( API.offsetX, API.offsetY, API.repeatX, API.repeatY, API.rotation, API.centerX, API.centerY )// 另一种方法，分开写material.map.matrix.identity() //矩阵重置.translate(-gui.centerX, -gui.centerY) //设置中心点.rotate(gui.rotation) // 旋转.scale(gui.repeatX, gui.repeatY) //缩放.translate(gui.centerX, gui.centerY) //设置中心点.translate(gui.offsetX, gui.offsetY) //偏移}var initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {renderer.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()initGui()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

学习threejs，通过设置纹理属性来修改纹理贴图的位置和大小

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

编程日记 2025/5/14 0:43:45

图生3d 图生全景学习笔记

目录 Aluciddreamer ZoeDepth 会自动下载模型： 图生全景图SD-T2I-360PanoImage： Aluciddreamer GitHub - luciddreamer-cvlab/LucidDreamer: Official code for the paper "LucidDreamer: Domain-free Generation of 3D Gaussian Splatting Sce…...

编程日记 2025/5/8 10:27:36

Delphi 实现键盘模拟、锁定键盘，锁定鼠标等操作

Delphi 模拟按键的方法 SendMessageA 说明: 调用一个窗口的窗口函数，将一条消息发给那个窗口。除非消息处理完毕，否则该函数不会返回SendMessage所包含4个参数: 1. hwnd 32位的窗口句柄窗口可以是任何类型的屏幕对象，因为Win32能够维护大多数…...

编程日记 2025/5/13 13:40:18

6. 一分钟读懂“抽象工厂模式”

6.1 模式介绍书接上文，工厂方法模式只能搞定单一产品族，遇到需要生产多个产品族时就歇菜了。于是，在需求的“花式鞭策”下，程序员们再次绷紧脑细胞，创造出了更强大的抽象工厂模式，让工厂一次性打包多个产品…...

编程日记 2025/5/13 23:22:57

（四）lerobot开源项目的主从臂的远程操作（带相机）（操作记录）

目录《项目简介》一、B站视频参考（推荐） 二、确定两个usb相机的端口号三、远程操作（带相机） 四、遇到问题《项目简介》项目地址：GitHub - huggingface/lerobot: 🤗 LeRobot: Making AI for Ro…...

编程日记 2025/5/13 22:49:15

离线安装ollama到服务器

搜了很多教程不满意,弄了半天才弄好，这里记录下，方便以后的人用，那个在线下载太慢，怕不是得下载到明年。一.从官网下在liunx版的tgz安装包 Releases ollama/ollama (github.com) 查看自己的服务器信息（参考 https:/…...

编程日记 2025/5/13 22:50:23

Vue前端开发-多级路由配置

在Vue 路由数组中，允许配置多级的路由对象结构，可以是二级、三级或者更多级别，最大级别原则上没有限制，但通常最大的是三或四级，这种路由结构，称之为多级路由。例如：一级路由地址/list&#x…...

编程日记 2025/5/13 22:15:41

Yocto bitbake and codeSonar

1 mdm 1.1 屏蔽mdm sysvinit的console输出 - uboot传入参数的时候传入consolenull，这样Linux启动信息没有了 - 还需要在Linux配置中去掉Support for console on AMBA serial port - 文件系统/etc/inittab文件里注释掉::respawn:/sbin/getty -L ttyS000 115200 vt100…...

编程日记 2025/5/13 22:11:24

sheng的学习笔记-【中】【吴恩达课后测验】Course 5 -序列模型 - 第二周测验 - 自然语言处理与词嵌入

课程5_第2周_测验题目录第一题 1.假设你为10000个单词学习词嵌入，为了捕获全部范围的单词的变化以及意义，那么词嵌入向量应该是10000维的。 A. 【】正确 B. 【】错误答案： B.【 √ 】错误第二题 2.什么是t-SNE&#xff1f…...

编程日记 2025/5/9 6:46:05

数字图像处理内容详解

1.对比度最大亮度 / 最小亮度 2.邻域 m邻接：对于像素p和q，如果p和q四临接，或p和q八临接且两者的四邻域的交集为空通路：如果俩点全部是K邻接（K代表4，8，m），则说明存在K…...

编程日记 2025/5/13 21:28:35

python通过ODBC连接神通数据库

1、安装神通数据库 2、安装python 3、安装pyodbc pip3 install pyodbc-5.2.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl 注：pyodbc要和python版本相对应 4、安装unixodbc 5、配置神通数据库ODBC数据源 6、示例代码如下 #!/usr/bin/python…...

编程日记 2025/5/12 17:32:25

QNX的PPS发布/订阅模型

参考资料： QNX官方文档以下摘自官网介绍： TheQNX NeutrinoPersistent Publish/Subscribe (PPS) service is a small, extensible publish/subscribe service that offers persistence across reboots. It’s designed to provide a simple and easy-to-use solution for b…...

编程日记 2025/5/13 22:55:37

Ubuntu——extrepo添加部分外部软件源

extrepo 是一个用于 Ubuntu 和其他基于 Debian 的系统的工具，它的主要作用是简化和管理外部软件源（repositories）的添加和更新。通过使用 extrepo，用户可以方便地添加、删除和管理第三方软件源，而不需要手动编辑源列表…...

编程日记 2025/5/14 0:03:10

java基础教程第16篇（正则表达式）

Java 正则表达式正则表达式定义了字符串的模式。正则表达式可以用来搜索、编辑或处理文本。正则表达式并不仅限于某一种语言，但是在每种语言中有细微的差别。 Java 提供了 java.util.regex 包，它包含了 Pattern 和 Matcher 类，用于处理正…...

编程日记 2025/5/14 0:12:41

【Shell 脚本实现 HTTP 请求的接收、解析、处理逻辑】

以下是一个实现客户端对 Shell HTTP 服务发起 POST 请求并传入 JSON 参数的完整示例。Shell 服务会解析收到的 JSON 数据，根据内容执行操作。服务端脚本：http_server.sh 以下脚本使用 netcat (nc) 来监听 HTTP 请求，并通过 jq 工具解析 JSO…...

编程日记 2025/5/13 23:24:07

Leetcode 每日一题 290.单词规律

目录一、问题分析二、解题思路三、代码实现四、复杂度分析五、总结在编程的世界里，我们常常会遇到各种有趣的字符串匹配问题。今天要探讨的就是这样一个问题：给定一种规律 pattern 和一个字符串 s，判断 s 是否遵循与 pattern 相同…...

编程日记 2025/5/13 22:25:21

图像滤波和卷积的不同及MATLAB应用实例

滤波与卷积在图像处理中都是非常重要的运算，但它们有着明显的区别。以下是滤波与卷积的主要不同点，并附带一个MATLAB实例来展示两者在图像处理中的效果差异。一、滤波与卷积的不同定义与目的： 1）滤波：滤波是一种信…...

编程日记 2025/5/13 22:54:31

【AI模型对比】AI新宠Kimi与ChatGPT的全面对比：技术、性能、应用全揭秘

文章目录 Moss前沿AI技术背景Kimi人工智能的技术积淀ChatGPT的技术优势详细对比列表模型研发Kimi大模型的研发历程ChatGPT的发展演进参数规模与架构Kimi大模型的参数规模解析ChatGPT的参数体系模型表现与局限性Kimi大模型的表现ChatGPT的表现结论：如何选择适合自…...

编程日记 2025/5/13 2:31:22

详细解读CMA实验室认可

CMA实验室认可，即中国计量认证（China Metrology Accreditation）的实验室资质认定，以下是对其的详细解读： 一、定义与目的 CMA认证是经省级以上人民政府计量行政部门对实验室的计量检定、测试能力和可靠性考核合格后进…...

编程日记 2025/5/13 9:35:58

H5与支付宝小程序通信，调起扫一扫

1.public/index.html加入代码 <script>if (navigator.userAgent.indexOf(AliApp) > -1) {document.writeln(<script src"https://appx/web-view.min.js" > < / script>);}window.$my my </script>2.vue其他具体页面加入代码 metho…...

编程日记 2025/5/13 23:28:17

Lighthouse（灯塔）—— Chrome 浏览器性能测试工具

1.认识 Lighthouse Lighthouse 是 Google 开发的一款开源性能测试工具，用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈，并基于优化建议进行改进。核心功能&…...

编程日记 2025/5/13 22:43:50

深入浅出机器学习中的梯度下降算法

大家好，在机器学习中，梯度下降算法（Gradient Descent）是一个重要的概念。它是一种优化算法，用于最小化目标函数，通常是损失函数。梯度下降可以帮助找到一个模型最优的参数，使得模型的预测更加准…...

编程日记 2025/5/10 9:01:42

AIGC 012-Video LDM-更进一步，SD作者将LDM扩展到视频生成任务！

AIGC 012-Video LDM-Stable Video diffusion前身，将LDM扩展到视频生成任务！ 文章目录 0 论文工作1论文方法实验结果 0 论文工作 Video LDM作者也是Stable diffusion的作者，作者在SD的架构上进行扩展，实现了视频的生成。后续在Vid…...

编程日记 2025/5/8 17:51:32

Rust常用命令总结

安装Rust 检查并更新Ubuntu的软件包 $ sudo apt update $ sudo apt upgrade安装相关依赖：安装GCC、G、MAKE、curl $ sudo apt install build-essential $ sudo apt install curl安装Rust $ curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh执行命令…...

编程日记 2025/5/13 12:56:49

docker部署RustDesk自建服务器

客户端： Releases rustdesk/rustdesk GitHub 服务端： 项目官方地址：GitHub - rustdesk/rustdesk-server: RustDesk Server Program 1、拉取RustDesk库 docker pull rustdesk/rustdesk-server:latest 阿里云库： docker pu…...

编程日记 2025/5/13 7:26:26

QT4和 QT5 槽函数连接的区别

正常连接方式 //QT4官方用列QLabel *label new QLabel;QScrollBar *scrollBar new QScrollBar;QObject::connect(scrollBar, SIGNAL(valueChanged(int)),label, SLOT(setNum(int)));//QT5官方用列QLabel *label new QLabel;QLineEdit *lineEdit new QLineEdit;QObject::c…...

编程日记 2025/5/13 2:23:40

【C++】入门【六】

本节目标一、继承的概念及定义二、基类和派生类对象赋值转换三、继承中的作用域四、派生类的默认成员函数五、继承与友元六、继承与静态成员七、复杂的菱形继承及菱形虚拟继承八、继承的总结和反思九、笔试面试题一、继承的概念及定义 1.继承的概念继承是面向对象…...

编程日记 2025/5/13 6:23:29

Ansible 运维工具

安装 apt install ansible /etc/ansible/hosts , 指定密码或密钥访问分组机器 [k8s_masters] master0.c0.k8s.sb[k8s_nodes] node0.c0.k8s.sb node1.c0.k8s.sb[k8s:children] k8s_masters k8s_nodes[k8s_masters:vars] ansible_ssh_usersbadmin ansible_ssh_pass"***&q…...

编程日记 2025/5/13 22:39:25

【分布式】分布式缓存

一、什么是分布式缓存分布式缓存是一种将缓存数据存储在多个节点上的缓存方案。它通过将数据分散存储在多个节点的内存中，以提高系统的读取性能、降低数据库压力和提高系统可扩展性。二、分布式缓存的优点优点明细提高性能：分布式缓存可以将数据缓…...

编程日记 2025/4/28 5:45:30

uni-app简洁的移动端登录注册界面

非常简洁的登录、注册界面模板，使用uni-app编写，直接复制粘贴即可，无任何引用，全部公开。废话不多说，代码如下： login.vue文件 <template><view class"content"><view class&quo…...

编程日记 2025/5/10 4:26:40

传奇996_47——前端ui

方式一： 后端写ui，前端通过触发函数进行截取。然后获取标签名进行补充或附加动画这种方式很好用。问题1：获取不到标签名，标签名就是标签id，当id数字时不需要处理即可直接获取到，但是id如果时汉字就会获取…...

编程日记 2025/5/13 23:07:47

nlp培训重点

1. SGD梯度下降公式当梯度大于0时，变小，往左边找梯度接近0的值。当梯度小于0时，减去一个负数会变大，往右边找梯度接近0的值，此时梯度从负数到0上升 2.Adam优化器实现原理 #coding:utf8import torch import torch.n…...

编程日记 2025/5/13 10:02:46

ARM A32多数据处理汇编指令理解分享

ARM A32多数据处理汇编指令理解分享 1 多数据存储指令1.1 push指令1.2 STMFD/STMDB指令1.3 STMED/STMDA指令1.4 STMFA/STMIB指令1.5 STMEA/STMIA指令 2 多数据加载指令2.1 pop指令2.2 LDMFD/LDMIA指令2.3 LDMFA/LDMDA指令2.4 LDMEA/LDMDB指令2.5 LDMED/LDMIB指令在ARM A32多数…...

编程日记 2025/5/13 23:46:21

【人工智能】Transformers之Pipeline（二十七）：蒙版生成（mask-generation）

目录一、引言二、蒙版生成（mask-generation） 2.1 概述 2.2 facebook/sam-vit-base 2.3 pipeline参数 2.3.1 pipeline对象实例化参数 2.3.2 pipeline对象使用参数 2.3.3 pipeline对象返回参数 2.4 pipeline实战 2.5 模型排…...

编程日记 2025/5/14 0:13:46

数据挖掘之逻辑回归

逻辑回归（Logistic Regression）是数据挖掘中一种经典且广泛应用的算法，主要用于解决分类问题。尽管名字中带有“回归”，它的核心目标却是预测离散的类别，而不是连续的数值。逻辑回归凭借其简单、高效、易于解释的特性&…...

编程日记 2025/5/13 22:15:41

PH热榜 | 2024-12-05

1. Oopsie 标语：用AI和会话回放调试Flutter和React Native应用介绍：Zipy推出的Oopsie是一款你唯一需要的AI赋能移动端调试工具，它能提供▶️会话回放、🤖错误监控、💡AI生成的概要分析，以及&#x1f525…...

编程日记 2025/5/14 0:02:04

docker-常用应用部署dockerfile模板

文章目录概述Springboot-Djava.security.egdfile:/dev/./urandom参数说明 vue应用部署nginx.conf配置Dockerfile 概述本文列举了Java开发中常用如SpringBoot、Vue前端等类型的应用Docker部署所需的DockerFile Springboot FROM anapsix/alpine-java:8_server-jre_unlimited…...

编程日记 2025/5/13 22:28:39

LabVIEW中“this VI‘s owning library is missing”错误及解决

问题描述当加载或打开一个VI时，如果其所属的项目库未加载到内存，LabVIEW将提示错误：“this VIs owning library is missing”（该VI的所属库不存在）。该问题通常发生在以下情况下： 项目库文件丢失或路径…...

编程日记 2025/5/13 15:47:58

【算法】棋盘覆盖问题源代码及精简版

目录一、题目二、样例三、示例代码四、精简代码五、总结对于棋盘覆盖问题的解答和优化。一、题目输入格式： 第一行，一个整数n（棋盘n*n，n确保是2的幂次，n<64） 第二行，两个整数…...

编程日记 2025/5/13 21:50:14

剖析kubernetes service的IP能否在宿主机中ping通

文章目录前言一、serviceIP是怎么产生的二、宿主机中ping serviceIP地址1.ping示例2.为什么ping不通剖析2.1.封装及解封装过程2.2.ICMP报文以太网数据帧格式2.3.原因三、ping不通svcIP是否跟iptables规则有关？四、为什么ipvs的的clusterIP类型的service能够ping通…...

编程日记 2025/5/14 0:30:28

路由VueRouter的基本使用

1.下载VueRouter到当前工程。 vue2：VueRouter3.x Vuex3.x。 vue3：VueRouter4.x Vuex4.x。在终端使用命令： year add vue-router3.6.5 2.引入。 import VueRouter from vue-router 3,安装注册。 Vue.use(VueRouter) 4…...

编程日记 2025/5/13 22:08:11

学习记录，正则表达式，隐式转换

正则表达式 \\：表示正则表达式 W: 表示一个非字（不是一个字，例如：空格，逗号，句号） W: 多个非字基本组成部分 1.字符字面量： 普通字符：在正则表达式中，大…...

编程日记 2025/5/13 21:30:25

Spring Boot + MySQL 多线程查询与联表查询性能对比分析

Spring Boot MySQL: 多线程查询与联表查询性能对比分析背景在现代 Web 应用开发中，数据库性能是影响系统响应时间和用户体验的关键因素之一。随着业务需求的不断增长，单表查询和联表查询的效率问题日益凸显。特别是在 Spring Boot 项目中&#xff0…...

编程日记 2025/5/12 13:37:42

C++小碗菜之二：软件单元测试

“没有测试的代码重构不能称之为重构，它仅仅是垃圾代码的到处移动” ——Corey Haines 目录前言什么是单元测试？ 单元测试的组成单元测试的命名单元测试的独立性 Google Test 单元测试的环境配置与使用 1. Ubuntu下安装 Google Test 2. 编写…...

编程日记 2025/5/13 22:52:00

集成学习综合教程

一、前置知识一个分类器的分类准确率在60%-80%，即：比随机预测略好，但准确率却不太高，我们可以称之为 “弱分类器”，比如CART（classification and regression tree 分类与回归树）。反之&#x…...

编程日记 2025/5/13 22:33:41

Java NIO channel

channel(通道)，byteBuffer(缓冲区)，selector（io多路复用），通道FileChannel,SocketChannel的transferTo,transferFrom,MappedByteBuffer实现了零拷贝。 JVM调操作系统方法，read,write，都可以送字…...

编程日记 2025/5/13 21:27:24