webGL之three.js⼊门4--ThreeJSEditor⼊门篇
因为⼯作需要，要看threejs editor的源码，顺便记录过程。
github下载的源码⽬录是这样的
但是editor和其他⽂件夹内的内容的关联的，我需要将其独⽴出来并且编辑editor。
进⼊editor，three.js-master\editor，打开index.html，从源码可以看出来，⾥⾯引⽤了上级⽬录的⼀些.js⽂件。
所以，要独⽴出来，就把../examples/js⽂件夹下的所有内容拷贝到three.js-master\editor\js⽬录下。然后把index.html中的“../examples/js”全部替换为“js”，步骤是:"ctrl+F"-->"Find All" ，这样就全部选中了，然后全部替换为“js”
这样，这个editor⽂件夹就从threejs master中独⽴出来了。
下⾯来看看index.html，有⼈会好奇，这⾥⾯没有写⼈任何样式和布局。其实<link href="css/main.css" rel="stylesheet"/><link id="theme" href="css/light.css" rel="stylesheet"/>
<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
<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/ui.js"></script>
<script src="js/libs/ui.three.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.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>
editor bar<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/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/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>
在这些css和js⽂件⾥⾯加⼊了index的页⾯组件、样式和相关交互的变化规则。
threejs master在github还在不断更新，功能也越来越完善，希望有更多的⼈加⼊学习和应⽤threejs的阵营。
其实对于threejs editor的应⽤，我个⼈对图形学没多少研究，更倾向于从3Dmax或者maya或者blender等开始⼊⼿了解学习。threejs线上的3D编辑器还不如某些客户端的编辑器那么强⼤，⽐如：editor现在⽀持import多种⽂件类型，但是不包括3Dmax的.max⽂件；只⽀持export 为stl、obj和json数据。
⽽且editor不⽀持3D烘焙技术，可能有些⼈不了解烘焙技术。
烘培是指，把光照信息渲染成贴图，⽽后把这个烘培后的贴图再贴回到场景中去的技术。烘培技术把光照计算的结果提前写⼊到了贴图中，因此在实时渲染中不需要进⾏耗时的光照计算，⼤⼤提⾼了实时渲染的效率。
烘培和渲染区别：
渲染是指⽣成⼀张图⽚。
烘焙是指按模型UV的展开⽽渲染成⼀张物体的材质。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。