threeJs 模型obj和mtl格式转gltf格式并压缩

甲莹丙丁

已于 2023-10-10 10:43:56 修改

阅读量1.8k

点赞数

分类专栏： threejs 文章标签：前端

于 2022-09-15 16:46:07 首次发布

本文链接：https://blog.csdn.net/a_yingying/article/details/126873615

版权

threejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

threeJs 中，模型obj和mtl格式转gltf格式并压缩

这里需要下载一些文件，文件位置可以按照我这个放好，也可以自己放。
总共需要 lib文件夹，里面包含很多js ，还有一个 obj2gltf.js文件
下载请点前往下面网址，0资源分享的：
https://download.csdn.net/download/a_yingying/86539507

下载完成后
1.在 public里面建立 modules 文件夹
2.创建 gltf文件夹
3下载上面提供的 lib文件夹和 obj2gltf.js
4.把 obj mtl文件放在gltf 文件夹里面

在这里插入图片描述

1. 安装依赖

npm install --save obj2gltf
npm install gltf-pipeline

**2. 进入你所在的 obj位置 **
vscode 进入你所在的 obj位置，我放在了 public\modules\gltf下面

 cd .\public\modules\gltf\

**3. 将 xxx.obj 转换为 xxx.gltf **

例如：

 node obj2gltf.js -i jiegou01.obj -o jiegou1.gltf

4. 将gltf压缩90%

npx gltf-pipeline -i  jiegou1.gltf  -o  ../jiegou.gltf -d

5. 使用时候要解压
重点！！！！！
dracoLoader.setDecoderPath(‘js/draco/’)

https://download.csdn.net/download/a_yingying/86539507
在这里插入图片描述

**导入GLTFLoader DRACOLoader **

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

  const loader = new GLTFLoader(),
        path = 'modules/jiegou.gltf'
      //解压 gltf 因为 gltf被压缩了一次
      var dracoLoader = new DRACOLoader()
      //解压路径
      dracoLoader.setDecoderPath('js/draco/')
      loader.setDRACOLoader(dracoLoader)
      loader.load(
        path,
        (gltf) => {
          that.obj = gltf.scene
          that.obj.children.map((v, i) => {
            //克隆材质 防止材质一样 点击同材质颜色都改变了
            if (v.material) {
              v.material = that.obj.children[i].material.clone()
            }
          })

         // that.oldChildren = that.dealMeshMaterial(that.obj.children)

          that.obj.traverse((child) => {
            if (child.isMesh) {
              // 修改模型的材质
              child.material.transparent = true
              child.material.reflectivity = 0.9
              child.material.emissiveMap = child.material.map
              // 修改模型的材质
              child.castShadow = true
              // 可接受阴影
        	 child.receiveShadow = true
     		 }
          })
          //可接受阴影
          that.obj.receiveShadow = true

          //模型位置
          that.obj.position.set(0, 0, 0)
          //缩放比例
          that.obj.scale.set(0.012, 0.012, 0.012)
          //旋转
          that.obj.rotateY(Math.PI / 2)
          that.obj.name = 'gltf'
          that.scene.add(that.obj)
        
          //that.setSplitModel(that.obj)
        },
        (xhr) => {
        //进度条
          that.percentComplete = Math.floor((xhr.loaded / xhr.total) * 100)
          if (that.percentComplete === 100) {
            that.loading = false
          }
        },
        (error) => {
          console.error('An error happened', error)
        }
      )