1.2 ThreeJS能力演示——模型导入导出编辑

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>
相关推荐
雪碧聊技术4 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了5 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
Owen_Q8 分钟前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·25 分钟前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle1 小时前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试