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

threeJs+vue 轻松切换几何体贴图

        嗨,我是小路。今天主要和大家分享的主题是“threeJs+vue 轻松切换几何体贴图”。        

        想象一下,手头上正好有个在线3D家具商店,用户不仅可以看到产品的静态图片,还能实时更换沙发的颜色或材质,获得真实的购物体验。这就是我们今天分享的主题——通过简单的几行代码,您可以赋予任何3D几何体不同的外观,增强用户的参与感。

几何体贴图示例

一、示例介绍

设计一个几何体,并通过gui切换3d几何体上不同的图片。就像LOL切换皮肤,只是这个是最基础的。

1.加载图片

定义:通过纹理贴图加载器,将图片加载到几何体的材质里面。主要是放入.map属性里面。

//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();

2.图片偏移+动画

定义:将图片距离初始位置,平移一定的距离。

//纹理U方向偏移 将图片进行偏移
texture.offset.x += 0.5;
//渲染
const render = () => {
//贴图动画,每次渲染时,动画平移0.01texture?texture.offset.x += 0.01:null;renderer.render(scene, camera); //执行渲染操作meshObjx.bool ? mesh.rotateX(0.01) : null;//每次绕y轴旋转0.01弧度meshObjy.bool ? mesh.rotateY(0.01) : null;//每次绕y轴旋转0.01弧度meshObjz.bool ? mesh.rotateZ(0.01) : null;//每次绕y轴旋转0.01弧度//重复渲染requestAnimationFrame(render);//请求再次执行渲染函数render,渲染下一帧
}

3.图片显示面

定义:一般几何体默认有两个面,一个是正面,一个是背面。当图片切换成矩形平面时,这种效果更为明显。具体的效果,可看详情图。

child.material.side = THREE.SingleSide

二、实例代码

1、封装代码

const imgArr = reactive({ img: "" })
let texture = reactive("");
//更换模型图片
const setImg = () => {//.load()方法加载图像,返回一个纹理对象Textureconst girlTexture = texLoader.load('./girl.png');const goalTexture = texLoader.load('./goal.png');//切换模型上图片gui.add(imgArr, 'img', { '可爱': 1, '目标': 2 }).name('模型图片').onChange((value) => {//遍历mesh下所有的对象mesh.traverse((child) => {if (child instanceof THREE.Mesh) {if ([1, 2].includes(value)) {switch (value) {case 1:texture = girlTexturebreak;case 2:texture = goalTexturebreak;default:break;}//给模型进行贴图// 设置阵列模式texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;// uv两个方向纹理重复数量 2*2 = 4个图片 自动将图片按照制定的数量平铺texture.repeat.set(2, 2);//注意选择合适的阵列数量//纹理U方向偏移 将图片进行偏移texture.offset.x += 0.5;child.material.map = texture;//THREE.SingleSide 单面,THREE.DoubleSide 双面  默认是双面贴图console.log(THREE.DoubleSide)child.material.side = THREE.SingleSide//开启透明child.material.transparent = false//更新模型child.material.needsUpdate = true;}}})})
}

2、整个示例代码

