Three.js入门

最近学习Three.js想生成几何体转成字符串，传出到另一个界面。然后直接变成几何体。可以直接渲染。
先上一个小程序。

<script type="text/javascript" src="/js/three.min.js"></script>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script src="jquery.json-2.4.js"></script>
<title>aaa</title>
<style>
    body{

        margin: 100;
        overflow: hidden;
    }
</style>

function init(){
var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(30,window.innerWidth/window.innerHeight,0.1,1000);
var renderer=new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth,window.innerHeight);
//添加方块
var boxGeometry=new THREE.BoxGeometry(4,4,4);
var boxMaterial=new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5, opacity: 0.6 } );
//添加颜色
var hexMap = new Array( 0x808080, 0x808080, 0x808080, 0x808080, 0x808080, 0x808080 );
for ( var i = 0; i < boxGeometry.faces.length; i += 2 ) {
var hex = hexMap[i/2];
boxGeometry.faces[ i ].color.setHex( hex );
boxGeometry.faces[ i + 1 ].color.setHex( hex );
}
var box = new THREE.Mesh(boxGeometry,boxMaterial);
box.position.x=-4;
box.position.y=3;
box.position.z=0;
var box = new THREE.Mesh(boxGeometry,boxMaterial);
var box11 = new THREE.Mesh();
var box1 = box.toJSON();
var box2 = JSON.stringify(box1);
var box3 = JSON.parse(box2);
box11.geometry = box3.geometries[0];
box11.material = box3.materials[0];
scene.add(box1);
camera.position.x=-30;
camera.position.y=40;
camera.position.z=20;
camera.lookAt(scene.position);
document.getElementById("Oner_Div").appendChild(renderer.domElement);
renderer.render(scene,camera);
}
window.onload = init;



解析出来box3然后拿出来把geometries[0]第一数值。materials[0]第一个数值。分别给box11。感觉这样就可以了。结果不行行。
错误：ncaught TypeError: Cannot read property ‘center’ of undefined
后续会更新的。