ThreeJs能力演示——图层导入导出

1、支持图层信息导入导出

1）支持将图层信息及图层中的内容导出

本示例导出其实存在信息缺失，因为导出的模型没有把子图层，以及图层中几何体具体形状、材质给导出来。

    function exportLayers() {const exportData = {layers: []};for (let layer of layers) {const layerData = {visible: layer.visible,objects: []};for (let object3D of layer.children) {layerData.objects.push({name: object3D.name,position: object3D.position.toArray(),rotation: object3D.rotation.toArray(),scale: object3D.scale.toArray()});}exportData.layers.push(layerData);}const dataStr = JSON.stringify(exportData);const blob = new Blob([dataStr], { type: 'application/json' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'layersData.json';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}

2）支持将导出的内容重新导回

本导入导出方案不是特别完善，都是序列化成json格式，很多信息想要存下来都比较麻烦。

未来应该考虑更优的适配比较少的序列化方案。

因为对于很多3D项目来说，缓存工程是一个很正常的诉求。如果序列化适配这么麻烦将导致缓存工程信息丢失、适配量大。

    function importLayers() {const input = document.createElement('input');input.type = 'file';input.accept = 'application/json';input.addEventListener('change', (event) => {const file = event.target.files[0];const reader = new FileReader();reader.readAsText(file);reader.onload = () => {const importData = JSON.parse(reader.result);for (let i = 0; i < layers.length; i++) {layers[i].visible = importData.layers[i].visible;while (layers[i].children.length > 0) {layers[i].remove(layers[i].children[0]);}for (let objectData of importData.layers[i].objects) {const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);cube.name = objectData.name;cube.position.fromArray(objectData.position);cube.rotation.fromArray(objectData.rotation);cube.scale.fromArray(objectData.scale);layers[i].add(cube);}}};});input.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 { GUI } from 'three/addons/libs/lil-gui.module.min.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, 20); // 设置相机位置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();// 渲染循环function animate() {requestAnimationFrame(animate);updateCameraInfo();renderer.render(scene, camera);}animate();// 创建图层信息const layer0 = new THREE.Object3D()const layer0_1 = new THREE.Object3D()layer0.add(layer0_1)const layer1 = new THREE.Object3D()const layer2 = new THREE.Object3D()const layers = [layer0, layer1, layer2]// 存储创建的几何体列表createCube(0, layer0)createCube(1, layer1)createCube(2, layer2)createCube(0.5, layer0_1)for (let layer of layers) {scene.add(layer)}// 创建正方体function createCube(place, layerObj) {const geometry = new THREE.BoxGeometry(1, 1, 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const cube = new THREE.Mesh( geometry, material );cube.name = 'Cube${layerIndex}';cube.position.set(place*2, place*2, place*2)layerObj.add(cube)return cube;}// GUI控制显示图层const gui = new GUI();const layerFolders = [];for (let i = 0; i < 3; i++) {const layerFolder = gui.addFolder(`Layer ${i}`);const layerEnabled = layerFolder.add({enabled: true}, 'enabled').name('可见性');layerEnabled.onChange((value) => {console.log(`index ${i} enabled: ${value}`)layers[i].visible = value});layerFolders.push(layerFolder);}// 添加导入导出功能的 GUIconst importExportFolder = gui.addFolder('Import/Export');const exportDataButton = importExportFolder.add({ exportData: () => exportLayers() }, 'exportData').name('导出图层信息');const importDataButton = importExportFolder.add({ importData: () => importLayers() }, 'importData').name('导入图层信息');const clearLayersButton = importExportFolder.add({ clearLayers: () => clearAllLayers() }, 'clearLayers').name('清空所有图层');function exportLayers() {const exportData = {layers: []};for (let layer of layers) {const layerData = {visible: layer.visible,objects: []};for (let object3D of layer.children) {layerData.objects.push({name: object3D.name,position: object3D.position.toArray(),rotation: object3D.rotation.toArray(),scale: object3D.scale.toArray()});}exportData.layers.push(layerData);}const dataStr = JSON.stringify(exportData);const blob = new Blob([dataStr], { type: 'application/json' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'layersData.json';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}function importLayers() {const input = document.createElement('input');input.type = 'file';input.accept = 'application/json';input.addEventListener('change', (event) => {const file = event.target.files[0];const reader = new FileReader();reader.readAsText(file);reader.onload = () => {const importData = JSON.parse(reader.result);for (let i = 0; i < layers.length; i++) {layers[i].visible = importData.layers[i].visible;while (layers[i].children.length > 0) {layers[i].remove(layers[i].children[0]);}for (let objectData of importData.layers[i].objects) {const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);cube.name = objectData.name;cube.position.fromArray(objectData.position);cube.rotation.fromArray(objectData.rotation);cube.scale.fromArray(objectData.scale);layers[i].add(cube);}}};});input.click();}function clearAllLayers() {for (let layer of layers) {while (layer.children.length > 0) {layer.remove(layer.children[0]);}}}
</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/2880.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！