three.js 场景编辑器源码解析（十八）

最新推荐文章于 2025-10-21 11:01:17 发布

原创

最新推荐文章于 2025-10-21 11:01:17 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

本章讲解editor\js\Sidebar.Scene.js场景面板，场景面板展示了场景图的节点关系，以及场景背景色、雾。

场景节点会根据Object3D的具体的类型显示不同的信息，包括camera、scene、light、group、mesh、skinedmesh、bone等，节点的样式会根据节点的类型不同而不同，使用的ui文件是ui.three.js，css文件为editor\css\main.css，其中针对mesh节点，会在节点信息中显示对象名称--几何体名称--材质名称--脚本名称，对于多材质同时会显示多个材质名称。

//场景控件
Sidebar.Scene = function ( editor ) {

	//获取事件、字符串
	var signals = editor.signals;
	var strings = editor.strings;

	//创建一个面板
	var container = new UI.Panel();
	container.setBorderTop( '0' );
	container.setPaddingTop( '20px' );

	// outliner
	//构建选项（对象、是否可以拖拽）
	function buildOption( object, draggable ) {
		//创建div
		var option = document.createElement( 'div' );
		//div
		option.draggable = draggable;
		//构建tree项
		option.innerHTML = buildHTML( object );
		//项的id
		option.value = object.id;
		return option;
	}

	//获取材质名称
	function getMaterialName( material ) {
		//如果材质是数组
		if ( Array.isArray( material ) ) {
			var array = [];
			//遍历材质（获取材质名称）
			for ( var i = 0; i < material.length; i ++ ) {
				array.push( material[ i ].name );
			}
			//，号分割材质名称
			return array.join( ',' );
		}
		return material.name;
	}

	//替换到名称当中的特殊字符
	function escapeHTML( html ) {

		return html
			.replace( /&/g, '&amp;' )
			.replace( /"/g, '&quot;' )
			.replace( /'/g, '&#39;' )
			.replace( /</g, '&lt;' )
			.replace( />/g, '&gt;' );

	}

	//对象名称--几何体名称--材质名称--脚本名称，这些东西组成了tree的一行
	//对象可以是camera、scene、obje