threejs封装加载 .glb 格式模型，修改贴图

组件

<template><div id="modelCreation"><slot></slot></div>
</template>

<script setup lang="ts">
/*** 组件使用* 1、安装依赖：npm install three -D* 2、使用的页面引用组件* 3、引入加载的模型，浏览器会打印通道数据* 4、通过定义好的类、函数修改贴图*/
/*** 参数说明* @param el dom节点* @param list 模型渲染贴纸* @param modelUrl 模型地址* @param speed 旋转速度*/
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";const emit = defineEmits(["load"]);let scene: any = null;
let camera: any = null;
let controls: any = null;
let renderer: any = null;
let array: any = [];
let speed: number = 1;// 定义接收参数的类型
interface InitType {el: string;list: any[];speed: number;modelUrl: string;
}
// 初始化模型
class Init {list: object[];gltfLoader: any;model: InitType;canvas: HTMLElement | null = null;constructor(data: InitType) {// 参数存储this.model = data;// 速度判断if (this.model.speed) speed = this.model.speed;// 获取模型数据this.model.list ? this.list = this.model.list : this.list = [];// 获取当前渲染的dom元素if (!this.model.el) throw new Error("请填写渲染的dom元素");// 获取dom元素this.canvas = document.querySelector(this.model.el) as HTMLElement;// 相机设置camera = new THREE.PerspectiveCamera(20, this.canvas.clientWidth / this.canvas.clientHeight, 0.01, 100);// 相机初始偏移角度camera.position.set(-5, 8, 15);// 设置Vector3 x,y,z 三个分量，进行缩放camera.lookAt(new THREE.Vector3(10, 55, 20));//  创建场景对象Scenescene = new THREE.Scene();// 创建模型容器this.gltfLoader = new GLTFLoader();if (!this.model.modelUrl) {throw new Error("请添加模型地址");};// 调用模型，加载模型this.modeLoad();};public modeLoad() {// 加载模型this.gltfLoader.load(this.model.modelUrl,(gltf: any) => {console.log(`%c 模型通道 ↓↓↓，通过 name 判断`,`color: white;height: 60px; display: block;font-size: 20px;line-height: 60px;padding-left: 50px;padding-right: 80px;background:#ff720df2;border: 2px solid white;`);console.table(gltf.scene.children);array = [];this.list.forEach((item: any) => {item.loadBear = gltf.scene.children.find((child: any) => {return item.name == child.name;});array.push(item);updateSticker(item.label, item.url);});animate();scene.add(gltf.scene);},(xhr: any) => {if (xhr.loaded / xhr.total > 0) {emit("load", Number((Number(xhr.loaded / xhr.total) * 100).toFixed(2)));};// console.log(xhr.loaded / xhr.total,"当前进度：" + (xhr.loaded / xhr.total) * 100 + "%");},(error: any) => {console.log(error);});renderer = new THREE.WebGLRenderer({canvas: this.canvas,antialias: true,});renderer.setClearColor(0xfeffff, 0);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(this.canvas?.clientWidth, this.canvas?.clientHeight);renderer.outputEncoding = THREE.sRGBEncoding;controls = new OrbitControls(camera, renderer.domElement);controls.enablePan = false;controls.autoRotate = true;let obj: any = {list: this.list,model: this.model,canvas: this.canvas,}, that = this;for(let key in obj) {Object.defineProperty(that, key, {get: function() {return obj[key];},set: function(value) {throw new Error("当前属性：'"+key+"'的值, 无法进行修改");}});   }};
}const animate = () => {controls.autoRotateSpeed = speed;controls.update();renderer.render(scene, camera);requestAnimationFrame(animate);
};const updateSticker = (name: string, url: string) => {array.forEach((item: any) => {if (item.label == name) {let getsheet = new THREE.TextureLoader().load(url);getsheet.flipY = false;getsheet.encoding = THREE.sRGBEncoding;item.loadBear.material = new THREE.MeshBasicMaterial({map: getsheet,});}});
};defineExpose({ Init, updateSticker });
</script>

组件调用

<template><div id="tddis"><modelCreation ref="Three" @load="load"><div><canvas id="canvas"></canvas></div></modelCreation><view class="maskLoading" v-if="data.maskLoading"><van-loading color="#0094ff" size="60px" text-size="30px" vertical>模型已加载{{data.time}}···</van-loading></view></div>
</template>

<script setup lang="ts">const Three: any = ref(null);
const data: any = reactive({time:null,maskLoading: false,
});onMounted(() => {new Three.value.Init({el: "#canvas",modelUrl: "./sijiantao3.glb",list: [{label: "床板", name: "dizuo", loadBear: null, url: "./chuangban.png" },{label: "床头垫", name: "kaobeiR", loadBear: null, url: "./chuangtoudian.png" },{label: "被子", name: "Group22783", loadBear: null, url: "./beizi.png" },{label: "床单", name: "chuangli", loadBear: null, url: "./chuangdan.png" },{label: "枕头Left", name: "Plane003", loadBear: null, url: "./previewFix.jpg" },{label: "枕头Right", name: "Plane003001", loadBear: null, url: "./06.png" },],});
});// 模型加载中，返回加载进度
const load = (val: number) => {data.maskLoading = true;data.time = val;if(val == 100) {data.maskLoading = false;}
};
</script>

<style lang="scss" scoped>
#tddis {width: 100vw;height: 100vh;overflow: hidden;box-sizing: border-box;
}
#canvas {width: 100vw;height: 100vh;box-sizing: border-box;background-color: rgba(0, 0, 0, 0.1) !important;
}.maskLoading {top: 0;left: 0;width: 100%;height: 100%;display: grid;position: fixed;place-items: center;background: rgba(0,0,0,0.6);
}
</style>

