时间戳

首页 > 解决方案 > 加载模型-threejs

three.js - 加载模型-threejs

问题描述

我偶然发现了将对象加载到three.js 视口中的问题。教程表明需要使用THREE.ObjectLoader()。就我而言，ObjectLoader 在几个版本前已被删除。正确加载模型的方式是什么，或者我应该使用什么加载器（和文件格式）？我试过 GLTFLoader

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/GLTFLoader.js';
...
let loader = new GLTFLoader();

loader.load('./models/object.gltf',
    (obj) => {
        scene.add(obj);
    }
);

它抛出了三个.module.js:5562 THREE.Object3D.add：对象不是 THREE.Object3D 的实例。 CDN 加载器可以在这里找到 - https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/

更新：如何使用 ObjectLoader 导入数据？

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js;
...
let loader = new THREE.ObjectLoader();

loader.load('./models/object.json',
    (obj) => {
        scene.add(obj);
    }
);

/* throws
   three.module.js:39957 THREE.ObjectLoader: Loading "Geometry"
   is not supported anymore
*/

标签： three.js

解决方案

THREE.ObjectLoader尚未从存储库中删除。您可以使用它来加载three.js自定义 JSON 格式。

要加载在 Blender 等 DCC 工具中创作的外部模型，推荐的 3D 格式是 glTF。不幸的是，您没有正确使用加载程序。它应该是：

loader.load('./models/object.gltf',
    (gltf) => {
        scene.add(gltf.scene);
    }
);

我建议您查看官方文档页面，THREE.GLTFLoader以便更好地了解回调gltf参数的onLoad()结构。

推荐阅读