《Three.js 入门指南》3.0 - 代码构建的最基本结构。


3.0 代码构建的最基本结构

说明:

我们必需首先知道,Three.js 的一些入门级概念:

我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的。甚至CAD以及市面上众多的制图软件的底层,用的也是这一套标准。 

而在JS中,这套标准的实现方式是基于OpenGL 标准开放的WebGL, 专注于网页的3D效果实现。 

3D的基本实现原理,其实没有什么新的产物,还是基于HTML、CSS、JS 的产物,只不过它可以更加复杂而已,可以实现极为强大的效果和功能,这是下一代的Web革命。

Canvas画布,是我们在Html中接触的概念。

什么是Three.js ?

和其他众多的js库,一样,Three.js也是一套库,不过它专注于3D视图实现,它面向的对象是WebGL,库的作用是让我们可以更加高效的产出代码,减少代码量,我们只需要用它暴露给我们的接口,就能快速的完成我们需要的图形,而不需要我们直接面向WebGL,那将很复杂,代码量很大。 

总得来讲,Three.js 是为了便利我们的开发而出现的产物,它的作用是简化开发、减少代码量。 

代码结构

组成:

一个典型的Three.js程序至少要包括:

渲染器(Renderer)、

场景(Scene)、

照相机(Camera),

以及你在场景中创建的物体。

渲染器的两种写法方式

渲染器(Renderer),的组成其实就是两个小部分,一个是dom,一个是画布初始化函数到该dom。 然后把这两个绑定起来。 

这里说的渲染器的两种写法,其实就是我们学html和js的时候,可以手写一个dom节点,也可以用js创建一个dom节点。 

方式一:js创建





    
    
    
    
    Document



    



方式二:手写dom,然后绑定。





    
    
    
    
    Document



    




基本代码整体构建说明

代码结构以下给出注释





    
    
    
    
    Document



    
    



《Three.js入门指南》一书,在第一章就简要的介绍了创建一个Three.js程序的过程。