HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

BabylonJS - 网格 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>

输出

上述代码行生成以下输出 −

Mesh LOD And Instances

说明

LOD 添加如下 −

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

addLODLevel 的第一个参数表示与相机的距离。超过此距离，将使用指定的级别。如果指定 null，则从与相机的指定距离查看网格时，将禁用网格的渲染。

babylonjs_mesh.html

❮ 上一节 下一节 ❯