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

最新推荐文章于 2024-08-15 10:02:06 发布
最新推荐文章于 2024-08-15 10:02:06 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianyapai/article/details/104768484
版权

     这一章说一下场景编辑器的主页editor\index.html,包含了各个组件的初始化，以及设置组件之间的关联。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js / editor</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2019-03-06 -->
		<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2019-03-06" content="AvDjbxYpoTgOL1PS0JEra7KFCehfTlKnXpU/ORSwNdCQ35cX70cTUkXOnQ26A5XJi3eXHSKpBPchdt5lbcxDuAIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU1MTgzMDM5OX0=">
	</head>
	<body ontouchstart="">
		<link href="css/main.css" rel="stylesheet" />
		<link id="theme" href="css/light.css" rel="stylesheet" />

		<script src="../build/three.js"></script>
		<script src="../examples/js/libs/system.min.js"></script>

		<script src="../examples/js/controls/EditorControls.js"></script>
		
		<script src="../examples/js/controls/TransformControls.js"></script> <!-- 转换函数 -->

		<script src="../examples/js/libs/jszip.min.js"></script>	<!-- 压缩函数 -->
		<script src="../examples/js/libs/inflate.min.js"></script>  <!-- FBX -->

		<script src="../examples/js/loaders/AMFLoader.js"></script>
		<script src="../examples/js/loaders/AWDLoader.js"></script>
		<script src="../examples/js/loaders/BabylonLoader.js"></script> <!-- ？？ -->
		<script src="../examples/js/loaders/ColladaLoader.js"></script>
		<script src="../examples/js/loaders/DRACOLoader.js"></script>
		<script src="../examples/js/loaders/FBXLoader.js"></script>
		<script src="../examples/js/loaders/GLTFLoader.js"></script>
		<script src="../examples/js/loaders/deprecated/LegacyGLTFLoader.js"></script>
		<script src="../examples/js/loaders/KMZLoader.js"></script>
		<script src="../examples/js/loaders/MD2Loader.js"></script>
		<script src="../examples/js/loaders/OBJLoader.js"></script>
		<script src="../examples/js/loaders/MTLLoader.js"></script>
		<script src="../examples/js/loaders/PlayCanvasLoader.js"></script>
		<script src="../examples/js/loaders/PLYLoader.js"></script>
		<script src="../examples/js/loaders/STLLoader.js"></script>
		<script src="../examples/js/loaders/SVGLoader.js"></script>
		<script src="../examples/js/loaders/TGALoader.js"></script>
		<script src="../examples/js/loaders/TDSLoader.js"></script>
		<script src="../examples/js/loaders/VRMLLoader.js"></script>
		<script src="../examples/js/loaders/VTKLoader.js"></script>
		<script src="../examples/js/loaders/ctm/lzma.js"></script>
		<script src="../examples/js/loaders/ctm/ctm.js"></script>
		<script src="../examples/js/loaders/ctm/CTMLoader.js"></script>

		<script src="../examples/js/exporters/ColladaExporter.js"></script>
		<script src="../examples/js/exporters/GLTFExporter.js"></script>
		<script src="../examples/js/exporters/OBJExporter.js"></script>
		<script src="../examples/js/exporters/STLExporter.js"></script>

		<script src="../examples/js/renderers/Projector.js"></script>
		<script src="../examples/js/renderers/RaytracingRenderer.js"></script>
		<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
		<script src="../examples/js/renderers/SVGRenderer.js"></script>

		<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
		<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
		<script src="js/libs/codemirror/codemirror.js"></script>
		<script src="js/libs/codemirror/mode/javascript.js"></script>
		<script src="js/libs/codemirror/mode/glsl.js"></script>

		<script src="js/libs/esprima.js"></script>
		<script src="js/libs/jsonlint.js"></script>
		<script src="js/libs/glslprep.min.js"></script>

		<link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css">
		<link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css">
		<link rel="stylesheet" href="js/libs/codemirror/addon/tern.css">
		<script src="js/libs/codemirror/addon/dialog.js"></script>
		<script src="js/libs/codemirror/addon/show-hint.js"></script>
		<script src="js/libs/codemirror/addon/tern.js"></script>
		<script src="js/libs/acorn/acorn.js"></script>
		<script src="js/libs/acorn/acorn_loose.js"></script>
		<script src="js/libs/acorn/walk.js"></script>
		<script src="js/libs/ternjs/polyfill.js"></script>
		<script src="js/libs/ternjs/signal.js"></script>
		<script src="js/libs/ternjs/tern.js"></script>
		<script src="js/libs/ternjs/def.js"></script>
		<script src="js/libs/ternjs/comment.js"></script>
		<script src="js/libs/ternjs/infer.js"></script>
		<script src="js/libs/ternjs/doc_comment.js"></script>
		<script src="js/libs/tern-threejs/threejs.js"></script>

		<script src="js/libs/signals.min.js"></script>
		<script src="js/libs/ui.js"></script>
		<script src="js/libs/ui.three.js"></script>

		<script src="js/libs/app.js"></script>
		<script src="js/Player.js"></script>
		<script src="js/Script.js"></script>

		<script src="../examples/js/vr/WebVR.js"></script>

		<script src="js/Storage.js"></script>

		<script src="js/Editor.js"></script>
		<script src="js/Config.js"></script>
		<script src="js/History.js"></script>
		<script src="js/Loader.js"></script>
		<script src="js/Menubar.js"></script>
		<script src="js/Menubar.File.js"></script>
		<script src="js/Menubar.Edit.js"></script>
		<script src="js/Menubar.Add.js"></script>
		<script src="js/Menubar.Play.js"></script>
		<!-- <script src="js/Menubar.View.js"></script> -->
		<script src="js/Menubar.Examples.js"></script>
		<script src="js/Menubar.Help.js"></script>
		<script src="js/Menubar.Status.js"></script>
		<script src="js/Sidebar.js"></script>
		<script src="js/Sidebar.Scene.js"></script>
		<script src="js/Sidebar.Project.js"></script>
		<script src="js/Sidebar.Settings.js"></script>
		<script src="js/Sidebar.Settings.Shortcuts.js"></script>
		<script src="js/Sidebar.Settings.Viewport.js"></script>
		<script src="js/Sidebar.Properties.js"></script>
		<script src="js/Sidebar.Object.js"></script>
		<script src="js/Sidebar.Geometry.js"></script>
		<script src="js/Sidebar.Geometry.Geometry.js"></script>
		<script src="js/Sidebar.Geometry.BufferGeometry.js"></script>
		<script src="js/Sidebar.Geometry.Modifiers.js"></script>
		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
		<script src="js/Sidebar.Geometry.TubeGeometry.js"></script>
		<script src="../examples/js/geometries/TeapotBufferGeometry.js"></script>
		<script src="js/Sidebar.Geometry.TeapotBufferGeometry.js"></script>
		<script src="js/Sidebar.Geometry.LatheGeometry.js"></script>
		<script src="js/Sidebar.Material.js"></script>
		<script src="js/Sidebar.Animation.js"></script>
		<script src="js/Sidebar.Script.js"></script>
		<script src="js/Sidebar.History.js"></script>
		<script src="js/Strings.js"></script>
		<script src="js/Toolbar.js"></script>
		<script src="js/Viewport.js"></script>
		<script src="js/Viewport.Info.js"></script>

		<script src="js/Command.js"></script>
		<script src="js/commands/AddObjectCommand.js"></script>
		<script src="js/commands/RemoveObjectCommand.js"></script>
		<script src="js/commands/MoveObjectCommand.js"></script>
		<script src="js/commands/SetPositionCommand.js"></script>
		<script src="js/commands/SetRotationCommand.js"></script>
		<script src="js/commands/SetScaleCommand.js"></script>
		<script src="js/commands/SetValueCommand.js"></script>
		<script src="js/commands/SetUuidCommand.js"></script>
		<script src="js/commands/SetColorCommand.js"></script>
		<script src="js/commands/SetGeometryCommand.js"></script>
		<script src="js/commands/SetGeometryValueCommand.js"></script>
		<script src="js/commands/MultiCmdsCommand.js"></script>
		<script src="js/commands/AddScriptCommand.js"></script>
		<script src="js/commands/RemoveScriptCommand.js"></script>
		<script src="js/commands/SetScriptValueCommand.js"></script>
		<script src="js/commands/SetMaterialCommand.js"></script>
		<script src="js/commands/SetMaterialValueCommand.js"></script>
		<script src="js/commands/SetMaterialColorCommand.js"></script>
		<script src="js/commands/SetMaterialMapCommand.js"></script>
		<script src="js/commands/SetSceneCommand.js"></script>

		<script src="js/libs/html2canvas.js"></script>
		<script src="js/libs/three.html.js"></script>

		<script>

			//检查浏览器的类型
			window.URL = window.URL || window.webkitURL;
			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;

			Number.prototype.format = function (){
				return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
			};

			//
			//编辑器的上下文
			var editor = new Editor();

			//窗口
			var viewport = new Viewport( editor );
			document.body.appendChild( viewport.dom );

			//工具条（平移、旋转、缩放、本地世界空间）
			var toolbar = new Toolbar( editor );
			document.body.appendChild( toolbar.dom );

			//脚本窗口
			var script = new Script( editor );
			document.body.appendChild( script.dom );

			//播放菜单项
			var player = new Player( editor );
			document.body.appendChild( player.dom );

			//菜单条
			var menubar = new Menubar( editor );
			document.body.appendChild( menubar.dom );

			//侧边栏（工程、场景、设置等）
			var sidebar = new Sidebar( editor );
			document.body.appendChild( sidebar.dom );

			//??
			var modal = new UI.Modal();
			document.body.appendChild( modal.dom );

			//
			//主题
			editor.setTheme( editor.config.getKey( 'theme' ) );

			//序列化、反序列化
			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 ) {
						//设置选择对象的uuid
						editor.selectByUuid( selected );

					}

				} );

				//

				var timeout;
				//保存
				function saveState( scene ) {
					//如果是不是自动保存，就返回
					if ( editor.config.getKey( 'autosave' ) === false ) {
						return;
					}
					//清除超时
					clearTimeout( timeout );

					//重新设定超时
					timeout = setTimeout( function () {
						//派发消息后，等上100s进行保存
						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 );
				} );
			} );

			//
			//按住拖拽
			document.addEventListener( 'dragover', function ( event ) {
				event.preventDefault();
				event.dataTransfer.dropEffect = 'copy';
			}, false );

			//拖拽抬起
			document.addEventListener( 'drop', function ( event ) {
				event.preventDefault();
				editor.loader.loadFiles( event.dataTransfer.files );
			}, false );

			//窗口大小变化
			function onWindowResize( event ) {
				editor.signals.windowResize.dispatch();
			}

			//注册窗口放大消息
			window.addEventListener( 'resize', onWindowResize, false );

			//首先调用一次重置大小
			onWindowResize();

			//来自文件
			var isLoadingFromHash = false;
			var hash = window.location.hash;
			//如果是从文件加载
			if ( hash.substr( 1, 5 ) === 'file=' ) {
				//获取文件的目录
				var file = hash.substr( 6 );
				//提示，没有保存的文件将会丢失
				if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {

					//文件加载器
					var loader = new THREE.FileLoader();
					//不跨域
					loader.crossOrigin = '';
					//加载文件
					loader.load( file, function ( text ) {
						//清除编辑器中的所有的东西？
						editor.clear();
						//展示场景文件
						editor.fromJSON( JSON.parse( text ) );

					} );
					//从已有的文件加载
					isLoadingFromHash = true;
				}
			}

			/*
			window.addEventListener( 'message', function ( event ) {

				editor.clear();
				editor.fromJSON( event.data );

			}, false );
			*/

		</script>
	</body>
