读threejs 初探编辑器

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

读源码不是我的目的，我的目的是解决工作上遇到的问题，我是带有极强的功利性的。公司项目的编辑器是基于three编辑器改造的，所以直奔editor。

编辑器

threejs的编辑器可以说是一个独立的项目了。也包含了许多常用的3d业务场景，从模型加载到导出，三维物体的选择，三维模型的属性编辑等等。

选中一个三维物体才能对其进行编辑，position scale rotation 可以通过鼠标拖曳操作，也可也以在右侧的属性栏里进行修改。 material 和object上的属性就只能在右边修改了。 属性很多，就不念文档了，后面要细究的时候再看。

编辑器的初始化

当我看到不熟悉的代码时，总是希望找到自己熟悉的地方。 我熟悉的是画布渲染初始化那一套， 而且我知道，这里必然也有那一套流程。

flowchart TB
      A[(获取上下文对象getContext webgl\n 设置canvas尺寸 这个尺寸就是canvas坐标系的尺寸)] -->B[创建程序对象 gl.createProgram]
      B-->C{创建着色器对象 gl.createShader}
      C--gl.VERTEX_SHADER顶点着色器-->D[装载着色器代码gl.shaderSource vertShader, vs]
      C--gl.FRAGMENT_SHADER片元着色器-->E[装载着色器代码 gl.shaderSource vertShader, fs]
      D-->F([编译着色器  gl.compileShader shader])
      E-->F
      
      F-->G(把着色器对象装进程序gl.attachShader shader)
      G-->H(链接上下文和程序对象 gl.link program ) 
      H-->I(激活启动程序gl.useProgram program)

不是这一套，下面这个才是，three的一般初始化。

graph TD
a(创建场景 相机 渲染器)--->b(设置渲染器参数 创建纹理 模型加载器)
b-->c(设置场景参数 背景 环境贴图 等)
c-->d(创建三维对象,或加载模型,或用几何体)
d-->e(选择相机,渲染场景)
e-->f(其实上面差不多就是一套了,不过,通常会采用请求动画帧进行连续渲染,使用轨道控制器来变换视野)

初始化就这么多东西，我要关注的是负责渲染的那个模块。 一阵乱翻无果，终于记起，原来我该打断点的。 重复几次之后，终于确定了文件的位置。那就是aap.js 。虽然，看上去应该归属play模块，但是结果确是，它又把那部分东西抽出去了，player只不过是个壳罢了。

这就看到了熟悉的，three场景初始化代码。

今天先到这了，被一个bug卡了好久，费了不少时间，才记起文章还没发。