巴比倫JS - 網格 LOD 和例項

LOD 代表距離線。此功能允許你根據觀察者的距離指定網格。隨著觀察者與物體距離的增加，網格的細節級別使用 LOD 清晰地顯示。

在瀏覽器中檢視下面給出的演示，瞭解網格是如何渲染的，以及遠距離攝像機時的可視性 −

演示

<!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);
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 50, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
            light0.diffuse = new BABYLON.Color3(1, 1, 1);
            light0.specular = new BABYLON.Color3(1, 1, 1);
            light0.groundColor = new BABYLON.Color3(0, 0, 0);

            var count = 3;
            var scale = 4;

            var knot00 = BABYLON.Mesh.CreateTorusKnot("knot0", 0.5, 0.2, 128, 64, 2, 3, scene);
            var knot01 = BABYLON.Mesh.CreateBox("box", '1', scene);
            var knot02 = BABYLON.Mesh.CreateTorusKnot("knot2", 0.5, 0.2, 24, 12, 2, 3, scene);
            var knot03 = BABYLON.Mesh.CreateSphere("origin", 15, 2.0, scene);

            var materialforsphere = new BABYLON.StandardMaterial("texture1", scene);
            materialforsphere.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);

            var material1 = new BABYLON.StandardMaterial("colo1", scene);	
            material1.diffuseColor = new BABYLON.Color3(0.49, 0.25, 0);		
            
            var material2 = material1.clone("colo2");
            material2.diffuseColor = new BABYLON.Color3(1.0, 0.5, 0.7);	
           
            var material3 = material1.clone("colo3");
            material3.diffuseColor = new BABYLON.Color3(0.8, 1.0, 0.7);	

            knot00.material = material1;
            knot01.material = material2;
            knot02.material = material3;
            knot03.material = materialforsphere;	

            knot00.setEnabled(false);

            knot00.addLODLevel(15, knot01);
            knot00.addLODLevel(30, knot02);
            knot00.addLODLevel(45, knot03);
            knot00.addLODLevel(55, null);

            for (var x = -count; x <= count; x++) {
               for (var y = -count; y <= count; y++) {
                  for (var z = 5; z < 10; z++) {
                     var knot = knot00.createInstance("knotI");
                     knot.position = new BABYLON.Vector3(x * scale, y * scale, z * scale);
                  }
               }
            }
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

以上程式碼行生成以下輸出 −

解釋

LOD 如下新增 −

knot00.addLODLevel(15, knot01);
knot00.addLODLevel(30, knot02);
knot00.addLODLevel(45, knot03);
knot00.addLODLevel(55, null);

addLODLevel 的第一個引數告訴相機距離。超出此距離，將使用指定級別。當你指定 null 時，會停用網格的渲染，此時觀察者從指示的距離到相機檢視網格。

babylonjs_mesh.htm

列印頁面

上一個

下一個