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

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

news 文章来源：https://blog.csdn.net/qq_28419035/article/details/144180462 2025/5/4 17:10:07

👨‍⚕️ 主页： 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，通过设置纹理属性来修改纹理贴图的位置和大小

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

编程日记 2024/12/6 12:52:53

fastadmin 后台插件制作方法

目录 一&#xff1a;开发流程 二&#xff1a;开发过程 &#xff08;一&#xff09;&#xff1a;后台功能开发 &#xff08;二&#xff09;&#xff1a;功能打包到插件目录 &#xff08;三&#xff09;&#xff1a;打包插件 &#xff08;四&#xff09;&#xff1a;安装插件…...

编程日记 2024/12/6 12:50:51

9. 一分钟读懂“策略模式”

9.1 模式介绍 策略模式是一种行为型设计模式&#xff0c;用于在运行时灵活切换对象的行为或算法&#xff0c;它将算法封装为独立的类&#xff0c;使得它们可以互相替换&#xff0c;而不会影响使用这些算法的客户端代码。 策略模式的核心思想是&#xff1a;定义一系列可互换的算…...

编程日记 2024/12/6 12:48:49

65页PDF | 企业IT信息化战略规划（限免下载）

一、前言 这份报告是企业IT信息化战略规划&#xff0c;报告详细阐述了企业在面对新兴技术成熟和行业竞争加剧的背景下&#xff0c;如何通过三个阶段的IT战略规划&#xff08;IT 1.0基础建设、IT 2.0运营效率、IT 3.0持续发展&#xff09;&#xff0c;系统地构建IT管理架构、应…...

编程日记 2024/12/6 12:42:42

Android 单元测试断言校验方法 org.junit.Assert

判断布尔值 assertTrue assertFalse 判断对象非空 assertNull(object); 案例&#xff1a; PersistableBundle result Util.getCarrierConfig(mockContext, subId);assertNull(result); 判断是否相等 assertEquals("mocked_string", result.toString()); package or…...

编程日记 2024/12/6 12:40:40

亚马逊云（AWS）使用root用户登录

最近在AWS新开了服务器&#xff08;EC2&#xff09;&#xff0c;用于学习&#xff0c;遇到一个问题就是默认是用ec2-user用户登录&#xff0c;也需要密钥对。 既然是学习用的服务器&#xff0c;还是想直接用root登录&#xff0c;下面开始修改&#xff1a; 操作系统是&#xff1…...

编程日记 2024/12/6 12:39:39

用点云信息来进行监督目标检测

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;传知代码 欢迎大家点赞收藏评论&#x1f60a; 目录 概述问题分析Making Lift-splat work well is hard深度不准确深度过拟合不准确的BEV语义 模型总体框架显性深度监督 深度细化模块演示效果核心…...

编程日记 2024/12/6 12:37:37

Navicat连接服务器MySQL

Navicat连接服务器MySQL 1. Navicat连接服务器MySQL2. 如何查看MySQL用户名和密码3. 修改MySQL登录密码4. 安装MySQL(Centos7)遇到错误和问题 1. error 1045 (28000): access denied for user ‘root’‘localhost’ (using password:yes) 1. Navicat连接服务器MySQL 选择数据…...

编程日记 2024/12/6 12:36:36

FastAPI 响应状态码：管理和自定义 HTTP Status Code

FastAPI 响应状态码&#xff1a;管理和自定义 HTTP Status Code 本文介绍了如何在 FastAPI 中声明、使用和修改 HTTP 状态码&#xff0c;涵盖了常见的 HTTP 状态码分类&#xff0c;如信息响应&#xff08;1xx&#xff09;、成功状态&#xff08;2xx&#xff09;、客户端错误&a…...

编程日记 2024/12/6 12:34:33

【人工智能数学基础篇】线性代数基础学习：深入解读矩阵及其运算

矩阵及其运算&#xff1a;人工智能入门数学基础的深入解读 引言 线性代数是人工智能&#xff08;AI&#xff09;和机器学习的数学基础&#xff0c;而矩阵作为其核心概念之一&#xff0c;承担着数据表示、变换和运算的重任。矩阵不仅在数据科学中广泛应用&#xff0c;更是神经网…...

