1、模型导入导出编辑能力
1）支持导入基本类型模型
最常用，最适合作为web演示模型的是glb格式的，当前演示glb模型导入
javascript
// 1) 支持导入基本类型模型
const loader = new GLTFLoader();
loader.load('./three.js-master/examples/models/gltf/Horse.glb', (gltf) => {
// loader.load('./exported_model.gltf', (gltf) => {
const model = gltf.scene;
scene.add(model);
// 2) 支持缩放模型比例
model.scale.set(1, 1, 1);
// 3) 支持调整模型放置位置，角度姿态
model.position.set(0, 0, 0);
model.rotation.set(0, 0, 0);
}, undefined, (error) => {
console.error('模型加载失败: ', error);
});2）支持缩放模型比例
见上一节scale.set即可完成各轴的模型缩放比例
3）支持调整模型放置位置，角度姿态
见第一节的position属性可以设置位置
rotation属性可以设置角度
4）将模型整体导出
通过此方案可以将模型通过浏览器下载的方式下载下来。
javascript
// 4) 将模型整体导出
const exporter = new GLTFExporter();
function exportModel() {
exporter.parse(scene, (result) => {
const blob = new Blob([JSON.stringify(result)], { type: 'application/json' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'exported_model.gltf';
link.click();
});
}2、整体演示代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 模型导入导出示例</title>
<style>
body { margin: 0; overflow: hidden; }
#camera-info {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="camera-info"></div>
<script type="importmap">
{
"imports": {
"three": "./three.js-master/build/three.module.js",
"three/addons/": "./three.js-master/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from "three/addons/loaders/GLTFloader.js"
import {GLTFExporter} from "three/addons/exporters/GLTFExporter.js";
// 1) 创建画布
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2) 设置 camera 位置，朝向角度
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 1000); // 设置相机位置
camera.lookAt(scene.position); // 让相机朝向场景中心
// 设置控制轨道
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0.1, 0 );
controls.update();
controls.minDistance = 0.5;
controls.maxDistance = 1000;
controls.maxPolarAngle = 0.5 * Math.PI;
// 5) 支持动态显示摄像头位置、角度、缩放信息
const cameraInfo = document.getElementById('camera-info');
function updateCameraInfo() {
cameraInfo.innerHTML = `
摄像头信息：<br>
位置: (${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)})<br>
角度: (${camera.rotation.x.toFixed(2)}, ${camera.rotation.y.toFixed(2)}, ${camera.rotation.z.toFixed(2)})<br>
缩放: ${camera.zoom.toFixed(2)}
`;
}
updateCameraInfo();
// 1) 支持导入基本类型模型
const loader = new GLTFLoader();
loader.load('./three.js-master/examples/models/gltf/Horse.glb', (gltf) => {
// loader.load('./exported_model.gltf', (gltf) => {
const model = gltf.scene;
scene.add(model);
// 2) 支持缩放模型比例
model.scale.set(1, 1, 1);
// 3) 支持调整模型放置位置，角度姿态
model.position.set(0, 0, 0);
model.rotation.set(0, 0, 0);
}, undefined, (error) => {
console.error('模型加载失败: ', error);
});
// 渲染循环
function animate() {
requestAnimationFrame(animate);
updateCameraInfo();
renderer.render(scene, camera);
}
animate();
// 4) 将模型整体导出
const exporter = new GLTFExporter();
function exportModel() {
exporter.parse(scene, (result) => {
const blob = new Blob([JSON.stringify(result)], { type: 'application/json' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'exported_model.gltf';
link.click();
});
}
function handleKeyDown(event) {
switch (event.key) {
case 'e':
exportModel(); // 按下 'e' 键导出模型
break;
}
}
document.addEventListener('keydown', handleKeyDown);
</script>
</body>
</html>