threejs中loader异步转同步

原创 已于 2023-09-20 10:11:22 修改 · 783 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

于 2023-03-23 16:26:42 首次发布
该代码段定义了一个名为asyncLoadObj的函数，用于异步加载TDS格式的3D模型。它创建了一个TDSLoader实例，使用Promise进行加载操作。当模型加载成功时，将其添加到GlobalApi的scene3D中，并调用OnUpdate方法。如果加载过程中出现错误，函数将打印错误信息并拒绝Promise。

    async LoadObj(tUnit: any) {

        this.mUnit = tUnit;

        var that = this;

        var loader = new TDSLoader();

        return new Promise((resolve, reject) => {

            loader.load(

                GlobalApi.m_strHttp + "jiaju/" + this.mJsonData.m_strFile,

                function (object) {

                    GlobalApi.scene3D.add(object);

                    that.mObject = object;

                    that.OnUpdate();

                    resolve(object);

                },

                function (event) {},

                function (error) {

                    //出错删除

                    console.error("模型终止加载或资源异常:", error);

                    reject(error);

                },

            );

        });

    }

想吃梨.
关注
ThreeJS入门（168）：THREE.ImageLoader 知识详解，示例代码
大剑师兰特的GIS世界
11-21 1062
THREE.ImageLoader 是 Three.js 库中的一个类，用于加载图像资源并将其作为纹理或直接绘制在 canvas 上*
ThreeJS入门（204）：THREE.GLTFLoader 知识详解，示例代码
大剑师兰特的GIS世界
12-27 1261
`THREE.GLTFLoader` 是 Three.js 中的一个加载器，用于加载 `.gltf` 或 `.glb` 文件格式的 3D 模型。GLTF（GL Transmission Format）是一种高效的文件格式，用于存储和传输 3D 模型及其元数据。`.gltf` 是一个 JSON 文本格式，而 `.glb` 是二进制格式，两者都可以包含完整的 3D 场景、模型、纹理、材料等信息。
2种方法：关于threejs模型加载异步导致问题的解决方案(异步变同步)
learn_12的博客
12-14 2475
关于threejs模型加载异步导致问题的解决方案(异步变同步)
Three.js - three.js加载资源的异步操作
ithanmang
07-30 5527
js中的回调函数一般都是异步操作的，同样three.js中像加载模型数据，和一些其它的资源文件的加载也是通过回调函数的方式来获取的，所以它们也是异步的。在此之前，我还不知道怎么把那些回调函数改成同步操作。 因为，做的一个项目要加载json字体文件，所以需要在外部使用字体的配置，并且只加载一次字体文件，而不是调用一次就加载一次，所以，就遇到了这个回调函数异步操作的问题。 例如我们使用FontLo...
Three.js 更改加载的模型的位置 异步加载
大英雄不该去雪山打滚
08-06 6088
进度一点点前进，外部模型这一方面已经是实现模型的加载，模型的动画的播放控制了，接下来的一步是通过代码去控制加载好的模型的“动画”，这个动画是指简单的移动、旋转、缩放之类，提前准备的时候是用了一个threejs创建的Cube，把它作为一个全局变量，在animate()直接进行修改position属性，是很简单就实现了，开始用同样的方法去给到加载好的模型，然后就出现了一个困扰了我一天多的问题，chrome控制台给出的错误就是，我不能去更改一个undefined的位置属性，怎么就未定义了呢?我明明获取了呀，而且，
three.js Loader
前端学习杂记，记录学习中的前端知识。
09-04 1420
crossOrigin 字符串用于实现 CORS ，以从允许 CORS 的其他域加载url。— crossOrigin字符串用于实现CORS，以从允许CORS的其它域加载url。该方法需要被所有具体的加载器来实现。它包含了从后端加载资产的逻辑。将从中加载额外资源（例如纹理贴图）的基本路径。— 一个字符串，包含要加载的文件的路径/URL。url — 从基本URL中，进行提取的URL。将从中加载资产的基本路径。— 设置独立资源（如纹理贴图）的基本路径。创建一个新的Loader。— 设置资产的基本路径。
threejs中将loader里面的返回值return出来
weixin_44870969的博客
09-09 675
threejs中将loader里面的返回值return出来
Three.js中的加载器与资源管理：构建丰富3D场景的关键
s13166803785的博客
03-23 50
Three.js 作为目前最主流的 JavaScript 3D 渲染库之一，凭借其简洁的 API 和强大的功能，成为构建沉浸式体验和交互式 3D 场景的重要工具。然而，在实现复杂场景的过程中，资源加载与管理始终是性能与用户体验的瓶颈。从传统的异步加载到未来的智能优化，开发者需要持续关注技术前沿，探索更高效的资源调度策略。这篇文章旨在为开发者提供一个系统性的视角，从基础加载器技术到前沿资源管理的探索，既有实践代码，也包含对未来技术的大胆预测，展现了科技与创新的无限可能。在这个示例中，我们不仅展示了如何使用。
基于Three.js的多视图3D Tiles同步可视化技术解析
一路走一路学，总会不落后
03-04 447
已成为工业级3D应用的标准需求。在BIM可视化、数字孪生和GIS领域，
Three.js 核心功能：解锁3D图形的无限潜力
chaosweet的博客
01-08 1215
想象力是地球上最有限的资源之一，而技术的任务就是让这种资源尽可能地不受限制。
THREE各种格式文件加载大全*Loader.js
07-14
THREE各种格式文件最新版加载大全，一定能帮大家的忙。*Loader.js, 3MFLoader, AMFLoader, AssimpJSONLoader, AWDLoader, DDSLoader, FBXLoader, KMZLoader, MTLLoader, OBJLoader, PLYLoader, STLLoader, TTFLoader, VTKLoader 等５０多个js文件，很多种格式的模型都可以加载。
three-fbx-loader
05-08
三个fbx加载器 Kyle-Larson和Takahiro的重新打包为节点模块 安装 npm i --save three-fbx-loader 用法 var THREE = require ( 'three' ) ; var FBXLoader = require ( 'three-fbx-loader' ) ; var loader = new FBXLoader ( ) ; var scene = new THREE . Scene ( ) ; loader . load ( './path/to/model.fbx' , function ( object3d ) { scene . add ( object3d ) ; } ) ;
three.js篇之模型加载
ae_pppppp的博客
08-04 902
主要加载了2个模型，一个是头发，一个是脸，因为模型是电脑下载下来的，内部没有其他节点，所以对于更改模型颜色不生效。文章主要是加载了一个模型，并对其进行了一些美化操作。
Loader异步装载
张小贝的博客
06-30 1217
Loader异步装载 Loader使在Activity或Fragment中异步加载数据变得简单。 Loader装载器具有如下特性： 1.它们对每个Activity和Fragment都有效 2.他们提供了异步加载数据的能力 3.它们监视数据源的一举一动并在内容改变时传送新的结构 4.当由于配置改变而被重新创建后，它们自动重连到一个加载器的游标。
three.js 加载器
yinge0508的博客
02-22 1789
1，TextureLoader 纹理加载器，用来加载 texture 的一个类。通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。 // 初始化纹理加载器 var loader = new THREE.TextureLoader(); // 加载一个资源 loader.load('./Earth.png', // 资源加载完成后的回调函数 function(tex
Threejs加载字体加载FontLoader与TTFLoader
qq_33298964的博客
04-25 1728
在 Three.js 中使用自定义字体进行 3D 文本渲染。它最初是以 JSON 格式加载字体，现在Three.js已经有一个 TTFLoader 类，可用于加载 TTF 字体文件并将它们用作 TextGeometry！
Three.js 单模型，组合模型加载
qq_45853174的博客
11-24 2596
three.js 基础模型加载可查看 https://threejs.org/ 上面涵盖各种模型的加载器及加载方式，在此不再赘述。本文主要介绍如何使用vue配合three.js 库实现各种格式3d 模型文件的加载，组合式模型文件的加载，以及如何去更新相机的设置，调整模型的大小缩放去达到最适合观察的角度与大小。既然选择了远方，便只顾风雨兼程。
【threeJS】获取渲染结果
liuzhicheng1845的博客
08-11 1038
下载当前时刻的渲染画布 var canvas=window.renderer.domElement;//获取画布 let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 let a = document.createElement("a"); // 生成一个a元素 let event = new MouseEvent("click"); // 创建一个单击事件 a.download ="IMG"; // 设置图片名称 a.href = url;
threeJS常见使用的 loader加载器
最新发布
ct978的博客
07-13 391
threeJs 常见的loader加载器
threejs texture clone
07-03
在 Three.js 中克隆一个纹理（Texture）通常涉及创建一个新的 `THREE.Texture` 实例，并将原始纹理的属性复制到新实例中。由于纹理加载通常是异步操作，因此需要确保纹理已经加载完成后再进行克隆操作。以下是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值