three.js 08-04のロードと保存シーン


前のページでは、オブジェクトをどのように保存してロードするかを紹介します.本編では、three.jsがどのように保存されているかを確認して、全体をロードします.実は道理は保存してそして対象をロードするのと同じで、ただ保存するのはある対象ではなくて、全体のシーンのTHREE.Sceneです. オブジェクト難しいことではないので、ワープせずに説明し、以下に完全な例を示す.



       08.04 - Load Save JSON Scene
	
	
	
	
	
    




var scene; var camera; var render; var webglRender; //var canvasRender; var controls; var stats; var guiParams; var ambientLight; var spotLight; var axesHelper; //var cameraHelper; var ground; $(function() { initStats(); initRender(); initCamera(); initControls(); scene = new THREE.Scene(); createAxesHelper(); createAmbientLight(); createSpotLight(); createGuiControls(); // createGround() // createMesh(); renderScene(); }); /** stats */ function initStats() { stats = new Stats(); stats.setMode(0); // 0 FPS;1 $('#stats-output').append(stats.domElement); return stats; } /** */ function initRender() { webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias webglRender.setSize(window.innerWidth, window.innerHeight); webglRender.setClearColor(0x0F0F0F, 1.0); // 0xeeeeee render = webglRender; render.shadowMap.enabled = true; // $('#webgl-output')[0].appendChild(render.domElement); window.addEventListener('resize', onWindowResize, false); } /** */ function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2147483647); // 2147483647 camera.position.set(30, 40, 50); } /** */ function initControls() { var target = new THREE.Vector3(0, 0 , 0); controls = new THREE.OrbitControls(camera, render.domElement); controls.target = target; camera.lookAt(target); } /** */ function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render.setSize(window.innerWidth, window.innerHeight); } /** */ function renderScene() { stats.update(); rotateMesh(); // requestAnimationFrame(renderScene); render.render(scene, camera); } /** */ var step = 0; function rotateMesh() { step += guiParams.rotationSpeed; scene.traverse(function(mesh) { if (mesh instanceof THREE.Mesh && mesh.name != 'ground') { //mesh.rotation.x = step; mesh.rotation.y = step; //mesh.rotation.z = step; } }); } /** :X( )、Y( )、Z( ) */ function createAxesHelper() { axesHelper = new THREE.AxesHelper(60); scene.add(axesHelper); } /** AmbientLight */ function createAmbientLight() { ambientLight = new THREE.AmbientLight(0x0c0c0c); scene.add(ambientLight); } /** AmbientLight */ function createSpotLight() { spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-60, 60, -10); spotLight.castShadow = true; spotLight.shadow.mapSize.set(2048, 2048); // 2 , 512 scene.add(spotLight); //cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera); //scene.add(cameraHelper); } /** */ function createGuiControls() { guiParams = new function() { this.rotationSpeed = 0.02; this.ExportScene = function() { if (scene) { var geoJSON = scene.toJSON(); console.log(geoJSON); localStorage.setItem('geoJSON', JSON.stringify(geoJSON)); } }; this.ClearScene = function() { scene = new THREE.Scene(); }; this.LoadScene = function() { var geoJSON = localStorage.getItem('geoJSON'); if (geoJSON) { var parsedGeom = JSON.parse(geoJSON); var loader = new THREE.ObjectLoader(); var loaddedScene = loader.parse(parsedGeom); scene = loaddedScene; } }; } /** dat.GUI , guiParams */ var gui = new dat.GUI(); gui.add(guiParams, 'ExportScene'); gui.add(guiParams, 'ClearScene'); gui.add(guiParams, 'LoadScene'); } /** */ function createGround() { var groundGeom = new THREE.PlaneGeometry(60, 30); var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xbcbcbc, side: THREE.DoubleSide} ); // 0x777777 ground = new THREE.Mesh(groundGeom, groundMaterial); ground.name = 'ground'; ground.receiveShadow = true; // ground.rotation.x = -0.5 * Math.PI; scene.add(ground); } /** */ function createMesh() { // var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // cube.castShadow = true; cube.position.x = -10; cube.position.y = 3; cube.position.z = 0; scene.add(cube); // var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // sphere.castShadow = true; sphere.position.x = 10; sphere.position.y = 0; sphere.position.z = 2; scene.add(sphere); }
未完次号・・・