BabylonJS - 網格混合模式

你可以透過修改材質的 alphamode 來建立混合模式。

可以使用下列模式，並如輸出中所示應用於方框中 -

BABYLON.Engine.ALPHA_COMBINE
BABYLON.Engine.ALPHA_ADD
BABYLON.Engine.ALPHA_SUBTRACT
BABYLON.Engine.ALPHA_MULTIPLY
BABYLON.Engine.ALPHA_MAXIMIZED

混合模式的應用方法如下 -

mat = material_base.clone(null);
mat.alphaMode  = blendmode;

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

            scene.ambientColor = new BABYLON.Color3(0.05, 0.2,0.05 );

            //Create a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);

            //Create an Arc Rotate Camera - aimed negative z this time
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            //Creation of a plane
            var plane = BABYLON.Mesh.CreatePlane("plane", 250, scene);
            plane.position.y = -8;
            plane.rotation.x = Math.PI / 2;

            //Creation of a repeated textured material
            var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
            materialPlane.diffuseTexture = new BABYLON.Texture("images/board.jpg", scene);
            materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
            materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
            materialPlane.backFaceCulling = false;//Allways show the front and the back of an element

            plane.material = materialPlane;

            // materials
            var material_base = new BABYLON.StandardMaterial("mat", scene);
            material_base.diffuseTexture = new BABYLON.Texture("images/glitter.jpg", scene);
            material_base.alpha = 0.9999;		// artificially set the material as alpha blended
            material_base.ambientColor = BABYLON.Color3.White();

            var alphamodes = [
               BABYLON.Engine.ALPHA_COMBINE,
               BABYLON.Engine.ALPHA_ADD,
               BABYLON.Engine.ALPHA_SUBTRACT,
               BABYLON.Engine.ALPHA_MULTIPLY,
               BABYLON.Engine.ALPHA_MAXIMIZED
            ];

            var count = 5;
            var mesh;
            var mat;
            var angle;
            for (var i = 0; i < count; i++) {
               mesh = BABYLON.Mesh.CreateBox("cube" + i, 12, scene);
               mesh.position.x = 17 * (i +0.5 - count/2);
               mat = material_base.clone(null);
               mat.alphaMode = alphamodes[i];
               mesh.material = mat;
            }
            return scene
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

以上程式碼行會生成以下輸出 -

在此演示中，我們使用了影像 glitter.jpg, board.jpg。這些影像儲存在本地 images/ 資料夾中，並出於參考目的貼上在下方。你可以下載你選擇的任何影像，並在演示連結中使用。

images/glitter.jpg

images/board.jpg

babylonjs_mesh.htm

列印頁面

上一個

下一個