创建一个立方体

06wj commented 7 years ago

设置摄像机
创建舞台 Stage
生成一个Ticker
构建一个Mesh：创建几何体
构建一个Mesh：创建材质

设置摄像机

在创建一个立方体之前，我们首先创建一个透视摄像机，Hilo3d.PerspectiveCamera

代码如下：

var camera = new Hilo3d.PerspectiveCamera({
    aspect: innerWidth / innerHeight,
    far: 20000,
    near:1,
    z:5
});

aspect：指定了我们的摄像机需要捕捉的设备空间（默认情况下为手机屏幕的设备宽高比）
far：指定了平截头体的最远平面z值
near：指定了平截头体的最近平面z值
z：指定了当前的相机所处位置

创建一个舞台Stage

完成相机以后我们需要一个舞台元素，和Hilo2D 舞台元素Stage 类似，我们在创建3D场景的时候也需要一个舞台元素

var stage = new Hilo3d.Stage({
    container: $('container'),
    camera: camera,
    width: innerWidth,
    height: innerHeight
});

container: 制定舞台绑定的DOM元素，Hilo3D会创建Canvas元素填充，同时生成一个逻辑的舞台
camera：摄像机元素，即我们上面创建的透视相机
width：舞台的宽度
height：舞台的高度

生成一个Ticker

通常情况下，我们不太需要单帧的渲染输出，而是需要在一个交互过程里完成对不同操作响应和元素的渲染。完成这项工作的就是计时器（Ticker）。Hilo3d沿用了Hilo2d的Ticker Hilo3d.Ticker

var ticker = new Hilo3d.Ticker(60);
ticker.addTick(stage);
ticker.addTick(Hilo3d.Tween);
ticker.start();

Hilo3d.Ticker(60) 的构造函数指定了FPS，你可以修改这个值来指定高低频的渲染
addTick,任何一个需要同步渲染和计数的对象都需要被添加，以在每个时间片来临后完成相应操作
start, Ticker需要主动唤起

构建一个Mesh

在构建Mesh之前，我们先说说3维构造，从模型和计算渲染角度来讲，我们把模型分成两块，一种是几何形，另外一种是几何形上的附着（材质）。可以理解成人体的骨络和皮肉。

为了更加形象解释，我们使用2015年《双十一万店同庆》的天猫模型举例：

如上图所示，设计师在使用Maya 3DMax等软件，通过创建3维点构造出了猫模型的几何形。即Hilo3d中的gemometry的概念

设计好几何体以后设计师按照一定的UV展开，在这个几何形上添加纹理附着：

完成“骨络”和“皮肉”的一一对应的最关键的工作就是UV展开，以下就是猫模型的UV展开图：

构建Mesh，先创建一个几何体

介绍完几何形和附着，我们先创建一个简单的几何形——立方体 new Hilo3d.BoxGeometry()

V1.0 版本提供最基本的几何体构建，操作也非常简便。

构建Mesh，再创建一个材质

材质分类比较广，和被渲染物体本身材质属性有关，也和环境、光有关。在Hilo3d中以Material定义材质。

根据光和自身物理属性，我们把材质的属性分为以下几类：

底色附着（BaseColor）
反光度（Reflectivity）
透明度（Transparency）
金属色（Metallic）
高光（Specular）
粗糙度（Roughness）
其他材质属性

所有的材质在渲染上的表现都是材质属性（上述几类）和光的叠加计算后的结果。如下图所示，如果我们把物体材质的各种属性抽象为一张张描述贴图，通过在着色器中加入光的计算，渲染后的结果就是我们在现实世界里的看到的样子。

着色器，指一组供计算机图形资源在执行渲染任务时使用的指令

e79935c45bbe00a3bd1bb1c73e1efe5c

有一类材质渲染只考虑贴图和颜色，这些贴图颜色在处理之前已经做过预渲染（Photoshop 或者单反相机等），这一类的渲染方式称为Texture mapping ，或者叫diffuse mapping。

实现一个颜色纹理的材质可以这样：

var color = new Hilo3d.Color(0, 0, 1)

new Hilo3d.BasicMaterial({
    diffuse: color
})

diffuse参数：diffuse Mapping，又叫 Texture mapping，这里接受参数 Hilo3d.Color 或者 Hilo3d.Texture
BasicMaterial 使用的光照模型为 Phong shading，此处不做扩展解释

刚才提到，底色附着可以通过颜色实现，也可以通过纹理Hilo3d.Texture 来实现：

var texture = new Hilo3d.Texture({ image });

new Hilo3d.BasicMaterial({
    diffuse: texture
})

构建完材质以后，利用上面的几何形，我们就可以创建一个网格（Mesh）

PS: 网格是几何形与材质的结合

var blueBox = new Hilo3d.Mesh({
    geometry: new Hilo3d.BoxGeometry(),
    material: new Hilo3d.BasicMaterial({
        diffuse: new Hilo3d.Color(0, 0, 1)
    }),
    x: -200,
    onUpdate: function() {
        this.rotationX += .3;
        this.rotationY += .3;
    }
});