three.js编辑挂在对象上的一个脚本

Sidebar.Scriptjs脚本

Scripts.js脚本：  打开编辑器，并且将源码赋值给编辑器

	signals.editScript.add( function ( object, script ) {

		var mode, name, source;

		if ( typeof( script ) === 'object' ) {

			mode = 'javascript';
			name = script.name;
			source = script.source;
			title.setValue( object.name + ' / ' + name );

		} else {

			switch ( script ) {

				case 'vertexShader':

					mode = 'glsl';
					name = 'Vertex Shader';
					source = object.material.vertexShader || "";

					break;

				case 'fragmentShader':

					mode = 'glsl';
					name = 'Fragment Shader';
					source = object.material.fragmentShader || "";

					break;

				case 'programInfo':

					mode = 'json';
					name = 'Program Properties';
					var json = {
						defines: object.material.defines,
						uniforms: object.material.uniforms,
						attributes: object.material.attributes
					};
					source = JSON.stringify( json, null, '\t' );

			}
			title.setValue( object.material.name + ' / ' + name );

		}

		currentMode = mode;
		currentScript = script;
		currentObject = object;

		container.setDisplay( '' );     //打开编辑器
		codemirror.setValue( source );  //重点关注这一行，将源码赋值给编辑器
		codemirror.clearHistory();
		if ( mode === 'json' ) mode = { name: 'javascript', json: true };
		codemirror.setOption( 'mode', mode );

	} );

在线编辑器内容一旦发生变化，就会触发下面红线标识代码

接下来会走到：

对于对象身上UI的更新，这里就不说了，重点说一下saveSate

saveState主要工作是将editor中保存的数据序列化到本地(indexedDB)

indexedDB参考这篇文章： 浏览器的indexedDB的用法

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712