如何?TWaver 3D色彩坡形

標籤：style   blog   http   color   io   os   ar   使用   sp   

一般而言，需要實現3D物體的漸層，通常的思路就是通過2D繪製一張漸層canvas圖片作為3D對象的貼圖，這種方式是可以解決這類問題的，不過對於一般使用者而言，通過2D產生一張漸層的圖片，有一定的難度，另外如果要產生的圖片比較多，效能效率上會成為一個瓶頸，特別是漸層隨著條件在不斷變化的情況下，就需要每次繪製的時候都去產生一張漸層的canvas圖，效率極其低。

在3D中，另外一種通常的方式就是通過頂點色來實現漸層，然而這種方式對於使用者的難度更大，因為需要使用者瞭解3D底層的一些原理，同時需要對於每個物體的頂點結構有深入瞭解；儘管如此難，這種方式由於受到了頂點數量的限制，其漸層的顏色數量也受到了限制，這是不能接受的一個問題。

由此看來，3D對象實現任意漸層有一定難度。不過，有一個好訊息是，對於使用TWaver 3D的使用者而言，TWaver 3D從底層封裝了一些常用的漸層，使用者只需要調用簡單的介面，就可以實現3D物體的色彩繽紛。
如果通過TWaver 3D實現漸層，通過一個簡單的例子，就可以看出來效果：

var box, node;function load() {    box = new mono.DataBox();    var camera = new mono.PerspectiveCamera(30, 1.5, 0.1, 10000);    camera.setPosition(0, 200, 500);    var network = new mono.Network3D(box, camera, myCanvas);    var interaction = new mono.DefaultInteraction(network);    interaction.zoomSpeed = 10;    network.setInteractions([new mono.SelectionInteraction(network), interaction]);    mono.Utils.autoAdjustNetworkBounds(network, document.documentElement, ‘clientWidth‘, ‘clientHeight‘, 0, 30);    var pointLight = new mono.PointLight(0xFFFFFF, 1);    pointLight.setPosition(10000, 10000, 10000);    box.add(pointLight);    box.add(new mono.AmbientLight(0x888888));    createGradientNode();}function createGradientNode(i) {    var node = new mono.Cylinder(30, 30, 60,100);    node.setStyle(‘m.color‘, ‘orange‘);    node.setStyle(‘side.m.gradient‘, {        0 : ‘red‘,        1 : ‘orange‘    });    node.setStyle(‘top.m.gradient‘, {        0 : ‘yellow‘,        1 : ‘orange‘    });    node.setStyle(‘bottom.m.gradient‘, {        0 : ‘yellow‘,        1 : ‘red‘    });    node.setStyle(‘side.m.gradientType‘, 2);    node.setStyle(‘top.m.gradientType‘, 5);    node.setStyle(‘bottom.m.gradientType‘, 5);    box.add(node);}function randomSeverity() {    var severities = mono.AlarmSeverity.severities;    return severities.get(randomInt(severities.size()));};function randomInt(n) {    return Math.floor(Math.random() * n);};

 

其中設定節點漸層的代碼如下,其中對圓柱體的top，side，bottom 3個面都設定了漸層，top，bottom設定了radial 漸層，side設定了linear漸層：

node.setStyle(‘side.m.gradient‘, {                    0 : ‘red‘,                    1 : ‘orange‘                });                node.setStyle(‘top.m.gradient‘, {                    0 : ‘yellow‘,                    1 : ‘orange‘                });                node.setStyle(‘bottom.m.gradient‘, {                    0 : ‘yellow‘,                    1 : ‘red‘                });                node.setStyle(‘side.m.gradientType‘, 2);                node.setStyle(‘top.m.gradientType‘, 5);                node.setStyle(‘bottom.m.gradientType‘, 5);

 

最終的效果如下：

可以看出，使用TWaver 3D，只需要很少的代碼，就能實現效果比較炫的漸層效果。
如果你對於底層的實現比較感興趣，在此也可以順便提一下，其實底層的實現是GPU通過物體的UV座標來實現的漸層，以linear-v漸層方式為例，如果你設定了0的位置是color1 ‘red’,1 的位置是 color2 ‘orange’，那麼在任何一個點A上，假定其UV座標為u，v，其顏色就可以在GPU裡面計算得到：

finalColor = (v - 0) * color2 + (1 - v) * color1;

 

如何?TWaver 3D色彩坡形