<template><div class="pageBox"><div class="leftBox" ref="leftRef"></div><div class="rightBox" ref="rightRef" :style="{ background: bgColor }"></div></div></template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 设置相机控件轨道控制器OrbitControls// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
const bgColor = ref("")
// 实例化一个gui对象
const gui = new GUI();const leftRef = ref();
const rightRef = ref()
const meshObjx = reactive({ bool: false })
const meshObjy = reactive({ bool: false })
const meshObjz = reactive({ bool: false })
// 定义相机输出画布的尺寸(单位:像素px)
let width = 800; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(50, width / height, 2, 6000);//创建一个平面矩形对象Geometry
const geometry = new THREE.PlaneGeometry(150, 150, 150);//==============================================
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({color: 0xffffff,//0xff0000设置材质颜色为红色opacity: 0.5,
});
//将集合形体和材质融合
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();onMounted(() => {initData()render();//添加相机空间const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作});//监听鼠标、键盘事件//当窗口发生改变时,触发时间,重新渲染window.onresize = () => {height = window.innerHeight;width = window.innerWidth / 2;renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)initData()}
})
const initData = () => {//设置网格模型在三维空间中的位置坐标,默认是坐标原点mesh.position.set(0, 10, 0);scene.add(mesh);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(200, 200, 200);camera.lookAt(mesh.position);//指向mesh对应的位置// AxesHelper:辅助观察的坐标系const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);// 添加一个辅助网格地面// const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);// scene.add(gridHelper);setGui();renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)//将innerHTML置空,避免append重复添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);
}//设置gui
const setGui = () => {//改变交互界面style属性gui.domElement.style.right = '0px';gui.domElement.style.width = '300px';//将gui和 几何体的位置绑定//将对应的属性x重命名gui.add(mesh.position, 'x', 0, 100).name('几何体x轴').onChange((value) => {console.log('x', value)//改变x时,进行其它的操作mesh.position.y = 50})//设置交互界面每次改变属性值间隔是多少gui.add(mesh.position, 'y', 0, 100).step(0.1)//设置交互界面 生成交互界面是下拉菜单,设置为数组// gui.add(mesh.position,'z',[-100,0,100]).name("Z轴")gui.add(mesh.position, 'z', { 'left': -100, 'center': 0, 'right': 100 }).name("Z轴")//设置交互页面 单选框  当变量的类型为布尔类型时,才会生成单选框gui.add(meshObjx, 'bool').name("是否开启x轴旋转")gui.add(meshObjy, 'bool').name("是否开启y轴旋转")gui.add(meshObjz, 'bool').name("是否开启z轴旋转")//改变颜色gui.addColor({ color: 0x00ffff }, 'color').onChange((value) => {//value是十进制,需要转换成十六进制bgColor.value = '#' + value.toString(16);mesh.material.color.set(value)})setImg();
}const imgArr = reactive({ img: "" })
let texture = reactive("");
//更换模型图片
const setImg = () => {//.load()方法加载图像,返回一个纹理对象Textureconst girlTexture = texLoader.load('./girl.png');const goalTexture = texLoader.load('./goal.png');//切换模型上图片gui.add(imgArr, 'img', { '可爱': 1, '目标': 2 }).name('模型图片').onChange((value) => {//遍历mesh下所有的对象mesh.traverse((child) => {if (child instanceof THREE.Mesh) {if ([1, 2].includes(value)) {switch (value) {case 1:texture = girlTexturebreak;case 2:texture = goalTexturebreak;default:break;}//给模型进行贴图// 设置阵列模式texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;// uv两个方向纹理重复数量 2*2 = 4个图片 自动将图片按照制定的数量平铺texture.repeat.set(2, 2);//注意选择合适的阵列数量//纹理U方向偏移 将图片进行偏移texture.offset.x += 0.5;child.material.map = texture;//THREE.SingleSide 单面,THREE.DoubleSide 双面  默认是双面贴图console.log(THREE.DoubleSide)child.material.side = THREE.SingleSide//开启透明child.material.transparent = false//更新模型child.material.needsUpdate = true;}}})})
}
//渲染
const render = () => {texture?texture.offset.x += 0.01:null;renderer.render(scene, camera); //执行渲染操作meshObjx.bool ? mesh.rotateX(0.01) : null;//每次绕y轴旋转0.01弧度meshObjy.bool ? mesh.rotateY(0.01) : null;//每次绕y轴旋转0.01弧度meshObjz.bool ? mesh.rotateZ(0.01) : null;//每次绕y轴旋转0.01弧度//重复渲染requestAnimationFrame(render);//请求再次执行渲染函数render,渲染下一帧
}</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;background: yellow;}
}
</style>

