1、模型導入導出編輯能力
1）支持導入基本類型模型
最常用，最適合作為web演示模型的是glb格式的，當前演示glb模型導入
// 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）將模型整體導出
通過此方案可以將模型通過瀏覽器下載的方式下載下來。
// 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、整體演示代碼
<!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>
![[Do374]Ansible一鍵搭建sftp實現用戶批量增刪](http://pic.xiahunao.cn/[Do374]Ansible一鍵搭建sftp實現用戶批量增刪)