threejs封装加载 .glb 格式模型，修改贴图相关推荐

CESIUM加载glb的模型
CESIUM加载glb的模型 1.首先有一个glb格式的模型 // 加载gltf的模型 //url模型路径可以是.glb或者gltf等,height距地高度0为贴地 function createM ...
cesium模型加载-加载fbx格式模型
整体思路: fbx格式→dae格式→gltf格式→cesium加载gltf格式模型具体方法: 1. fbx格式→dae格式工具:3dsMax, 3dsMax插件:OpenCOLLADA, 下载地址 ...
three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型 1.demo效果 2.实现要点 2.1 PDB模型放置路径 2.2 加载PDB模型 2.3 处理分子顶点 2.4 处理分子连线 3.demo代码 1.demo效果如上图,该dem ...
Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
WebGL（ThreeJS）加载乐高Ldraw模型案例
在ThreeJS就有加载乐高Ldraw的例子,上面是加载MPD文件,相当于当所有的dat模型都集成到同一个文件里: 可以看到官方的例子里已经将加载模型的方法都共享出来了. 并且还有了模型的步骤展示功能 ...
超图桌面版加载obj 3D模型 - 2
在 https://blog.csdn.net/bcbobo21cn/article/details/109041525 里,加载obj格式模型没有出来效果: 下面来看一下其他方法:当前用的版本是10 ...
解决 Threejs 无法加载 GLTF 模型的材质，报错 Unknown extension “KHR_materials_pbrSpecularGlossiness
背景 threejs 的版本是 0.147.0.使用 GLTFLoader 加载 GLTF 模型文件发现材质(Material)没有显示. 打开开发者工具发现有 Warning:THREE.GLTFL ...
Cesium加载GLB和GLTF模型文件踩坑实录
遇到问题各种搜索引擎走了一波都只简单的说了相同的加载方法,可以想象有多少人看了后心里暗骂一句这XX不都是相同的文章吗,有意思吗? 最终在大佬的帮助下解决了加载模型的问题要想加载在cesium中加载本 ...
Panda3D如何加载obj格式的3D模型文件
在上文中,讲了如何将max.obj.mb.fbx等主流格式的3D模型文件转换为egg.gltf格式,Panda3D可以加载的格式.在上文末尾,博主临时看到了一种方式,可以让Panda3d直接加载o ...

threejs封装加载 .glb 格式模型，修改贴图

threejs封装加载 .glb 格式模型，修改贴图相关推荐

最新文章

热门文章