一般而言,须要实现3D物体的渐变,通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图。这样的方式是能够解决这类问题的。只是对于一般用户而言,通过2D生成一张渐变的图片。有一定的难度,另外假设要生成的图片比較多。性能效率上会成为一个瓶颈,特别是渐变随着条件在不断变化的情况下。就须要每次绘制的时候都去生成一张渐变的canvas图,效率极其低。
在3D中,第二种通常的方式就是通过顶点色来实现渐变。然而这样的方式对于用户的难度更大,由于须要用户了解3D底层的一些原理,同一时候须要对于每一个物体的顶点结构有深入了解。虽然如此难。这样的方式由于受到了顶点数量的限制。其渐变的颜色数量也受到了限制,这是不能接受的一个问题。
由此看来,3D对象实现随意渐变有一定难度。只是。有一个好消息是,对于使用TWaver 3D的用户而言。TWaver 3D从底层封装了一些经常使用的渐变,用户仅仅须要调用简单的接口,就能够实现3D物体的色彩缤纷。
假设通过TWaver 3D实现渐变,通过一个简单的样例,就能够看出来效果:
4 |
box
= new mono.DataBox(); |
5 |
var camera
= new mono.PerspectiveCamera(30,
1.5, 0.1, 10000); |
6 |
camera.setPosition(0,
200, 500); |
8 |
var network
= new mono.Network3D(box,
camera, myCanvas); |
9 |
var interaction
= new mono.DefaultInteraction(network); |
10 |
interaction.zoomSpeed
= 10; |
11 |
network.setInteractions([ new mono.SelectionInteraction(network),
interaction]); |
12 |
mono.Utils.autoAdjustNetworkBounds(network,
document.documentElement, 'clientWidth' , 'clientHeight' ,
0, 30); |
14 |
var pointLight
= new mono.PointLight(0xFFFFFF,
1); |
15 |
pointLight.setPosition(10000,
10000, 10000); |
17 |
box.add( new mono.AmbientLight(0x888888)); |
21 |
function createGradientNode(i)
{ |
22 |
var node
= new mono.Cylinder(30,
30, 60,100); |
23 |
node.setStyle( 'm.color' , 'orange' ); |
24 |
node.setStyle( 'side.m.gradient' ,
{ |
28 |
node.setStyle( 'top.m.gradient' ,
{ |
32 |
node.setStyle( 'bottom.m.gradient' ,
{ |
36 |
node.setStyle( 'side.m.gradientType' ,
2); |
37 |
node.setStyle( 'top.m.gradientType' ,
5); |
38 |
node.setStyle( 'bottom.m.gradientType' ,
5); |
42 |
function randomSeverity()
{ |
43 |
var severities
= mono.AlarmSeverity.severities; |
44 |
return severities.get(randomInt(severities.size())); |
47 |
function randomInt(n)
{ |
48 |
return Math.floor(Math.random()
* n); |
当中设置节点渐变的代码例如以下,当中对圆柱体的top,side。bottom 3个面都设置了渐变,top。bottom设置了radial 渐变,side设置了linear渐变:
1 |
node.setStyle( 'side.m.gradient' ,
{ |
5 |
node.setStyle( 'top.m.gradient' ,
{ |
9 |
node.setStyle( 'bottom.m.gradient' ,
{ |
13 |
node.setStyle( 'side.m.gradientType' ,
2); |
14 |
node.setStyle( 'top.m.gradientType' ,
5); |
15 |
node.setStyle( 'bottom.m.gradientType' ,
5); |
终于的效果例如以下:
![TWaver-Gradient](http://twaver.servasoft.com/wp-content/uploads/2014/10/Snip20141021_9.png)
能够看出。使用TWaver 3D。仅仅须要非常少的代码。就能实现效果比較炫的渐变效果。
假设你对于底层的实现比較感兴趣,在此也能够顺便提一下,事实上底层的实现是GPU通过物体的UV坐标来实现的渐变。以linear-v渐变方式为例,假设你设置了0的位置是color1 ‘red’,1 的位置是 color2 ‘orange’,那么在不论什么一个点A上。假定其UV坐标为u,v,其颜色就能够在GPU里面计算得到:
1 |
finalColor
= (v - 0) * color2 + (1 - v) * color1; |
版权声明:本文博客原创文章。博客,未经同意,不得转载。