</html>

 

tianyapai
关注
专栏目录
threejs-editor:基础threejs 对楼层中设备编辑位置,缩放,旋转
05-22
设备坐标编辑 基于three.js的editor基础上修改. 使用场景: 对楼层中的设备进行位置编辑. demo
Three.js视频教程源码.rar
08-19
《Three.js全方位解析：从源码到实战》 Three.js是基于WebGL的JavaScript库，是目前最流行的浏览器端3D图形渲染库之一，广泛应用于网页游戏、数据可视化、3D建模等领域。本教程围绕"Three.js视频教程源码.rar"展开...
three.js 场景编辑器 源码解析（九）
tianyapai的专栏
03-11 932
本章介绍场景编辑中关于脚本相关的ui部分，相关的文件为editor\js\Sidebar.Script.js，后续的三个章节会逐个介绍脚本相关的三个命令editor\js\commands\AddScriptCommand.js、editor\js\commands\SetScriptValueCommand.js、editor\js\commands\RemoveScriptCommand.j...
Three.js 编辑器扩展安装与使用指南
最新发布
gitblog_00677的博客
08-15 454
Three.js 编辑器扩展安装与使用指南 ThreeJSEditorExtensionThree.js Editor Extension for Google Chrome项目地址:https://gitcode.com/gh_mirrors/th/ThreeJSEditorExtension 1. 目录结构及介绍 以下是 ThreeJSEditorExtension 项目的典型目录结构： ....
threejs 编辑器源码分析1,Commands解析,分析继承结构，解析部分代码
qq_43157227的博客
11-01 929
threejs 编辑器源码分析1,Commands解析,分析继承结构，解析部分代码
Threejs源码解析（Line3.js）
七岁
09-10 1653
import { Vector3 } from './Vector3.js'; import { _Math } from './Math.js'; /** * @author bhouston / http://clara.io */ /** * 线段 * @param start 开始位置 * @param end 结束位置 * @constructor */ functi...
Threejs 源码解析 (Object3D)
热门推荐
七岁
09-10 1万+
版本95 本来想就这么用算了，可是发现好多都不理解，也就起了解析源码的心思，下苦功夫了，以前老版本的有人写过，不过threejs 更新太快，有些变动，并且他只是简单的注释，并未详细的解释，对于我这种刚开始接触的小白来说，数学就是一大硬伤，本来想做个原生的射线拾取，结果看的我一脸懵逼，跳的函数太多，刚开始容易迷路，所有就打算慢慢啃；方法都尽量解释，以便知道这样的方法为什么得这样的结果； 相关连的...
Three.js 详细解析（持续更新）
云 中 谁 寄 锦 书 来 ，雁 字 注 回 时 ，月 满 西 楼 。
12-24 856
而正交投影摄像机，不具有透视效果，即物体的大小不受远近距离的影响。透视相机用来模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。透视相机用来模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。Three.js依赖一些要素，第一是scene，第二是render，第三是carmea。而正交投影摄像机，不具有透视效果，即物体的大小不受远近距离的影响。scene可以理解为我们将要渲染的环境、背景。
基于Threejs 3D场景编辑器代码.zip
09-23
【Three.js 3D场景编辑器】是一个利用Three.js库构建的交互式工具，它允许用户在Web浏览器中创建、编辑和管理三维场景。Three.js是JavaScript的一个强大库，专门用于在WebGL的支持下实现3D图形渲染。通过这个3D场景...
使用three.js制作的Ace编辑器示例源码.zip
01-07
2. `main.js`：这里是核心的JavaScript代码，包含了初始化three.js场景、相机、光源、几何体和材质的逻辑，以及与Ace编辑器交互的代码。 3. `styles.css`：可能包含了项目的样式定义，如编辑器和3D场景的布局。 4. ...
threejs案例源码资源
12-27
《Three.js VR眼镜Demo源码解析》 Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建和展示三维图形变得更为简单。这个“threejs案例源码资源”是利用Three.js技术实现的一个VR眼镜Demo，通过浏览器...
scene-editor:Three.js编辑器
05-17
场景编辑 Three.js编辑器
terrain-editor:ThreeJS Terrain编辑器
05-20
三个JS Terrain编辑器 该项目的主要目标是实现一个可以编辑地形（平面几何形状）并绘制多个纹理的系统。 我使用 ，它是Javascript WebGL库。 要求 v14（需要ESM） 入门 克隆后 $ npm i $ npm start 移动 相机 ZQSD移动相机上/下摄​​像机的Shift/Space Middle Mouse Button旋转相机 编辑模式 Tab以更改编辑模式（顶点/平面/纹理） 仅顶点编辑模式有效 顶点编辑 在顶点编辑模式下： 在键盘上高于AZE的1/2/3 ： 1：提高=鼠标左键/降低=鼠标右键2：展平=鼠标左键单击（将您单击的高度的所有点展平）3：平滑=鼠标左键单击
ThreeJSEditorExtension:用于Google Chrome的Three.js编辑器扩展
05-19
用于Google Chrome的Three.js编辑器扩展 Chrome DevTools扩展程序，用于管理任何three.js项目。 的双项目 如何安装 在测试版中，您可以直接从磁盘加载扩展程序： 签出仓库 打开Chrome的“扩展程序”页面（ Settings / More tools / Extensions ） 启用Developer Mode 点击``加载解压后的扩展程序...'' 在检出的项目中选择文件夹/ src 或者，您可以自己打包扩展并通过在扩展页面中删除.crx文件来加载。 如何使用 浏览到包含three.js内容的页面（您可以在或找到许多内容） 打开DevTools 选择Three.js Editor选项卡 该扩展程序需要检测THREE ，因此必须使用被注入的脚本重新加载被检查的选项卡。 点击Reload按钮 如果要开发页面，请确保THREE是全局的
Three.js源码脚本
05-25
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。
threejs官方demo解析（一）
Pure_White520的博客
01-04 980
threejs官网demo--第一个模型demo
Three.js入门以及案例（全方位解析）
随便写写
01-31 1207
Three.js入门以及案例（全方位解析）之后还会出更多threejs的内容
three.js 场景编辑器 源码解析（四）
tianyapai的专栏
03-09 1529
场景中编辑的模型会很多，而且文件会很大，使用浏览器本身的数据库存放这些数据是一个好方法，相比于localstring，浏览器本身的数据库支持大文件存储，支持事务，用起来更合适，编辑器使用了浏览器自带的indexDB数据库，代码如下： //存储类（序列化类），使用的是浏览器数据库，这个数据库是否会拖慢编辑器的速度 var Storage = function () { //浏览器...
three.js 场景编辑器 源码解析（十）
tianyapai的专栏
03-11 853
本节讲解脚本命令中的添加脚本AddScriptCommand.js，每个命令都会有2个函数execute、undo，其中execute函数是用来处理命令的执行过程（添加、重新执行该命令），undo用来处理撤销命令。命令的结构简单易用、易扩展，符合开放封闭原则。 添加脚本命令的主要功能是完成脚本添加、脚本编辑撤销功能。 //添加脚本命令 var AddScriptCommand = funct...
Three.js源码解析：物体组织与Mesh构造
"Three.js源码阅读笔记探讨了物体在Three.js中的组织方式，特别是如何将顶点、表面和材质组合成Mesh对象。Mesh是Three.js中表示三维物体的基础类，它由geometry和material两个关键属性定义。" 在Three.js中，`THREE...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值