threejs本地化工作

index.html页面中


	editor.storage.init( function () {

		editor.storage.get( function ( state ) {

			if (isLoadingFromHash) return;

			if (state !== undefined) {

				editor.fromJSON( state );  
			}


			var selected = editor.config.getKey( 'selected' );

			if (selected !== undefined) {

				editor.selectByUuid( selected );

			}

		} );

		//

		var timeout;
		function saveState( scene ) {
			if (editor.config.getKey( 'autosave' ) === false) {
				return;
			}
			clearTimeout( timeout );
			timeout = setTimeout( function () {
				editor.signals.savingStarted.dispatch();
				timeout = setTimeout( function () {
					editor.storage.set( editor.toJSON() ); 
					editor.signals.savingFinished.dispatch();
				}, 100 );
			}, 1000 );
		};


		var signals = editor.signals;

		signals.geometryChanged.add( saveState );
		signals.objectAdded.add( saveState );
		signals.objectChanged.add( saveState );
		signals.objectRemoved.add( saveState );
		signals.materialChanged.add( saveState );
		signals.sceneBackgroundChanged.add( saveState );
		signals.sceneFogChanged.add( saveState );
		signals.sceneGraphChanged.add( saveState );
		signals.scriptChanged.add( saveState );
		signals.historyChanged.add( saveState );

		signals.showModal.add( function ( content ) {

			modal.show( content );

		} );

	} );


eidtor原型中:

	fromJSON: function ( json ) {

		var loader = new THREE.ObjectLoader();

		// backwards

		if (json.scene === undefined) {

			this.setScene( loader.parse( json ) );
			return;

		}

		var camera = loader.parse( json.camera );

		this.camera.copy( camera );
		this.camera.aspect = this.DEFAULT_CAMERA.aspect;
		this.camera.updateProjectionMatrix();

		this.history.fromJSON( json.history );
		this.scripts = json.scripts;

		this.setScene( loader.parse( json.scene ) );
	},

	setScene: function ( scene ) {

		this.scene.uuid = scene.uuid;
		this.scene.name = scene.name;

		if (scene.background !== null) this.scene.background = scene.background.clone();
		if (scene.fog !== null) this.scene.fog = scene.fog.clone();

		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );

		// avoid render per object

		this.signals.sceneGraphChanged.active = false;

		var hasCamern = false;

		while (scene.children.length > 0) {

			if (! hasCamern && scene.children[0].type === "PerspectiveCamera") {
				hasCamern = true;
				this.camera = scene.children[0];  
			}
			this.addObject( scene.children[0] );

		}

		if (! hasCamern) {

			this.execute( new AddObjectCommand( this.camera ) );

		}

		this.signals.sceneGraphChanged.active = true;
		this.signals.sceneGraphChanged.dispatch();
	},


toJSON: function () {

		// scripts clean up

		var scene = this.scene;
		var scripts = this.scripts;

		for (var key in scripts) {
			var script = scripts[key];
			if (script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined) {
				delete scripts[key];
			}
		}

		//

		return {

			metadata: {},
			project: {
				gammaInput: this.config.getKey( 'project/renderer/gammaInput' ),
				gammaOutput: this.config.getKey( 'project/renderer/gammaOutput' ),
				shadows: this.config.getKey( 'project/renderer/shadows' ),
				vr: this.config.getKey( 'project/vr' )
			},
			camera: this.camera.toJSON(),
			scene: this.scene.toJSON(),
			scripts: this.scripts,
			history: this.history.toJSON()

		};

	},


FileLoader 

FR:徐海涛(hunk Xu)
QQ技术交流群:386476712

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js是一种用于创建和渲染三维图形的JavaScript库。在Three.js中,可以创建一个场景(Scene),并在场景中添加不同的对象、光源、相机等元素。在某些情况下,我们可能需要对场景进行序列化,以便在不同的场景中复用或保存。 场景的序列化通常指的是将整个场景的状态保存为一种数据格式,以便后续加载和重建。在Three.js中,可以通过将场景转换为JSON格式来实现序列化。 首先,我们需要遍历场景中的所有元素,将它们的重要属性和状态保存到一个Javascript对象中。可以通过访问对象的位置、旋转、缩放、材质等属性来获取相应的值。然后,可以使用JSON.stringify()方法将这个Javascript对象转换为JSON格式的字符串。 保存场景后,我们可以将其存储在本地或服务器上,以便以后加载和重建。加载场景时,我们可以使用JSON.parse()方法将JSON字符串转换回Javascript对象。然后,我们将这个对象的属性和状态应用于相应的Three.js元素,以重建整个场景。 需要注意的是,序列化只能保存场景的静态状态,例如对象的位置、旋转等。动态的状态,例如对象的动画、交互等,无法通过序列化保存和恢复。在加载场景后,我们需要手动重新设置这些动态状态。 总之,通过将整个场景转换为JSON格式的字符串,我们可以实现Three.js场景的序列化和反序列化,以便在不同的场景中进行复用和保存。这为我们创建交互式、可保存和可加载的三维场景提供了便利。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值