threejs 加载模型遇到的问题

今天在处理threejs加载的Obj模型的时候,想让按照模型的不同类型一次加载到页面中,

根据模型中的children中的name来判断模型的类型

//consle.log(this.modelObject.children.length) //86
this.modelObject.traverse(child => {
      console.log("in")
      scene.add(child);
  })

以上代码 如果 不加scene.add(child)  控制台上打印出来的“in”的数量是正确的,一旦加上 scene.add(child) 这句话 控制台上打印出来的"in"数量就不正确

经过了解发现 scene.add() 方法 不会复制一份child到scene中,原有的child是属于this.modelObject的 如果直接将child添加到场景中 就会造成层级关系(父子关系)混乱

因此需要单独创建一份数据出来 添加到场景中 这样就能将模型中的数据依次加载到场景中

this.modelObject.traverse(child => {
      console.log("in")
      scene.add(child.clone());
  })

或者 
scene.add(...this.modelObject.children)

\

### 如何在 Three.js加载 GLB 模型 要在 Three.js加载 `.glb` 文件,可以使用 `GLTFLoader` 类。此类专门用于加载基于 glTF 格式的文件(包括 `.gltf` 和 `.glb`)。以下是实现这一功能的具体方法: #### 使用 GLTFLoader 加载 GLB 模型 Three.js 提供了一个名为 `GLTFLoader` 的工具来处理 glTF 文件的加载过程。通过该工具,开发者能够轻松导入 `.glb` 或 `.gltf` 文件并将其渲染到场景中。 ```javascript // 导入必要的模块 import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // 创建一个 GLTFLoader 实例 const loader = new GLTFLoader(); // 调用 load 方法加载 .glb 文件 loader.load( '/path/to/your/model.glb', // 替换为实际模型路径 (gltf) => { const model = gltf.scene; // 将模型添加到场景中 scene.add(model); }, undefined, (error) => { console.error('An error occurred while loading the GLB file:', error); } ); ``` 上述代码展示了如何利用 `GLTFLoader` 来加载 `.glb` 文件,并将它加入到 Three.js 场景中的方式[^1]。 #### 关键点说明 - **GLTFLoader**: 这是一个专用的加载器,支持加载 glTF 2.0 版本的资源,其中包括 `.gltf` 和 `.glb` 文件格式。 - **错误处理**: 在调用 `load()` 函数时提供回调函数以捕获可能发生的异常情况,从而提高程序健壮性。 - **性能优化**: 如果需要进一步提升效率或者自定义材质等内容,则可以通过调整加载选项完成更复杂的操作。 #### 注意事项 当尝试加载外部资产时,请确保服务器配置允许跨域资源共享(CORS),否则可能会遇到权限问题阻止资源正常加载
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值