threejs中loader异步转同步

已于 2023-09-20 10:11:22 修改
阅读量715 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 vue.js
于 2023-03-23 16:26:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/learn_12/article/details/129731239
该代码段定义了一个名为asyncLoadObj的函数，用于异步加载TDS格式的3D模型。它创建了一个TDSLoader实例，使用Promise进行加载操作。当模型加载成功时，将其添加到GlobalApi的scene3D中，并调用OnUpdate方法。如果加载过程中出现错误，函数将打印错误信息并拒绝Promise。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    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入门（204）：THREE.GLTFLoader 知识详解，示例代码
大剑师兰特的GIS世界
12-27 1149
`THREE.GLTFLoader` 是 Three.js 中的一个加载器，用于加载 `.gltf` 或 `.glb` 文件格式的 3D 模型。GLTF（GL Transmission Format）是一种高效的文件格式，用于存储和传输 3D 模型及其元数据。`.gltf` 是一个 JSON 文本格式，而 `.glb` 是二进制格式，两者都可以包含完整的 3D 场景、模型、纹理、材料等信息。
基于Three.js的多视图3D Tiles同步可视化技术解析
一路走一路学，总会不落后
03-04 299
已成为工业级3D应用的标准需求。在BIM可视化、数字孪生和GIS领域，
Threejs加载字体加载FontLoader与TTFLoader
qq_33298964的博客
04-25 1565
在 Three.js 中使用自定义字体进行 3D 文本渲染。它最初是以 JSON 格式加载字体，现在Three.js已经有一个 TTFLoader 类，可用于加载 TTF 字体文件并将它们用作 TextGeometry！
Three.js - three.js加载资源的异步操作
ithanmang
07-30 5468
js中的回调函数一般都是异步操作的，同样three.js中像加载模型数据，和一些其它的资源文件的加载也是通过回调函数的方式来获取的，所以它们也是异步的。在此之前，我还不知道怎么把那些回调函数改成同步操作。 因为，做的一个项目要加载json字体文件，所以需要在外部使用字体的配置，并且只加载一次字体文件，而不是调用一次就加载一次，所以，就遇到了这个回调函数异步操作的问题。 例如我们使用FontLo...
【5月实习总结】0基础上手threejs一个月，这期间我遇到过的问题
最新发布
欢迎来到我的频道~
06-12 621
ThreeJS开发常见问题总结：1) 贴图顺序问题需注意加载时序，建议使用回调或Promise确保纹理加载完成；2) 贴图方向可能存在Y轴翻转，可通过texture.flipY调整；3) WebGL兼容性问题需做好功能检测，建议使用WebGL1作为基础支持，对WebGL2特性做降级处理；4) 其他常见问题包括性能优化、跨设备适配等，开发时需特别注意。建议使用最新稳定版ThreeJS并参考官方文档解决兼容性问题。
2种方法：关于threejs模型加载异步导致问题的解决方案(异步变同步)
learn_12的博客
12-14 2404
关于threejs模型加载异步导致问题的解决方案(异步变同步)
Three.js 更改加载的模型的位置 异步加载
大英雄不该去雪山打滚
08-06 6042
进度一点点前进，外部模型这一方面已经是实现模型的加载，模型的动画的播放控制了，接下来的一步是通过代码去控制加载好的模型的“动画”，这个动画是指简单的移动、旋转、缩放之类，提前准备的时候是用了一个threejs创建的Cube，把它作为一个全局变量，在animate()直接进行修改position属性，是很简单就实现了，开始用同样的方法去给到加载好的模型，然后就出现了一个困扰了我一天多的问题，chrome控制台给出的错误就是，我不能去更改一个undefined的位置属性，怎么就未定义了呢?我明明获取了呀，而且，
three.js Loader
前端学习杂记，记录学习中的前端知识。
09-04 1337
crossOrigin 字符串用于实现 CORS ，以从允许 CORS 的其他域加载url。— crossOrigin字符串用于实现CORS，以从允许CORS的其它域加载url。该方法需要被所有具体的加载器来实现。它包含了从后端加载资产的逻辑。将从中加载额外资源（例如纹理贴图）的基本路径。— 一个字符串，包含要加载的文件的路径/URL。url — 从基本URL中，进行提取的URL。将从中加载资产的基本路径。— 设置独立资源（如纹理贴图）的基本路径。创建一个新的Loader。— 设置资产的基本路径。
在Threejs导入显示点云数据
热门推荐
weixin_44492024的博客
10-08 1万+
在Threejs导入并显示点云数据 最近在项目中遇到需求，需要在web端显示点云数据。将我的实现步骤介绍在这里供大家参考。我使用的是threejs开源库，最终实现 数据格式 原本是点云数据是ply格式的。在threejs中有ply导入的loader，经过简略的阅读和学习。我只找到了它加载mesh文件的支持函数，对于点云没有找到相关的支持。于是我就考虑使用对html来说更容易读取的json格式存储和...
【vue项目】开启mock，threejs模型数据无法加载
onionlsh的博客
02-05 1153
场景：项目需求使用threeJS加载模型，模型数据放在OSS上；前端开发时，使用mock模拟接口数据。 因为mock会对所有的http请求进行拦截，源码会根据是否有匹配的数据模板，来决定走原生XHR还是mockXHR，附上mock初始化request的源码： // 初始化 Request 相关的属性和方法 Util.extend(MockXMLHttpRequest.prototype, { // https://xhr.spec.whatwg.org/#the-open()-method
Three.js中的加载器与资源管理：构建丰富3D场景的关键
s13166803785的博客
03-23 24
Three.js 作为目前最主流的 JavaScript 3D 渲染库之一，凭借其简洁的 API 和强大的功能，成为构建沉浸式体验和交互式 3D 场景的重要工具。然而，在实现复杂场景的过程中，资源加载与管理始终是性能与用户体验的瓶颈。从传统的异步加载到未来的智能优化，开发者需要持续关注技术前沿，探索更高效的资源调度策略。这篇文章旨在为开发者提供一个系统性的视角，从基础加载器技术到前沿资源管理的探索，既有实践代码，也包含对未来技术的大胆预测，展现了科技与创新的无限可能。在这个示例中，我们不仅展示了如何使用。
THREE各种格式文件加载大全*Loader.js
07-14
THREE各种格式文件最新版加载大全，一定能帮大家的忙。*Loader.js, 3MFLoader, AMFLoader, AssimpJSONLoader, AWDLoader, DDSLoader, FBXLoader, KMZLoader, MTLLoader, OBJLoader, PLYLoader, STLLoader, TTFLoader, VTKLoader 等５０多个js文件，很多种格式的模型都可以加载。
three.js篇之模型加载
ae_pppppp的博客
08-04 871
主要加载了2个模型，一个是头发，一个是脸，因为模型是电脑下载下来的，内部没有其他节点，所以对于更改模型颜色不生效。文章主要是加载了一个模型，并对其进行了一些美化操作。
Loader异步装载
张小贝的博客
06-30 1201
Loader异步装载 Loader使在Activity或Fragment中异步加载数据变得简单。 Loader装载器具有如下特性： 1.它们对每个Activity和Fragment都有效 2.他们提供了异步加载数据的能力 3.它们监视数据源的一举一动并在内容改变时传送新的结构 4.当由于配置改变而被重新创建后，它们自动重连到一个加载器的游标。
three.js 加载器
yinge0508的博客
02-22 1703
1，TextureLoader 纹理加载器，用来加载 texture 的一个类。通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。 // 初始化纹理加载器 var loader = new THREE.TextureLoader(); // 加载一个资源 loader.load('./Earth.png', // 资源加载完成后的回调函数 function(tex
ThreeJS入门（168）：THREE.ImageLoader 知识详解，示例代码
大剑师兰特的GIS世界
11-21 1013
THREE.ImageLoader 是 Three.js 库中的一个类，用于加载图像资源并将其作为纹理或直接绘制在 canvas 上*
Three.js 单模型，组合模型加载
qq_45853174的博客
11-24 2410
three.js 基础模型加载可查看 https://threejs.org/ 上面涵盖各种模型的加载器及加载方式，在此不再赘述。本文主要介绍如何使用vue配合three.js 库实现各种格式3d 模型文件的加载，组合式模型文件的加载，以及如何去更新相机的设置，调整模型的大小缩放去达到最适合观察的角度与大小。既然选择了远方，便只顾风雨兼程。
【threeJS】获取渲染结果
liuzhicheng1845的博客
08-11 993
下载当前时刻的渲染画布 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;
webpack(高级)--创建自己的loader 同步loader 异步loader loader参数校验
聪明勇敢有力气的博客
02-16 695
webpack(高级)--创建自己的loader 同步loader 异步loader loader参数校验
three.js图片介绍
04-05
### Three.js 中图片加载与显示的方法 在 Three.js 的开发过程中，图片加载是一个常见的需求。以下是关于如何通过 `ImageBitmapLoader` 和其他方式来实现图片加载并将其应用到场景中的详细说明。 #### 使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值