Open 06wj opened 7 years ago
在创建一个立方体之前,我们首先创建一个透视摄像机,Hilo3d.PerspectiveCamera
Hilo3d.PerspectiveCamera
代码如下:
var camera = new Hilo3d.PerspectiveCamera({ aspect: innerWidth / innerHeight, far: 20000, near:1, z:5 });
完成相机以后我们需要一个舞台元素,和Hilo2D 舞台元素Stage 类似,我们在创建3D场景的时候 也需要一个舞台元素
var stage = new Hilo3d.Stage({ container: $('container'), camera: camera, width: innerWidth, height: innerHeight });
通常情况下,我们不太需要单帧的渲染输出,而是需要在一个交互过程里完成对不同操作响应和元素的渲染。完成这项工作的就是计时器(Ticker)。Hilo3d沿用了Hilo2d的Ticker Hilo3d.Ticker
Hilo3d.Ticker
var ticker = new Hilo3d.Ticker(60); ticker.addTick(stage); ticker.addTick(Hilo3d.Tween); ticker.start();
Hilo3d.Ticker(60)
addTick
start
在构建Mesh之前,我们先说说3维构造,从模型和计算渲染角度来讲,我们把模型分成两块,一种是几何形,另外一种是几何形上的附着(材质)。可以理解成人体的骨络和皮肉。
为了更加形象解释,我们使用2015年《双十一万店同庆》的天猫模型举例:
如上图所示,设计师在使用Maya 3DMax等软件,通过创建3维点构造出了猫模型的几何形。即Hilo3d中的gemometry的概念
gemometry
设计好几何体以后设计师按照一定的UV展开,在这个几何形上添加纹理附着:
完成“骨络”和“皮肉”的一一对应的最关键的工作就是UV展开,以下就是猫模型的UV展开图:
介绍完几何形和附着,我们先创建一个简单的几何形——立方体 new Hilo3d.BoxGeometry()
new Hilo3d.BoxGeometry()
V1.0 版本提供最基本的几何体构建,操作也非常简便。
材质分类比较广,和被渲染物体本身材质属性有关,也和环境、光有关。在Hilo3d中以Material定义材质。
Material
根据光和自身物理属性,我们把材质的属性分为以下几类:
所有的材质在渲染上的表现都是材质属性(上述几类)和光的叠加计算后的结果。如下图所示,如果我们把物体材质的各种属性抽象为一张张描述贴图,通过在着色器中加入光的计算,渲染后的结果就是我们在现实世界里的看到的样子。
着色器,指一组供计算机图形资源在执行渲染任务时使用的指令
有一类材质渲染只考虑贴图和颜色,这些贴图颜色在处理之前已经做过预渲染(Photoshop 或者 单反相机等),这一类的渲染方式称为Texture mapping ,或者叫diffuse mapping。
实现一个颜色纹理的材质可以这样:
var color = new Hilo3d.Color(0, 0, 1) new Hilo3d.BasicMaterial({ diffuse: color })
Hilo3d.Color
Hilo3d.Texture
刚才提到,底色附着可以通过颜色实现,也可以通过纹理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; } });
最后将网格结点添加到舞台
stage.addChild(blueBox);
渲染一个立方体的工作就完成了。
示例demo地址
手动点赞。好多概念在Three.js里面也有,希望和Hilo2D一样,学习成本不高且易扩展
为什么教程不是在wiki,而是发在issue里
@muyu525 这样可以评论啊
创建一个立方体
设置摄像机
在创建一个立方体之前,我们首先创建一个透视摄像机,
Hilo3d.PerspectiveCamera
代码如下:
创建一个舞台Stage
完成相机以后我们需要一个舞台元素,和Hilo2D 舞台元素Stage 类似,我们在创建3D场景的时候 也需要一个舞台元素
生成一个Ticker
通常情况下,我们不太需要单帧的渲染输出,而是需要在一个交互过程里完成对不同操作响应和元素的渲染。完成这项工作的就是计时器(Ticker)。Hilo3d沿用了Hilo2d的Ticker
Hilo3d.Ticker
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
定义材质。根据光和自身物理属性,我们把材质的属性分为以下几类:
所有的材质在渲染上的表现都是材质属性(上述几类)和光的叠加计算后的结果。如下图所示,如果我们把物体材质的各种属性抽象为一张张描述贴图,通过在着色器中加入光的计算,渲染后的结果就是我们在现实世界里的看到的样子。
有一类材质渲染只考虑贴图和颜色,这些贴图颜色在处理之前已经做过预渲染(Photoshop 或者 单反相机等),这一类的渲染方式称为Texture mapping ,或者叫diffuse mapping。
实现一个颜色纹理的材质可以这样:
Hilo3d.Color
或者Hilo3d.Texture
刚才提到,底色附着可以通过颜色实现,也可以通过纹理
Hilo3d.Texture
来实现:构建完材质以后,利用上面的几何形,我们就可以创建一个网格(Mesh)
最后将网格结点添加到舞台
渲染一个立方体的工作就完成了。
示例demo地址
Reference