article
article copied to clipboard
hiloteam
创建一个立方体
创建一个立方体
- 设置摄像机
- 创建舞台 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）
- 其他材质属性
所有的材质在渲染上的表现都是材质属性（上述几类）和光的叠加计算后的结果。如下图所示，如果我们把物体材质的各种属性抽象为一张张描述贴图，通过在着色器中加入光的计算，渲染后的结果就是我们在现实世界里的看到的样子。
着色器，指一组供计算机图形资源在执行渲染任务时使用的指令
有一类材质渲染只考虑贴图和颜色，这些贴图颜色在处理之前已经做过预渲染（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;
}
});
- x:-200，Mesh均继承Node，位置属性等均由Node结点提供
- onUpdate：继承自Node，会在每一帧轮询期间被调用
最后将网格结点添加到舞台
stage.addChild(blueBox);
渲染一个立方体的工作就完成了。
Reference
- Hilo2d： http://hiloteam.github.io/
- WebGL1.0 Specification： https://www.khronos.org/registry/webgl/specs/1.0/
- WebGL2.0 Specification： https://www.khronos.org/registry/webgl/specs/latest/2.0/
- Types of Maps: https://www.reallusion.com/iclone/help/iClone3/15_Multiple_Channel_Texture_Mapping/Types_of_maps.htm