三、注意事项

       1、在vue框架的基础上,一定要注意加载图片存放的路径。默认的当前文件夹是.public,不是src。

        2、一定要设置模型的.needUpdate 为true,重新对3d几何体进行渲染;否则容易出现gui切换了图片,但是3d几何体上图片未做任何的切换的问题。

如果你认为该文章对你有帮助,伸出您的小手,帮忙【点赞】+【关注】+【收藏】。

相关文章:

threeJs+vue 轻松切换几何体贴图

嗨&#xff0c;我是小路。今天主要和大家分享的主题是“threeJsvue 轻松切换几何体贴图”。 想象一下&#xff0c;手头上正好有个在线3D家具商店&#xff0c;用户不仅可以看到产品的静态图片&#xff0c;还能实时更换沙发的颜色或材质&#xff0c;获得真实的购物体验。…...

Android ObjectBox数据库使用与集成指南

ObjectBox其核心特点ObjectBox与 SQLite 和 Realm 的对比Android集成ObjectBox创建ObjectBox实体对象创建ObjectBox操作管理类OBManager在Application初始化ObjectBox插入或更新数据查询数据统计数据分页数据查询删除数据总结今天分享一套Android另一个数据库ObjectBox。Object…...

【HarmonyOS Next】地图使用详解(一)

背景 这系列文章主要讲解鸿蒙地图的使用&#xff0c;当前可以免费使用&#xff0c;并提供了丰富的SDK给开发者去自定义控件开发。目前可以实现个性化显示地图、位置搜索和路径规划等功能&#xff0c;轻松完成地图构建工作。需要注意的是&#xff0c;现在测试只能使用实体手机去…...

seacmsv9注入管理员账号密码+orderby+limi

1&#xff1a;mysql默认存储引擎innoDB携带的表 1&#xff0c;mysql.innodb_table_stats 2,mysql.innodb_index_stats SELECT table_name FROM mysql.innodb_table_stats WHERE database_name DATABASE(); 2&#xff1a; 关键字做处理 HEX编码:0x696E666F726D6174696F6E5F7…...

C#与AI的交互(以DeepSeek为例)

C#与ai的交互 与AI的交互使用的Http请求的方式&#xff0c;通过发送请求&#xff0c;服务器响应ai生成的文本 下面是完整的代码&#xff0c;我这里使用的是Ollama本地部署的deepseek&#xff0c;在联网调用api时&#xff0c;则url会有不同 public class OllamaRequester {[Se…...

面试八股文--数据库基础知识总结(2) MySQL

本文介绍关于MySQL的相关面试知识 一、关系型数据库 1、定义 关系型数据库&#xff08;Relational Database&#xff09;是一种基于关系模型的数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;它将数据存储在表格&#xff08;表&#xff09;中&#xff0c;并通过表格…...

Failed to start The PHP FastCGI Process Manager.

报错如下&#xff1a; Job for php-fpm.service failed because the control process exited with error code. See "systemctl status php-fpm.service" and "journalctl -xe" for details. 2月 25 21:49:00 nginx systemd[1]: Starting The PHP FastC…...

软件供应链安全工具链研究系列——RASP自适应威胁免疫平台(上篇)

1.1 基本能力 RASP是一种安全防护技术&#xff0c;运行在程序执行期间&#xff0c;使程序能够自我监控和识别有害的输入和行为。也就是说一个程序如果注入或者引入了RASP技术&#xff0c;那么RASP就和这个程序融为一体&#xff0c;使应用程序具备了自我防护的能力&#xff0c;…...

Spring Boot集成MyBatis访问MySQL:从项目搭建到基础数据库查询(基础入门)

Spring Boot集成MyBatis访问MySQL 一、引言 在当今企业级应用开发中&#xff0c;Spring Boot、MyBatis与MySQL的组合凭借其高效性和灵活性&#xff0c;成为构建数据驱动型应用的首选方案。本文将带你从零开始搭建项目&#xff0c;掌握Spring Boot集成MyBatis的基础入门内容。…...

