首页 > 其他分享 >基于 three.js 加载器分别加载模型

基于 three.js 加载器分别加载模型

时间:2023-11-10 20:01:20浏览次数:28  
标签:const three js path model 加载

点击查看代码
/**
 * 参数:模型文件路径,成功回调函数
 * 
 * 基于 three.js 加载器分别加载模型
 * 
 * 全部加载后通过回调函数传出打印
 */
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import * as THREE from 'three'
export function loadManager (pathList, successFn) {
  let model = []
  // Instantiate a loader
  const gltfLoader = new GLTFLoader()
  const fbxLoader = new FBXLoader()
  // Load a glTF resource
  const loadModel = (path) => {
    return new Promise((resolve) => {
      if (path.indexOf('fbx') > -1) {
        fbxLoader.load(path, (obj) => {
          resolve({
            model: obj,
            url: path
          });
        });
      } else if (path.indexOf('gltf') > -1) {
        gltfLoader.load(path, (gltf) => {
          resolve({
            model: gltf.scene,
            url: path
          });
        });
      }
    });
  };
  
  (async () => {
    const modelPromises = pathList.map((path) => loadModel(path));
    const model = await Promise.all(modelPromises);
    successFn(model);
  })();
  
}

标签:const,three,js,path,model,加载
From: https://www.cnblogs.com/zsnhweb/p/17824919.html

相关文章

  • 高效技巧:Node.js文件写入
    文件写入是 Node.js 中的一项重要任务,它允许你将数据保存到本地文件系统中,供后续使用。这个功能在许多应用中都有广泛的应用,包括数据备份、日志记录、配置文件更新等。在本文,我们将介绍如何在Node.js中执行文件写入操作,提供基本概念、常用方法、使用场景和实践案例。基本概念在......
  • Vue中网络图片懒加载工具
    在滑动列表视图中如果有网络图片需要加载直接给imag标签赋值src,会造成没有显示的item中图片也直接加载,势必浪费网络资源。创建一个插件,让列表中的item出显的时候在加载图片从而减少网络请求。具体方法就是给img标签添加一个新的属性暂时先保存对应的url,当item滑动出现到一定值时......
  • threejs的坐标渲染和着色
    点击查看代码functioncreateBasic(){//目标:了解顶点坐标绘制正方形//1.准备BufferGemotry缓冲几何图形//2.准备32位浮点数的数组,定义矩形的顶点位置//3.准备BufferAttribute属性缓冲对象,保存几何图形的属性值//4.把属性设置给几何图形对象//......
  • 【开源】基于Vue.js的社区买菜系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的社区买菜系统包含菜品分类模块、菜品档案模块、菜品订单模块、菜品收藏模块、收货地址模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,社区买菜系统基于角色的......
  • 【开源】基于Vue.js的音乐偏好度推荐系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的音乐偏好度推荐系统,包含了音乐档案模块、我的喜爱配置模块、每日推荐模块和通知公告模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,音乐偏好度推荐系统基于......
  • 请问以下JS代码在Node环境下的输出顺序是?
    请问以下JS代码在Node环境下的输出顺序是?Promise.resolve().then(()=>{console.log('p1');}).then(()=>{console.log('p2');})process.nextTick(()=>{console.log('n1');process.nextTick(()=>{console.log('......
  • 修改Web网页中资源加载的优先级
    在Chrome浏览器中,网络请求的优先级分成了5个等级:Highest最高,如页面HTML资源和CSS文件;High高,如正文图片请求资源;Medium中等,如页面的业务JavaScript文件请求;Low低,如内联的Base64资源,异步加载的JavaScript文件请求;Lowest最低,如发送的统计请求;调整preload预加载默认的优......
  • (四)Spring源码解析:bean的加载流程解析
    一、概述在前几讲中,我们着重的分析了Spring对xml配置文件的解析和注册过程。那么,本节内容,将会试图分析一下bean的加载过程。具体代码,如下图所示:1.1>doGetBean(...)针对bean的创建和加载,我们可以看出来逻辑都是在doGetBean(...)这个方法中的,所以,如下就是针对于这个方法的整体源码注......
  • 深入探讨Vue.js核心技术及uni-app跨平台开发实践
    Vue.js是一款流行的JavaScript框架,用于构建交互性强、响应式的用户界面。而uni-app是一个基于Vue.js的跨平台应用开发框架,允许开发者使用Vue.js的语法编写一次代码,然后将其部署到多个平台,如iOS、Android、Web等。本文将深入探讨Vue.js的核心技术,并介绍如何利用uni-app进行跨平台实......
  • vue-cli-service vue.config.js配置 productionSourceMap与webpack中的devtool 关联详
    https://webpack.js.org/configuration/devtool/https://cli.vuejs.org/zh/config/#productionsourcemap https://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/config/prod.js#L7 可以在源码中看到if(pro......