webGL之three.js入门4--ThreeJS Editor入门篇-优快云博客

本文介绍了如何将ThreeJS Editor从源码中独立出来，并详细解释了编辑器中index.html的引用调整。同时讨论了ThreeJS Editor在3D模型导入导出及烘焙技术方面的局限性，强调了烘焙在实时渲染效率提升中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为工作需要，要看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>