Babylonjs-morph-mesh
提供：Dev Guides
BabylonJS-メッシュのモーフ
モーフィングは、何らかの遷移手段によってオブジェクトの形状を別の形状に変更します。 図形の更新可能なパラメーターを見てきました。それ以外の場合、パラメーターはfalseに設定されます。 モーフィングの場合、trueに設定され、メッシュが更新されて形状が変更されます。
以下に示すデモは、リボンモーフィングされた線を示しています。
Linesによるデモ
<!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( .5, .5, .5);
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
camera.setPosition(new BABYLON.Vector3(0, 0, -100));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 0, 0);
pl.intensity = 0.95;
//lines creation
var sinpath = [];
for(var i = -20; i < 20; i++) {
var x = i;
var y = 0;
var z = 0;
sinpath.push(new BABYLON.Vector3(x, y, z));
}
var sinmesh = BABYLON.Mesh.CreateLines("lines", sinpath, scene, true);
//lines creation
var cospath = [];
for(var i = 20; i > -20; i--) {
var x = i;
var y = 0;
var z = 0;
cospath.push(new BABYLON.Vector3(x, y, z));
}
console.log(cospath);
var cosmesh = BABYLON.Mesh.CreateLines("lines", cospath, scene, true);
var updatePath = function(sinpath, k) {
for (var i = 0; i < sinpath.length; i++) {
var x = sinpath[i].x;
var z = sinpath[i].z;
var y = 10 *Math.sin(i/3 + k);//using sin on y-axis
sinpath[i].x = x;
sinpath[i].y = y;
sinpath[i].z = z;
}
};
var updatePath1 = function(cospath, k) {
for (var i = 0; i < cospath.length; i++) {
var x = cospath[i].x;
var z = cospath[i].z;
var y = 10* Math.cos(i/3 + k);//using cos on y -axis
cospath[i].x = x;
cospath[i].y = y;
cospath[i].z = z;
}
};
//morphing
var k = 0;
scene.registerBeforeRender(function() {
updatePath(sinpath, k);
updatePath1(cospath, k);
//updateLines(mesh, path);
sinmesh = BABYLON.Mesh.CreateLines(null, sinpath, null, null, sinmesh);
cosmesh = BABYLON.Mesh.CreateLines(null, cospath, null, null, cosmesh);
k += 0.10;
pl.position = camera.position;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
説明
ラインは、sinおよびcos角度を使用して更新およびモーフィングされます。
パス-20から20まで2行が作成されます。 その後、y軸のsinとcosを使用して線が更新されます。
更新可能なオプションを使用するメッシュは、後で更新できるようにtrueに設定されます。 これを理解するために次の例を検討してください-
var sinmesh = BABYLON.Mesh.CreateLines("lines", sinpath, scene, true);後ですべての値がnullに設定され、パスのみが更新されます。 これを理解するには、次の例を検討してください。
sinmesh = BABYLON.Mesh.CreateLines(null, sinpath, null, null, sinmesh);最後のパラメータは、使用されるメッシュの名前です。
モーフリボン
モーフリボンの作成方法を見てみましょう。
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( .5, .5, .5);
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
camera.setPosition(new BABYLON.Vector3(0, 0, -100));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 0, 0);
pl.intensity = 0.95;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
//path function
var pathFunction = function(k) {
var path = [];
for (var i = 60; i > 0; i--) {
var x = i - 30;
var y = 0;
var z = k;
path.push(new BABYLON.Vector3(x, y, z));
}
return path;
};
//ribbon creation
var sideO = BABYLON.Mesh.BACKSIDE;
var pathArray = [];
for (var i = -20; i < 20; i++) {
pathArray.push(pathFunction(i *2));
}
console.log(pathArray);
var mesh = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, false, false, 0, scene, true, sideO);
mesh.material = mat;
var updatePath = function(path) {
for (var i = 0; i < path.length; i++) {
var x = path[i].x;
var z = path[i].z;
var y = -20* Math.sin(i/10);
path[i].x = x;
path[i].y = y;
path[i].z = z;
}
};
//animation
scene.registerBeforeRender(function() {
for(var p = 0; p < pathArray.length; p++) {
updatePath(pathArray[p]);
}
mesh = BABYLON.Mesh.CreateRibbon(null, pathArray, null, null, null, null, null, null, mesh);
pl.position = camera.position;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
説明
リボンの場合、最初に次のコマンドを使用してパスが作成されます-
var mesh = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, false, false, 0, scene, true, sideO);向きはvar sideO = BABYLON.Mesh.BACKSIDEに変更されます。デファウルサイドから。
メッシュは更新可能に保たれます。 pathArrayが変更され、次のコマンドを使用してリボンメッシュに再び更新されます-
mesh = BABYLON.Mesh.CreateRibbon(null, pathArray, null, null, null, null, null, null, mesh);リボンに渡される値はすべてnullです。更新されたpathArrayのみが変更されて送信されます。