编程日记 2024/12/6 12:33:32

RNACOS：用Rust实现的Nacos服务

RNACOS是一个使用Rust语言开发的Nacos服务实现&#xff0c;它继承了Nacos的所有核心功能&#xff0c;并在此基础上进行了优化和改进。作为一个轻量级、快速、稳定且高性能的服务&#xff0c;RNACOS不仅包含了注册中心、配置中心和Web管理控制台的功能&#xff0c;还支持单机和集…...

编程日记 2024/12/6 12:32:31

JAVA ｜日常开发中JSTL标签库详解

JAVA &#xff5c;日常开发中JSTL标签库详解 前言一、JSTL 概述1.1 定义1.2 优势 二、JSTL 核心标签库2.1 导入 JSTL 库2.2 <c:out>标签 - 输出数据2.3 <c:if>标签 - 条件判断2.4 <c:choose>、<c:when>和<c:otherwise>标签 - 多条件选择 结束语优…...

编程日记 2024/12/6 12:26:24

Apache HttpClient 4和5访问没有有效证书的HTTPS

本文将展示如何配置Apache HttpClient 4和5以支持“接受所有”SSL。 目标很简单——访问没有有效证书的HTTPS URL。 SSLPeerUnverifiedException 在未配置SSL的情况下&#xff0c;尝试消费一个HTTPS URL时会遇到以下测试失败&#xff1a; Test void whenHttpsUrlIsConsumed…...

编程日记 2024/12/6 12:24:22

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

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

编程日记 2024/12/6 12:22:18

扫二维码进小程序的指定页面

