网站备案时 首页,wordpress百家号模版,内容电商平台有哪些,上海网站建设哪家公司好嗨#xff0c;我是小路。今天主要和大家分享的主题是“threeJsvue 轻松切换几何体贴图”。 想象一下#xff0c;手头上正好有个在线3D家具商店#xff0c;用户不仅可以看到产品的静态图片#xff0c;还能实时更换沙发的颜色或材质#xff0c;获得真实的购物体验。… 嗨我是小路。今天主要和大家分享的主题是“threeJsvue 轻松切换几何体贴图”。 想象一下手头上正好有个在线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、整个示例代码
templatediv classpageBoxdiv classleftBox refleftRef/divdiv classrightBox refrightRef :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 langless
.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几何体上图片未做任何的切换的问题。 如果你认为该文章对你有帮助伸出您的小手帮忙【点赞】【关注】【收藏】。
