THREE.JS中如何保存和加载场景中的网格模型，以BoxGeometry几何体为例。

1.THREE.JS中如何保存场景中的网格模型，以BoxGeometry几何体为例。

1. 我们向把场景中的立方体对象保存下来，这里我们保存到本地存储中
2. 然后从本地存储中拿到这个对象，经过解析然后在加载到场景中

2.初始化场景，渲染器，相机，立方体

let boxGeomtry = new THREE.BoxGeometry(30,30,30);
let boxMaterial = new THREE.MeshLambertMaterial({
    
    
	color: 'red'
})
let box = new THREE.Mesh(boxGeomtry,boxMaterial);

let scene = new THREE.Scene();
scene.add(box);
let axis = new THREE.AxisHelper(300);
scene.add(axis);
let camera = new THREE.PerspectiveCamera(45,innerWidth/innerHeight,1,1000);
camera.position.set(-20,40,30);
camera.lookAt(scene.position);
let ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
document.getElementById('WebGL-output').appendChild(renderer.domElement);
const renderer = new THREE.WebGLRenderer({
    
    antialias: true, alpha: true});
renderer.setSize(innerWidth,innerHeight);
renderer.setClearColor(new THREE.Color(0xEEEEEE,1));
renderer.shadowMapEnabled = true;
function render() {
    
    
	renderer.render(scene,camera);
	box.position.x += 0.02;
	requestAnimationFrame(render)
}
render();

1. 上面的代码就是一些初始化的操作。

好，现在就是保存这个立方体网格模型的代码了

function save() {
    
    
	let boxJSON = box.toJSON();
	localStorage.setItem('boxJSON',JSON.stringify(boxJSON));
}
// 现在我们将这个网格模型已经添加到本地存储中了

好现在，就是需要从本地存储中拿到这个值，并且解析它，然后再加载到场景中

function add () {
    
    
	let boxJSON = JSON.parse(localStorage.getItem('boxJSON'));
	let loaderObject = new THREE.ObjectLoader();
	let loadedMesh = loaderObject.parse(boxJSON);
	scene.add(loadedMesh); 
}
// 这就完成了.
```