BabylonJS - Mesh FacetData

上一个
下一个

小平面数据占用大量内存，此功能默认未启用。要启用它，我们需要根据需要创建一个网格，并向其更新小平面数据。考虑以下示例来理解此操作 −

mesh.updateFacetData();

网格可以含有一些平面。例如，一个盒子有 6 个面，因此有 6 个平面的正方形面。它的每个面都在 WebGL 级别绘制，有 2 个三角形。

var positions = mesh.getFacetLocalPositions(); // returns the array of facet positions in the local space
var normals = mesh.getFacetLocalNormals(); // returns the array of facet normals in the local space

使用法线的坐标，我们在球面上绘制出三角形法线的小平面。

演示

<!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.clearColor = new BABYLON.Color3(0.35, 0.35, 0.42);

            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            camera.setPosition(new BABYLON.Vector3(0.0, 3.0, -8.0));

            var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.2;
            var pl = new BABYLON.PointLight('pl', camera.position, scene);
            pl.intensity = 0.9;

            var mesh = BABYLON.MeshBuilder.CreateIcoSphere("m", {radius: 2.0}, scene);
            mesh.updateFacetData();
            var positions = mesh.getFacetLocalPositions();
            var normals = mesh.getFacetLocalNormals();	

            var cone = [];
            var matcone = [];
            var texture = [];
            for (var i = 0; i < positions.length; i++) {
               console.log(positions[i].add(normals[i]).x);
               matcone[i] = new BABYLON.StandardMaterial("mat1", scene);
               matcone[i].alpha = 1.0;
               matcone[i].diffuseColor = new BABYLON.Color3(0.9, 0, 2);
               texture[i] = new BABYLON.Texture("images/cone.jpg", scene);
               matcone[i].diffuseTexture = texture[i];

               cone[i] = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
               cone[i].position= new BABYLON.Vector3(positions[i].add(normals[i]).x,positions[i].add(normals[i]).y,positions[i].add(normals[i]).z);
               cone[i].material = matcone[i];	
            }		
            return scene
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

FacetData

在此演示中，我们使用了图片 cone.jpg。这些图片会存储在本地 images/ 文件夹中，下面也会粘贴以供参考。你可以下载一张你选择的图片，并在演示链接中使用。

images/cone.jpg

Cone Image
babylonjs_mesh.htm
打印页面
上一个
下一个
广告