草料二维码解码器 微信开发者工具 获取二维码解码的参数->是否登陆->跳转 options.q onLoad: function (options) {// console.log("options",options.q)if (options && options.q) {// 解码二维码携带的链接信息let qrUrl decodeURIComponent(optio…...

编程日记 2024/12/6 12:21:17

如何用IntelliJ IDEA开发Android Studio用自定义Gradle插件

博主所用软件版本为&#xff1a; IntelliJ IDEA 2024.1.4 (Community Edition) Android Studio Ladybug Feature Drop | 2024.2.2 Beta 1 1、制作gradle插件&#xff08;IntelliJ IDEA 2024.1.4&#xff09; 新建groovy工程&#xff0c;File–>New–>Project… 右键点…...

编程日记 2024/12/6 12:15:11

YOLOv8实战道路裂缝缺陷识别

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对道路裂缝数据集进行训练和优化&#xff0c;该数据集包含丰富的道路裂缝图像样本…...

编程日记 2024/12/6 12:12:09

RPC一分钟

概述 微服务治理&#xff1a;Springcloud、Dubbo服务通信&#xff1a;Grpc、Trift Dubbo 参考 Dubbo核心功能&#xff0c;主要提供了&#xff1a;远程方法调用、智能容错和负载均衡、提供服务自动注册、自动发现等高效服务治理功能。 Dubbo协议Dubbo支持dubbo、rmi、http、…...

编程日记 2024/12/6 12:09:04

Elasticsearch ILM 故障排除：常见问题及修复

作者&#xff1a;来自 Elastic Stef Nestor 大家好&#xff01;我们的 Elasticsearch 团队正在不断改进我们的索引生命周期管理 (index Lifecycle Management - ILM) 功能。当我第一次加入 Elastic Support 时&#xff0c;我通过我们的使用 ILM 实现自动滚动教程快速上手。在帮…...

编程日记 2024/12/6 12:08:02

Unity 设计模式-策略模式（Strategy Pattern）详解

策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;定义了一系列算法&#xff0c;并将每种算法封装到独立的类中&#xff0c;使得它们可以互相替换。策略模式让算法可以在不影响客户端的情况下独立变化&#xff0c;客户端通过与这些策略对象进…...

编程日记 2024/12/6 12:07:01

【Maven系列】深入解析 Maven 常用命令

前言 在当今的软件开发过程中&#xff0c;项目管理是至关重要的一环。项目管理包括了项目构建、依赖管理以及发布部署等诸多方面。而在Java生态系统中&#xff0c;Maven已经成为了最受欢迎的项目管理工具之一。Maven 是一套用于构建、依赖管理和项目管理的工具&#xff0c;主要…...

编程日记 2024/12/6 12:05:58

微信小程序之简单的数据中心管理平台（1）

微信小程序之简单的数据中心管理平台&#xff08;1&#xff09; 引言 随着微信小程序的广泛应用&#xff0c;越来越多的企业开始探索如何利用这一技术开发高效、便捷的管理平台。数据中心管理作为信息化建设的重要组成部分&#xff0c;需要一个灵活、可扩展的界面来实现资源的…...

编程日记 2024/12/6 12:04:56

sqlmap --os-shell的原理（MySQL,MSSQL,PostgreSQL,Oracle,SQLite）

1. MySQL 条件 数据库用户需要具备高权限&#xff08;如 FILE 权限&#xff09;。数据库服务运行用户需要对目标目录有写权限。Web 服务器有可写目录&#xff0c;且支持执行上传的脚本&#xff08;如 PHP、JSP 等&#xff09;。 原理 利用 MySQL 的 SELECT ... INTO OUTFIL…...

编程日记 2024/12/6 12:02:52

2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 C题 云中的海盐 原题再现&#xff1a; 巴黎气候协定提出的目标是&#xff1a;在2100年前&#xff0c;把全球平均气温相对于工业革命以前的气温升幅控制在不超过2摄氏度的水平&#xff0c;并为1.5摄氏度而努力。但事实上&#xff0c;许多之前的…...

编程日记 2024/12/6 11:59:48

三维扫描检测在汽车制造中的应用

三维扫描&#xff0c;通过先进三维扫描技术获取产品和物体的形面三维数据&#xff0c;建立实物的三维图档&#xff0c;满足各种实物3D模型数据获取、三维数字化展示、3D多媒体开发、三维数字化存档、逆向设计、产品开发、直接3D打印制造或辅助加工制造等一系列的应用。 三维扫描…...

编程日记 2024/12/6 11:58:46

【NoSQL数据库】Hbase基本操作——数据库表的增删改查

目录 一、Hbase原理 二、HBase数据库操作 三、遇到的问题和解决方法 一、Hbase原理 HBase的数据模型&#xff1a; 行键 时间戳 列族&#xff1a;contents 列族&#xff1a;anchor 列族&#xff1a;mime “com.cnn.www” T9 Achor:cnnsi.com”CNN” T8 Achor:…...

编程日记 2024/12/6 11:56:42

【C++】格式化输出详解：掌握 cout 的进阶用法

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;格式化输出的理论概述&#x1f4af;控制输出宽度和填充字符setw 操作符setfill 操作符 &#x1f4af;控制浮点数的显示格式fixed 与 scientificsetprecision &#x1f4af;…...

编程日记 2024/12/6 11:55:38

设计模式学习思路二

设计模式的学习思路_设计模式必须按顺序进行吗-CSDN博客 以下是一些方法和思路可以帮助你更清晰地识别使用了哪种设计模式。 1. 确定模式时的思考步骤 以下是分析代码时&#xff0c;你可以遵循的一些思路和步骤&#xff0c;帮助你识别可能使用的设计模式&#xff1a; a. 识别…...

编程日记 2024/12/6 11:54:35

什么是等级保护

1.为什么要实施等级保护: •国家信息安全形势严峻(敌对势力),针对基础信息系统的违法犯罪持续上升(网上诈骗、入侵、网上盗窃) •维护国家安全的需求(基础信息网络【互联网、电信网、广电网】及重要信息系统【银行、铁路、电力、海关】已经成为国家的关键基础设施) •信息安全是…...

编程日记 2024/12/6 11:53:34

k8s api对象，CRD

在Kubernetes项目中&#xff0c;一个API对象在Etcd里的完整资源路径&#xff0c;是由&#xff1a;Group&#xff08;API组&#xff09;、Version&#xff08;API版本&#xff09;和Resource&#xff08;API资源类型&#xff09;三个部分组成 apiVersion: batch/v2alpha1 kind:…...

编程日记 2024/12/6 11:52:33