首页 > 其他分享 >three.js导出场景内模型为glb,gltf

three.js导出场景内模型为glb,gltf

时间:2024-03-04 11:59:51浏览次数:15  
标签:currSelectObj glb THREE three Object3D objects animations js children

使用three,导出当前场景内指定模型为 glb,或者gltf格式

import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'


    //导出模型为GLTF
    public exportGLTFModel() {
        let currSelectObj: THREE.Object3D = SMART.scene.children[2]; // 需要导出的模型。可以自己传入一个
        
        let objects: THREE.Object3D | THREE.Object3D[] = currSelectObj;
        if(currSelectObj.children && currSelectObj.children.length > 0) {
          objects = currSelectObj.children.filter((item) => !this.specialType(item,['GridHelper']));
          if (objects.length === 0) {
            console.log('当前场景中没有任何模型');
            return
          }
        }
        const exporter = new GLTFExporter();
        const animations = this.getAnimations( currSelectObj );
        exporter.parse( objects, ( result )=> {
            console.log('模型转换完毕');
            this.saveString( JSON.stringify( result, null, 2 ), 'smart.gltf' );
        }, function(error) {
            console.log('导出失败:'+ error);
        }, { animations: animations } );
    }
   // 导出模型为glb格式
    public exprotGlbModel(){
        
        let currSelectObj: THREE.Object3D = SMART.scene.children[2];// 需要导出的模型。可以自己传入一个
        
        const exporter = new GLTFExporter();
        const animations = this.getAnimations( currSelectObj );

        let objects: THREE.Object3D | THREE.Object3D[] = currSelectObj;
        if(currSelectObj.children && currSelectObj.children.length > 0) {
            objects = currSelectObj.children.filter((item) => !this.specialType(item,['GridHelper']));
            if (objects.length === 0) {
              console.log('当前场景中没有任何模型');
              return
            }
        }
        exporter.parse( objects, ( result )=> {
            console.log('模型转换完毕');
            this.saveArrayBuffer( result as ArrayBuffer, 'smart.glb' );
        }, function(error) {
            console.log('导出失败:'+ error);
        }, { animations: animations, binary: true } );
        
    }
    //转换为二进制
    public saveArrayBuffer (buffer: BlobPart, filename: string) {
      this.save(new Blob([buffer], { type: 'application/octet-stream' }), filename)
    }

    //转换为字符串
    public saveString (text: BlobPart, filename: string) {
        this.save(new Blob([text], { type: 'text/plain' }), filename)
    }

    //保存文件
    public save(blob: Blob, filename: string) {
      const link = document.createElement('a')
      if (link.href) {
        URL.revokeObjectURL(link.href)
      }
      link.href = URL.createObjectURL(blob)
      link.download = filename || 'data.json'
      link.dispatchEvent(new MouseEvent('click'))
    }
    

    //排除指定的一些类型
    public specialType(obj: THREE.Object3D, otherList: string[] = []) {
        let typeList = [
        'AxesHelper',
        'BoxHelper',
        'TransformControls',
        'VertexNormalsHelper',
        ].concat(otherList)

        return typeList.includes(obj.type)
    }
    //获取动画组
    public getAnimations (scene: THREE.Object3D) {
      const animations: THREE.AnimationClip[] = []
      scene.traverse(function (object) {
        animations.push(...object.animations)
      })
      return animations
    }

结束。

标签:currSelectObj,glb,THREE,three,Object3D,objects,animations,js,children
From: https://www.cnblogs.com/fanjlqinl/p/18051503

相关文章

  • JSON.parse解析字符串报错-SyntaxError: Unexpected token ‘ in JSON at position 报
    “SyntaxError:Unexpectedtoken’inJSONatposition”报错原因是因为解析的字符串对象中,JSON.parse无法识别;JSON.parse可以将标准的json类型数据转换为JavaScript对象,如果数据不是正确的json类型的数据则会控制台报错,可能会阻断代码的正常运行我们可以写一个函数来......
  • nodejs安装、编译、执行 & npm 使用
    前言全局说明nodejs安装&npm使用nodejs是一个解释器,只是它运行再后端,在命令行看到执行结果;如果用html+js写的页面用浏览器打开,那就是可以在前台看到js执行结果。一、官网官网:https://nodejs.org/文档:https://nodejs.org/en/docs/中文网:http://nodejs.cn/GitHub......
  • 【JS逆向百例】某词霸翻译逆向分析
    声明本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!本文章未经许可禁止转载,禁止任何修改后二次传播,擅自使用本文讲解的技术而导致的任何意外,作......
  • js页面当中没有写回车事件,但是有回车效果
    前两天遇到一个问题,研究了我很差事件。问题如下:页面只有一个文本框,没有写任何回车事件,但是点回车的时候,就会触发回车,回传页面。于是各种google,终于有了结果:如果表单里有一个type=”submit”的按钮,回车键生效。如果 表单里只有一个type=”text”的input,不管按钮是什么type,回......
  • xlua - 增加lua-cjson库
    xlua貌似不支持单独动态加载cjson.dll,试了各种方式,都是会造成Unity闪退,也不知道原因。解决办法就是直接编译进xlua.dll 1)下载lua-cjson源码,并解压到xlua的build文件夹根目录GitHub-openresty/lua-cjson:LuaCJSONisafastJSONencoding/parsingmoduleforLua 2......
  • 【python接口自动化系列】python + pytest + requests + allure + jsonpath + pyyaml,
     前置基础:python虚拟环境的创建、操作、迁移等python操作yamlpython操作mysqlpytest简易教程 配套练习环境(含相关接口):https://www.cnblogs.com/uncleyong/p/17165143.html 如果文章不能访问,请联系处理,wx:ren168632201 python接口自动化系列(01):自动化测试框......
  • Nestjs系列 Nestjs基础(二)
    providers使用该内容可以结合Nestjs中文网-自定义提供者查看创建一个nest项目,创建一个Personcrud模块。providers写法providers完整和简写@Injectable()装饰器将PersonService类标记为提供者。然后在Module中声明,即和PersonService做关联,个人感觉provider......
  • JSOI2024 游记
    本文使用CCBY协议发布。Day0(2024.3.1)坐高铁到达南京。路上打了SA-IS,感觉全忘光了。/kk签到时被教练带着转了一圈NFLS。捡到了一张社保卡。还到签到处的时候发现是某位老师的。rp++。试机时紧急搜了将CapsLock映射为Ctrl的方法。setxkbmap-optionctrl:nocapsD......
  • npm 包 package.json 配置文件
    package.json文件每个前端项目中都有package.json文件,它是用于声明依赖的npm包配置文件。1.生成package.json文件yarninit-y{"name":"package.json文件","version":"1.0.0","main":"index.js","license":......
  • C# 调用Web Api post提交json格式
    转载:https://blog.csdn.net/q_17600689511/article/details/82735172?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-82735172-blog-86551903.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=di......