因為工作需要，要看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>
<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的展開而渲染成一張物體的材質。

webGL之three.js入門4--ThreeJS Editor入門篇