Babylonjs-mesh-facetdata
提供：Dev Guides
BabylonJS-Mesh FacetData
ファセットデータは大量のメモリを消費するため、この機能はデフォルトでは有効になっていません。 有効にするには、必要に応じてメッシュを作成し、ファセットデータを更新する必要があります。 これを理解するために次の例を検討してください-
mesh.updateFacetData();メッシュにはいくつかの平面を持たせることができます。 たとえば、ボックスには6つの側面があるため、6つの平面四角形の面があります。 その各面は、2つの三角形を使用してWebGLレベルで描画されます。
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法線の座標を使用して、球のファセット法線に三角形を描画します。
Demo
<!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>出力
このデモでは、画像 cone.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