一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 不管是开发网站还是后台管理系统&#xff0c;我们页面里多多少少有公共的模块。比如博客网站&#xff0c;就有公共的头部&…...

【2025.2.25更新】wordpress免费AI插件,文章内容、图片自动生成、视频自动生成、网站AI客服、批量采集文章,内置deepseek联网满血版

wordpress免费AI插件&#xff0c;文章内容、文章图片、长尾关键词、视频自动生成、网站AI客服、批量采集文章&#xff0c;插件已接入腾讯云大模型知识引擎xDeepSeek&#xff0c;基于腾讯云大模型知识引擎xDeepSeek可联网满血版&#xff0c;插件可实现文章生成、长尾关键词生成、…...

待解决 leetcode71 简化路径 栈的应用

用多种ifelse很不好很复杂容易丢情况 class Solution { public:string simplifyPath(string path) {stack<char> st;string result;int n path.size();while(n > 1 && (path[n-1] / || path[n-1] .)){if(n > 2 && path[n-2] . && pat…...

数据安全_笔记系列09_人工智能(AI)与机器学习(ML)在数据安全中的深度应用

数据安全_笔记系列09_人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析&#xff0c;显著提升了数据分类、威胁检测的精度与效率&#xff0c;尤其在处理非结构化数据、复杂…...

RocketMQ 可观测性最佳实践

RocketMQ 概述 Apache RocketMQ 是一个开源的分布式消息传递和流处理平台&#xff0c;由阿里巴巴团队最初开发并捐赠给 Apache 软件基金会。它主要用于处理大规模消息的发送和接收&#xff0c;支持高吞吐量、可扩展性强且具有高可用性的消息服务。 RocketMQ 的优势有以下几点…...

P9420 [蓝桥杯 2023 国 B] 子 2023

P9420 [蓝桥杯 2023 国 B] 子 2023 题目 分析代码 题目 分析 刚拿到这道题&#xff0c;我大脑简单算了一下&#xff0c;这个值太大了&#xff0c;直观感觉就很难&#xff01;&#xff01; 但是&#xff0c;你仔仔细细的一看&#xff0c;先从最简单的第一步入手&#xff0c;再…...

OpenAI开放Deep Research权限,AI智能体大战升级,DeepSeek与Claude迎来新对决

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

学习笔记04——JMM内存模型

一、Java内存模型&#xff08;JMM&#xff09;是什么&#xff1f; Java内存模型&#xff08;Java Memory Model, JMM&#xff09;是Java多线程编程中共享内存的访问规则&#xff0c;定义了线程如何与主内存&#xff08;Main Memory&#xff09;和工作内存&#xff08;Work Mem…...

将VsCode变得顺手好用(1

目录 设置中文 配置调试功能 提效和增强相关插件 主题和图标相关插件 创建js文件 设置中文 打开【拓展】 输入【Chinese】 下载完成后重启Vs即可变为中文 配置调试功能 在随便一个位置新建一个文件夹&#xff0c;用于放置调试文件以及你未来写的代码&#xff0c;随便命名但…...

Fisher信息矩阵(Fisher Information Matrix,简称FIM)

Fisher信息矩阵简介 Fisher信息矩阵&#xff08;Fisher Information Matrix&#xff0c;简称FIM&#xff09;是统计学和信息理论中的一个重要概念&#xff0c;广泛应用于参数估计、统计推断和机器学习领域。它以统计学家罗纳德费希尔&#xff08;Ronald Fisher&#xff09;的名…...

Vue2+Three.js加载并展示一个三维模型(提供Gitee源码)

目录 一、案例截图 二、安装Three.js 三、代码实现 四、Gitee源码 一、案例截图 二、安装Three.js npm install three 三、代码实现 模型资源我是放在public文件夹下面的&#xff1a; 完整代码&#xff1a; <template><div><div ref"container&qu…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...