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 上*
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。— 设置资产的基本路径。
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各种格式文件加载大全*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 单模型，组合模型加载
qq_45853174的博客
11-24 2596
three.js 基础模型加载可查看 https://threejs.org/ 上面涵盖各种模型的加载器及加载方式，在此不再赘述。本文主要介绍如何使用vue配合three.js 库实现各种格式3d 模型文件的加载，组合式模型文件的加载，以及如何去更新相机的设置，调整模型的大小缩放去达到最适合观察的角度与大小。既然选择了远方，便只顾风雨兼程。
【threeJS】获取渲染结果
liuzhicheng1845的博客
08-11 1039
下载当前时刻的渲染画布 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加载器
webpack(高级)--创建自己的loader 同步loader 异步loader loader参数校验
聪明勇敢有力气的博客
02-16 714
webpack(高级)--创建自己的loader 同步loader 异步loader loader参数校验
threejs加载.gltf文件(模型加载全流程)
u014291990的博客
12-10 5276
本节课，以gltf格式为例，给大家讲解加载外部三维模型的整个过程。场景、光源、渲染器、相机控件等前面说过基础代码，本节课不专门讲解，主要是把下面三部，给大家全流程演示一遍。
threeJS15-Loader01-GLTF
谷子的博客
12-16 1950
需要电子档书籍或者源码可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！ 博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！ 本章节学习的内容可以从的官方文档中找到! 涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面！ ...
three.js GLTFLoader加载外部三维模型
weixin_44242600的博客
08-15 3720
本文主要讲述了GLTF格式，GLTFLoader加载外部gltf模型、模型获取，模型遍历等，以及讲述纹理贴图颜色偏差解决方案。
threejs中将loader里面的返回值return出来
weixin_44870969的博客
09-09 675
threejs中将loader里面的返回值return出来
threejs texture clone
07-03
在 Three.js 中克隆一个纹理（Texture）通常涉及创建一个新的 `THREE.Texture` 实例，并将原始纹理的属性复制到新实例中。由于纹理加载通常是异步操作，因此需要确保纹理已经加载完成后再进行克隆操作。以下是一个实现方法： 首先，使用 `THREE.TextureLoader` 加载原始纹理。这是一个异步过程，可以通过 `Promise` 来处理[^1]： ```javascript const loader = new THREE.TextureLoader(); loader.load('path/to/texture.jpg', function(texture) { // 在回调函数中处理已加载的纹理 const clonedTexture = texture.clone(); // 可以对克隆后的纹理进行进一步设置 clonedTexture.wrapS = THREE.RepeatWrapping; clonedTexture.wrapT = THREE.RepeatWrapping; clonedTexture.repeat.set(4, 4); // 使用克隆后的纹理创建材质 const material = new THREE.MeshBasicMaterial({ map: clonedTexture }); // 创建网格并添加到场景中... }); ``` 在这个例子中，我们调用了 `texture.clone()` 方法来创建原始纹理的一个副本。这个方法会复制所有与纹理相关的属性，包括但不限于 `wrapS`, `wrapT`, `repeat`, `magFilter`, `minFilter` 等等[^2]。 如果你已经有了一个同步加载的纹理，你可以直接调用 `clone` 方法而不需要等待异步加载完成： ```javascript // 假设 texture 已经被正确加载了 const clonedTexture = texture.clone(); // 设置克隆后的纹理参数 clonedTexture.wrapS = THREE.MirroredRepeatWrapping; clonedTexture.wrapT = THREE.MirroredRepeatWrapping; clonedTexture.repeat.set(2, 2); // 创建带有克隆纹理的材质 const materialWithClonedTexture = new THREE.MeshBasicMaterial({ map: clonedTexture }); ``` 需要注意的是，WebGL 要求用于纹理映射的图片尺寸必须是 2 的幂次方（例如 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048 等），每个维度都必须独立满足这一条件。这是 WebGL 的限制，而不是 Three.js 自身的限制[^4]。 通过这种方式，可以轻松地在 Three.js 中克隆纹理，并且为不同的对象应用相同但独立配置的纹理映射。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值