学习threejs,通过设置纹理属性来修改纹理贴图的位置和大小
👨⚕️ 主页: 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 贴图 二、…...
fastadmin 后台插件制作方法
目录 一:开发流程 二:开发过程 (一):后台功能开发 (二):功能打包到插件目录 (三):打包插件 (四):安装插件…...
9. 一分钟读懂“策略模式”
9.1 模式介绍 策略模式是一种行为型设计模式,用于在运行时灵活切换对象的行为或算法,它将算法封装为独立的类,使得它们可以互相替换,而不会影响使用这些算法的客户端代码。 策略模式的核心思想是:定义一系列可互换的算…...
65页PDF | 企业IT信息化战略规划(限免下载)
一、前言 这份报告是企业IT信息化战略规划,报告详细阐述了企业在面对新兴技术成熟和行业竞争加剧的背景下,如何通过三个阶段的IT战略规划(IT 1.0基础建设、IT 2.0运营效率、IT 3.0持续发展),系统地构建IT管理架构、应…...
Android 单元测试断言校验方法 org.junit.Assert
判断布尔值 assertTrue assertFalse 判断对象非空 assertNull(object); 案例: PersistableBundle result Util.getCarrierConfig(mockContext, subId);assertNull(result); 判断是否相等 assertEquals("mocked_string", result.toString()); package or…...
亚马逊云(AWS)使用root用户登录
最近在AWS新开了服务器(EC2),用于学习,遇到一个问题就是默认是用ec2-user用户登录,也需要密钥对。 既然是学习用的服务器,还是想直接用root登录,下面开始修改: 操作系统是࿱…...
用点云信息来进行监督目标检测
🍑个人主页:Jupiter. 🚀 所属专栏:传知代码 欢迎大家点赞收藏评论😊 目录 概述问题分析Making Lift-splat work well is hard深度不准确深度过拟合不准确的BEV语义 模型总体框架显性深度监督 深度细化模块演示效果核心…...
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 选择数据…...
FastAPI 响应状态码:管理和自定义 HTTP Status Code
FastAPI 响应状态码:管理和自定义 HTTP Status Code 本文介绍了如何在 FastAPI 中声明、使用和修改 HTTP 状态码,涵盖了常见的 HTTP 状态码分类,如信息响应(1xx)、成功状态(2xx)、客户端错误&a…...
【人工智能数学基础篇】线性代数基础学习:深入解读矩阵及其运算
矩阵及其运算:人工智能入门数学基础的深入解读 引言 线性代数是人工智能(AI)和机器学习的数学基础,而矩阵作为其核心概念之一,承担着数据表示、变换和运算的重任。矩阵不仅在数据科学中广泛应用,更是神经网…...
RNACOS:用Rust实现的Nacos服务
RNACOS是一个使用Rust语言开发的Nacos服务实现,它继承了Nacos的所有核心功能,并在此基础上进行了优化和改进。作为一个轻量级、快速、稳定且高性能的服务,RNACOS不仅包含了注册中心、配置中心和Web管理控制台的功能,还支持单机和集…...
JAVA |日常开发中JSTL标签库详解
JAVA |日常开发中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>标签 - 多条件选择 结束语优…...
Apache HttpClient 4和5访问没有有效证书的HTTPS
本文将展示如何配置Apache HttpClient 4和5以支持“接受所有”SSL。 目标很简单——访问没有有效证书的HTTPS URL。 SSLPeerUnverifiedException 在未配置SSL的情况下,尝试消费一个HTTPS URL时会遇到以下测试失败: Test void whenHttpsUrlIsConsumed…...
Lighthouse(灯塔)—— Chrome 浏览器性能测试工具
1.认识 Lighthouse Lighthouse 是 Google 开发的一款开源性能测试工具,用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈,并基于优化建议进行改进。 核心功能&…...
扫二维码进小程序的指定页面
草料二维码解码器 微信开发者工具 获取二维码解码的参数->是否登陆->跳转 options.q onLoad: function (options) {// console.log("options",options.q)if (options && options.q) {// 解码二维码携带的链接信息let qrUrl decodeURIComponent(optio…...
如何用IntelliJ IDEA开发Android Studio用自定义Gradle插件
博主所用软件版本为: IntelliJ IDEA 2024.1.4 (Community Edition) Android Studio Ladybug Feature Drop | 2024.2.2 Beta 1 1、制作gradle插件(IntelliJ IDEA 2024.1.4) 新建groovy工程,File–>New–>Project… 右键点…...
YOLOv8实战道路裂缝缺陷识别
本文采用YOLOv8作为核心算法框架,结合PyQt5构建用户界面,使用Python3进行开发。YOLOv8以其高效的实时检测能力,在多个目标检测任务中展现出卓越性能。本研究针对道路裂缝数据集进行训练和优化,该数据集包含丰富的道路裂缝图像样本…...
RPC一分钟
概述 微服务治理:Springcloud、Dubbo服务通信:Grpc、Trift Dubbo 参考 Dubbo核心功能,主要提供了:远程方法调用、智能容错和负载均衡、提供服务自动注册、自动发现等高效服务治理功能。 Dubbo协议Dubbo支持dubbo、rmi、http、…...
Elasticsearch ILM 故障排除:常见问题及修复
作者:来自 Elastic Stef Nestor 大家好!我们的 Elasticsearch 团队正在不断改进我们的索引生命周期管理 (index Lifecycle Management - ILM) 功能。当我第一次加入 Elastic Support 时,我通过我们的使用 ILM 实现自动滚动教程快速上手。在帮…...
Unity 设计模式-策略模式(Strategy Pattern)详解
策略模式(Strategy Pattern)是一种行为型设计模式,定义了一系列算法,并将每种算法封装到独立的类中,使得它们可以互相替换。策略模式让算法可以在不影响客户端的情况下独立变化,客户端通过与这些策略对象进…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发,旨在打造一个互动性强的购物平台,让用户在购物的同时,能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机,实现旋转、抽拉等动作,增…...
