three.js导入导出模型

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它提供了丰富的功能来创建和显示 3D 图形。然而，Three.js 本身并不直接提供导入和导出模型的完整解决方案，但它可以与其他库和工具结合使用来实现这些功能。

导入模型

Three.js 支持多种 3D 模型格式，如.obj、.gltf、.fbx等。要导入这些模型，你需要使用相应的加载器。Three.js 提供了多个加载器，如OBJLoader、GLTFLoader、FBXLoader等。

以下是一个使用GLTFLoader导入.gltf模型的示例：

【javascript】
// 引入 Three.js 和 GLTFLoader
import * as THREE from ‘three’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 设置相机位置
camera.position.z = 5;

// 创建光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);

// 加载模型
const loader = new GLTFLoader();
loader.load(‘path/to/your/model.gltf’, function (gltf) {
scene.add(gltf.scene);
render();
}, undefined, function (error) {
console.error(error);
});

// 渲染函数
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}

render();

导出模型

Three.js 本身并不提供直接导出模型的功能。但是，你可以使用其他工具或库来将 Three.js 场景中的数据导出为常见的 3D 模型格式。

一种常见的方法是使用three.js的Object3D.toJSON()方法将场景中的数据序列化为 JSON 格式，然后使用其他工具（如three-to-gltf）将这些数据转换为.gltf或.glb格式。

然而，这种方法可能无法完全保留原始模型的所有信息（如材质、动画等），因此它通常用于简单的场景或作为临时解决方案。

对于更复杂的导出需求，你可能需要使用专业的 3D 建模软件（如 Blender）或其他 3D 内容创建工具，这些工具通常提供了更强大和灵活的导出选项。

总之，虽然 Three.js 本身不直接提供完整的导入和导出模型功能，但你可以通过结合使用其他库和工具来实现这些需求。