一般而言,需要实现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 3D,只需要很少的代码,就能实现效果比较炫的渐变效果。
如果你对于底层的实现比较感兴趣,在此也可以顺便提一下,其实底层的实现是GPU通过物体的UV坐标来实现的渐变,以linear-v渐变方式为例,如果你设置了0的位置是color1 ‘red’,1 的位置是 color2 ‘orange’,那么在任何一个点A上,假定其UV坐标为u,v,其颜色就可以在GPU里面计算得到:
1 |
finalColor = (v - 0) * color2 + (1 - v) * color1; |
分享到:
相关推荐
twaver 3D机房接口文档
TWaver是基于WebGL3D一个框架,可以使用其框架进行web3d的开发,这里贴上官方的一个小案例,可以参照使用。
TWaver 3D Flex 3D 实例 例子
twaver3d 的开发文档,对于想使用3D技术来实现模型的朋友,是一个不错的选择
TWaver HTML5 3D 制作的demo提供一个3d图形展示的基本代码。TWaver的3d图形组件库,小demo
10个TWaver网页3D可视化精彩案例.docx
twaver示例可直接放到jetty下运行,含twaver.js alarm.html资源。
TWaver-flex的库TWaver.swc
TWaver是美国Serva Software公司的产品,是应用最为广泛的电信专业图形界面开发工具包,在电信行业应用非常广泛。TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 TWaver的图形组件库中提供了...
twaver for flex 开发手册
twaver-java-3.7 文档
最新的TWaver可视化学习开发包,用TWaver做出更炫更美的界面。
Twaver学习案例的例子
twaver web结合extjs源码学习资料
Twaver java开发帮助文档,英文版的。
html5版本的拓扑图,支持各种常见类型的图形,支持钻取,颜色及样式均可配置,非常好的资源
TWaver-java的库TWaver.jar
twaver-flex-3.6.5 官方demo
Twaver java 最新版本开发指导