BabylonJS - Maille
Dans ce chapitre, nous allons apprendre à créer différentes formes à l'aide du générateur de maillage. Nous avons déjà appris à créer des formes dans l'un de nos chapitres précédents.
La différence est qu'avec meshbuilder vous donne la flexibilité d'ajouter de la couleur, des images aux formes.
CreateBox à l'aide de MeshBuilder
Voyons maintenant comment créer une boîte à l'aide de MeshBuilder.
Démo
<!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, 0, 1);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0, 1, 0);
var texture = new BABYLON.Texture("images/cube.png", scene);
mat.diffuseTexture = texture;
var hSpriteNb = 3; // 3 sprites per raw
var vSpriteNb = 2; // 2 sprite raws
var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}
var options = {
width: 1.5,
height: 1.5,
depth: 1.5,
faceUV: faceUV
};
var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
box.material = mat;
scene.registerBeforeRender(function() {
pl.position = camera.position;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
La ligne de code ci-dessus génère la sortie suivante -
Pour l'exemple ci-dessus, nous avons utilisé une image de sprite comme indiqué ci-dessous. Il a horizontalement 3 colonnes et verticalement 2 rangées.
Dans cette démo, nous avons utilisé une image appelée cube.png. Les images sont stockées localement dans les images / dossier et sont également collées ci-dessous pour référence. Veuillez noter que cube.png est une image de sprite, une image de sprite est une collection d'images. Nous voulions montrer l'image sur un cube, nous voulions donc tous les côtés du cube ensemble. Vous pouvez également télécharger des images de sprite similaires de votre choix et les utiliser dans le lien de démonstration.
Le générateur createBox vous donne des options pour les tailles.
Par exemple,
var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);Démo
var hSpriteNb = 3; // 3 sprites per raw ie colums horizontally as shown in the image
var vSpriteNb = 2; // 2 sprite raws as shown in the image above.
var faceUV = new Array(6); // the cube has 6 sides so creating array for same.
for (var i = 0; i < 6; i++) {
faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}
var options = {
width: 1.5,
height: 1.5,
depth: 1.5,
faceUV: faceUV
};C'est ce qu'on appelle appliquer des textures au meshbuilder à l'aide de la méthode createBox. Nous avons utilisé l'image cube.png qui a horizontalement 3 colonnes et verticalement 2 rangées. Le cube ou la boîte a 6 côtés.
Pour appliquer des textures, nous utilisons le paramètre options.Par exemple,
Var box = BABYLON.MeshBuilder.CreateBox ('box', options, scene);Nous avons défini un tableau appelé faceUV avec une taille de 6 qui sont les côtés du cube. Ce tableau aura toujours des éléments Vector4. Chaque Vector4 (x, y, z, w) sera défini comme suit -
- x = Ubottom
- y = V bas
- z = Utop
- w = Vtop
Les vecteurs sont dans la plage [0, 1]. Ubottom et Vbottom sont les coordonnées 2D du point en bas à gauche de l'endroit où le recadrage de texture commence. Utop, Vtop sont les points en haut à droite où le recadrage de texture se termine.
var hSpriteNb = 3; // 3 sprites per raw
var vSpriteNb = 2; // 2 sprite raws
var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}Supposons que la texture par défaut, c'est-à-dire que l'image donnée soit appliquée à toutes les faces de la boîte. Si vous souhaitez modifier seulement 1 face ou 1 côté de la boîte, vous pouvez directement affecter les valeurs comme indiqué ci-dessous -
var hSpriteNb = 3; // 3 sprites per raw
var vSpriteNb = 2; // 2 sprite raws
var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);Exemple
<!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, 0, 1);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
var texture = new BABYLON.Texture("images/3d.png", scene);
mat.diffuseTexture = texture;
var hSpriteNb = 3; // 3 sprites per raw
var vSpriteNb = 2; // 2 sprite raws
var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);
var options = {
width:3,
height:3,
depth: 3,
faceUV:faceUV
};
var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
box.material = mat;
scene.registerBeforeRender(function() {
pl.position = camera.position;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
La ligne de code ci-dessus génère la sortie suivante -
Dans cette démo, nous avons utilisé une image appelée 3d.png. Les images sont stockées localement dans les images / dossier et sont également collées ci-dessous pour référence. Veuillez noter que 3d.png est une image de sprite; une image de sprite est une collection d'images. Nous voulions montrer l'image sur un cube avec tous les côtés du cube ensemble. Vous pouvez également télécharger des images de sprite similaires de votre choix et les utiliser dans le lien de démonstration.
Texture utilisée pour la boîte - images/3d.png
MeshCylinder
Dans cette section, nous verrons comment créer MeshCylinder.
Pour créer MeshCylinder, vous devez utiliser la classe BABYLON.MeshBuilder.CreateCylinder.
Les paramètres de la classe sont les suivants -
var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
height: 3,
diameter: 35,
tessellation: 52
}, scene);La différence entre CreateCylinder utilisant mesh et meshbuilder est que vous pouvez utiliser des options dans meshbuilder. À l'heure actuelle, nous utilisons la hauteur, le diamètre et la tessellation comme options à transmettre au cylindre. Nous utilisons un matériau standard avec du fil de fer comme matériau pour ce treillis. Vérifiez la sortie dans le navigateur et voyez le cylindre. Vous pouvez utiliser une structure similaire dans votre jeu comme une roue tournant dans la scène.
Démo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Babylon.js demo - Mesh Builder</title>
<script src = "babylon.js"></script>
<style>
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
</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.8, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 6, 1.3, 40, new BABYLON.Vector3(0, -3, 0), scene);
var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseColor = new BABYLON.Color3(0.1, .5, 0);
mat.specularColor = new BABYLON.Color3(0, 0, 0);
mat.wireframe = true;
var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
height: 3,
diameter: 35,
tessellation: 52
}, scene);
meshcylinder.material = mat;
meshcylinder.position = new BABYLON.Vector3(0, 0, 0);
scene.activeCamera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
La ligne de code ci-dessus génère la sortie suivante -
Un certain nombre de formes créées avec le générateur de maillage seront désormais utilisées ensemble dans une seule démo. Les formes couvertes dans le lien de démonstration ci-dessous sont répertoriées dans les sections suivantes.
Ground
Cone
Plane
Disc
Torus
Polyhedron
IcoSphere
BabylonJS - Intersection et point de maillage
L'intersection de maillage dans les jeux est importante car vous savez ce qui doit être fait lorsque 2 objets se croisent dans un jeu. Le même concept est expliqué dans la démo ci-dessous sur l'événement qui doit être capturé lorsque les maillages se croisent.
Dans la démonstration ci-dessous, nous avons couvert les deux concepts suivants -
- Intersection du maillage
- Point d'intersection
<!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(1, 1, 1);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var matcone = new BABYLON.StandardMaterial("mat1", scene);
matcone.alpha = 1.0;
matcone.diffuseColor = new BABYLON.Color3(0, 0, 0);
matcone.wireframe = true;
var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {height : 10, diameterTop: 10,diameterBottom:10, tessellation: 5}, scene);
cone.position= new BABYLON.Vector3(12,1,0);
cone.material = matcone;
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 5, 1.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon1.position = new BABYLON.Vector3(4, 2, 0);
balloon2.position = new BABYLON.Vector3(5, 1, 0);
balloon3.position = new BABYLON.Vector3(7, 0, 0);
var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
var a = 0.01;
scene.registerBeforeRender(function () {
if (balloon1.intersectsMesh(cone, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon2.intersectsMesh(cone, false)) {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon2.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon3.intersectsMesh(cone, false)) {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}
a += 0.01;
balloon1.position.x += Math.cos(a) / 10;
balloon2.position.x += Math.cos(a) / 10;
balloon3.position.x += Math.cos(a) / 10;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
Le code ci-dessus génère la sortie suivante -
Explication
Avec le code ci-dessus, nous avons créé un cylindre avec une image filaire vraie. Nous avons créé 3 sphères. La couleur d'origine de la sphère est le vert.
dans le scene.registerBeforeRender fonction, nous changerons la couleur de la sphère en fonction de l'intersection avec le maillage qui est ici le cylindre.
Considérez le code suivant dans registerBeforeRender -
if (balloon1.intersectsMesh(cone, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}intersectsMesh donne vrai ou faux s'il croise le maillage donné dans le paramètre qui lui est passé.
Par exemple,
balloon1.intersectsMesh(cone, false); //cone refers to the cylinder mesh here.La couleur de la sphère passe au rouge, elle croise le cylindre; sinon, il est vert.
Le code suivant est utilisé pour le point à croiser -
var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}Ici, pointtoIntersectvariable est le vecteur de position qui vaut 10 sur l'axe des x. Si la sphère croise le point d'intersection, la couleur de la sphère devient noire.
BabylonJS - Collision MeshPicking
La cueillette de collision vous donne en fait les coordonnées et vous pouvez positionner votre maillage à cet endroit. L'objet est choisi par la souris et vous pouvez simplement le placer là où vous cliquez avec votre souris. Considérez que vous devez placer un maillage (objet) à un endroit où l'utilisateur clique avec la souris; ainsi, avec l'aide de la prise de collision, il vous aide avec les coordonnées à la position de l'endroit cliqué.
Démo
<!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(1, 1, 1);
// setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon1.position = new BABYLON.Vector3(0, 0, -0.1);
balloon2.position = new BABYLON.Vector3(0, 0, -0.1);
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
balloon2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);
//Wall
var wall = BABYLON.Mesh.CreatePlane("wall", 30.0, scene);
wall.material = new BABYLON.StandardMaterial("wallMat", scene);
wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);
//When pointer down event is raised
scene.onPointerDown = function (evt, pickResult) {
// if the click hits the ground object, we change the impact position
if (pickResult.hit) {
var dateValue = new Date();
var secondNumber = dateValue.getSeconds();
if (secondNumber % 2 == 0) {
balloon1.position.x = pickResult.pickedPoint.x;
balloon1.position.y = pickResult.pickedPoint.y;
} else {
balloon2.position.x = pickResult.pickedPoint.x;
balloon2.position.y = pickResult.pickedPoint.y;
}
}
};
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
Explication
Dans l'exemple ci-dessus, nous avons utilisé un plan et 2 sphères. Pour générer cette sortie, utilisez le code suivant -
scene.onPointerDown = function (evt, pickResult) {
// if the click hits the ground object, we change the impact position
if (pickResult.hit) {
var dateValue = new Date();
var secondNumber = dateValue.getSeconds();
if (secondNumber % 2 == 0) {
balloon1.position.x = pickResult.pickedPoint.x;
balloon1.position.y = pickResult.pickedPoint.y;
} else {
balloon2.position.x = pickResult.pickedPoint.x;
balloon2.position.y = pickResult.pickedPoint.y;
}
}
};L'événement scene.onPointerDown vous donne les coordonnées -x, y et z qui dans notre exemple sont pickResult.
Cela donne à pickResult.hit la valeur true si vous cliquez sur le maillage du sol. Nous considérons les secondes impaires / paires et changeons la position de la sphère pour choisir les coordonnées z et y du résultat comme indiqué ci-dessus. Une fois la position modifiée, la sphère est placée là où vous cliquez et positionnez votre souris. Vous pouvez essayer la démo ci-dessus pour la même chose.
BabylonJS - Raycasts
Les raycasts sont comme des rayons de soleil et sont utilisés pour vérifier les collisions et les intersections dans la scène.
Syntaxe
var ray = new BABYLON.Ray(origin, direction, length);Paramètres
Considérez les paramètres suivants pour les raycasts -
Origin - Lieu où le rayon commencera.
Direction - La direction vers le rayon est calculée comme suit -
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);Ensuite, pour obtenir la direction, nous la soustrayons de l'origine, la position de la boîte -
Length - Longueur du rayon.
Démo
<!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 light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);
var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
box.position.y = 2;
box.scaling.z = 2;
var matBox = new BABYLON.StandardMaterial("matBox", scene);
matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
box.material = matBox;
box.isPickable = false;
var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
box2.position = new BABYLON.Vector3(-20, 4, 0);
var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
box2.material = matBox2;
var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
box3.position = new BABYLON.Vector3(20, 4, 0);
var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
box3.material = matBox3;
var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
box4.position = new BABYLON.Vector3(0, 0, 20);
var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
box4.material = matBox4;
var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
box5.position = new BABYLON.Vector3(0, 0, -20);
var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
box5.material = matBox5;
function mousemovef() {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
var diffX = pickResult.pickedPoint.x - box.position.x;
var diffY = pickResult.pickedPoint.z - box.position.z;
box.rotation.y = Math.atan2(diffX,diffY);
}
}
scene.onPointerMove = function () {
mousemovef();
};
function vecToLocal(vector, mesh) {
var m = mesh.getWorldMatrix();
var v = BABYLON.Vector3.TransformCoordinates(vector, m);
return v;
}
scene.registerBeforeRender(function () {
var origin = box.position;
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
// ray.show(scene, new BABYLON.Color3(1, 1, 0.1));
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
La ligne de code ci-dessus génère la sortie suivante -
Explication
Il y a une boîte principale au centre qui agit comme un raycast. Au moment où il pointe vers l'une des boîtes, la taille de la boîte augmentera. Ce concept s'avère utile tout en jouant à des jeux pour savoir quel autre objet entre en contact et les mesures nécessaires peuvent être prises.
Ajouter box.isPickable = false;de sorte que la boîte principale au centre ne soit pas considérée. Si vous ne voulez pas qu'un objet soit inclus dans les rayons pour entrer en contact, ajoutezbox.isPickable = false; à lui.
Le code suivant ajoute la mise à l'échelle de la boîte qui est sélectionnée par le rayon.
scene.registerBeforeRender(function () {
var origin = box.position;
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});var ray = new BABYLON.Ray(origin, direction, length); crée un rayon et prend la position de la boîte principale comme origine.
La direction vers le rayon est calculée comme suit -
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);Ensuite, pour obtenir la direction, nous la soustrayons de l'origine, la position de la boîte. La fonctionvecToLocal est conçu pour transformer une position du point de vue du maillage en multipliant un vecteur par la matrice du maillage.
Nous obtenons le point de vie du rayon en utilisant var hit = scene.pickWithRay(ray);
Il donne la position où le rayon coïncide avec le maillage.
La mise à l'échelle est appliquée au maillage qui est sélectionné en exécutant la ligne de code suivante -
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}Essayez l'exemple ci-dessus dans le navigateur pour voir la sortie.
Raycast avec fonction de prédicat
Voyons maintenant comment fonctionne le raycast avec la fonction de prédicat et la direction indiquée avec rayhelper.
Démo
<!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 light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);
var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
box.position.y = 2;
box.scaling.z = 2;
var matBox = new BABYLON.StandardMaterial("matBox", scene);
matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
box.material = matBox;
box.isPickable = false;
var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
box2.position = new BABYLON.Vector3(-20, 4, 0);
var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
box2.material = matBox2;
var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
box3.position = new BABYLON.Vector3(20, 4, 0);
var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
box3.material = matBox3;
var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
box4.position = new BABYLON.Vector3(0, 0, 20);
var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
box4.material = matBox4;
var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
box5.position = new BABYLON.Vector3(0, 0, -20);
var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
box5.material = matBox5;
//ray showing the direction
var ray = new BABYLON.Ray();
var rayHelper = new BABYLON.RayHelper(ray);
var localMeshDirection = new BABYLON.Vector3(0, 0, -1);
var localMeshOrigin = new BABYLON.Vector3(0, 0, -.4);
var length = 10;
rayHelper.attachToMesh(box, localMeshDirection, localMeshOrigin, length);
rayHelper.show(scene);
function mousemovef() {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
var diffX = pickResult.pickedPoint.x - box.position.x;
var diffY = pickResult.pickedPoint.z - box.position.z;
box.rotation.y = Math.atan2(diffX,diffY);
}
}
scene.onPointerMove = function () {
mousemovef();
};
function vecToLocal(vector, mesh) {
var m = mesh.getWorldMatrix();
var v = BABYLON.Vector3.TransformCoordinates(vector, m);
return v;
}
scene.registerBeforeRender(function () {
var origin = box.position;
function predicate(mesh) {
if (mesh == box2 || mesh == box || mesh == box5) {
return false;
}
return true;
}
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
// ray.show(scene, new BABYLON.Color3(1, 1, 0.1));
var hit = scene.pickWithRay(ray, predicate);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
La ligne de code ci-dessus génère la sortie suivante -
Explication
Raycast avec la fonction de prédicat aide à choisir le maillage souhaité. Si nous ne voulons pas qu'un maillage soit choisi, nous pouvons l'ignorer.
function predicate(mesh) {
if (mesh == box2 || mesh == box || mesh == box5) {
return false;
}
return true;
}La fonction ci-dessus donne le maillage qui est sélectionné par le rayon. Si le maillage sélectionné est box2, box ou box5, il retournera false; sinon, c'est vrai.
Vous pouvez essayer l'exemple ci-dessus pour la même chose.
BabylonJS - Ombres en mailles
Les ombres sont rendues en fonction de la façon dont la lumière tombe sur le maillage créé. Ils jouent un rôle important pour rendre la sortie réaliste dans le monde 3D.
Apprenons maintenant à créer des ombres à l'aide de babylonjs.
Syntaxe
var shadowGenerator00 = new BABYLON.ShadowGenerator(shadowsize, light);Paramètres
Considérez les paramètres suivants liés aux ombres du maillage -
Shadowsize - Taille de l'ombre.
Light - Lumière utilisée dans la scène.
Démo
<!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(1, 1, 1);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
// light1
var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
light.position = new BABYLON.Vector3(20, 40, 20);
var ground01 = BABYLON.Mesh.CreateGround("Spotlight Hard Shadows", 24, 60, 1, scene, false);
var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("images/gr1.jpg", scene);
groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
groundMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
ground01.material = groundMaterial;
ground01.receiveShadows = true;
ground01.position.x = -5;
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position.x = -5;
box.position.y = 5;
var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);
shadowGenerator00.getShadowMap().renderList.push(box);
//shadowGenerator00.usePoissonSampling = true;
//shadowGenerator00.useExponentialShadowMap = true;
shadowGenerator00.useBlurExponentialShadowMap = true;
shadowGenerator00.bias = 0.01;
scene.registerBeforeRender(function() {
box.rotation.x += 0.01;
box.rotation.x += 0.01;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Production
La ligne de code ci-dessus génère la sortie suivante -
Explication
Pour créer des ombres, vous devez créer le générateur d'ombres. Prenons l'exemple ci-dessous.
var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);Pour définir le maillage pour lequel l'ombre est requise, vous devez ajouter le même au générateur ci-dessus.
shadowGenerator00.getShadowMap().renderList.push(box);Maintenant, nous avons créé un sol et une boîte au-dessus. Nous voulons que l'ombre de la boîte tombe sur le sol. Pour ce faire, nous devons nous assurer que le sol est marqué pour recevoir l'ombre, ce qui se fait comme suit -
ground01.receiveShadows = true;Il existe quelques filtres disponibles pour les ombres qui sont les suivants -
shadowGenerator.usePoissonSampling = true; - Called Poisson sampling
shadowGenerator.useExponentialShadowMap = true; - Exponential Shadow Map
shadowGenerator.useBlurExponentialShadowMap= true; - Blur Exponential Shadow MapDans notre démo, nous avons utilisé shadowGenerator00.useBlurExponentialShadowMap = true; Vous pouvez essayer les autres et voir à quoi ressemble la sortie.
Ici, nous avons utilisé l'image appelée gr1.jpg. Les images sont stockées localement dans le dossier images /. Vous pouvez télécharger n'importe quelle image de votre choix et l'utiliser dans le lien de démonstration.
BabylonJS - Textures avancées sur les mailles
Dans cette section, nous découvrirons les textures avancées sur les maillages. Les différentes textures sont présentées ci-dessous -
Texture de cube
Texture miroir et bosse
Texture vidéo
Appliquons une texture complexe au maillage - miroir, bosse, vidéo et réfraction.
| N ° Sr. | Maille et description |
|---|---|
| 1 | Couche MeshHightlight Le calque de surbrillance est utilisé pour mettre en évidence le maillage dans la scène. Vous pouvez lui donner de la couleur et la couleur est appliquée aux bordures du maillage. Dans le cas où dans un jeu vous voulez mettre en évidence, la couche de maillage de lumière peut être utilisée pour la même chose. |
| 2 | Morpher un maillage Le morphing change la forme d'un objet en un autre par un moyen de transition. Nous avons vu le paramètre modifiable pour les formes; sinon, le paramètre est défini sur false. Pour le morphing, il est défini sur true et le maillage est mis à jour pour changer la forme. |
| 3 | Actions à maillage Les actions sont utilisées pour ajouter une interaction au maillage. Les événements sont activés lorsque vous cliquez sur le maillage, ou lorsque le maillage se croise ou entre en collision. |
| 4 | Gestionnaire des ressources de maillage Avec la classe assestsmanager, vous pouvez charger des maillages, des images et des fichiers binaires dans la scène. |
| 5 | Importer un maillage En utilisant Import Mesh, nous allons apprendre. |
| 6 | Cibles de morphing de maillage Nous avons déjà vu le morphing des lignes, du ruban, du polygone, etc. Maintenant, nous allons voir le morphing de la sphère et de la boîte dans cette démo. |
| sept | Instances de maillage Si vous souhaitez dessiner des maillages identiques dans votre scène, utilisez les instances. |
| 8 | Mesh LOD et instances LOD signifie ligne de distance. Cette fonction vous permet de spécifier des maillages en fonction de la distance du spectateur. Au fur et à mesure que la distance entre le spectateur et l'objet augmente, le niveau de détail du maillage est clairement indiqué à l'aide de LOD. |
| 9 | Mesh VolumemetricLightScatteringPost-process Ce processus diffuse la lumière comme indiqué dans la sortie ci-dessous. Testez la même chose dans le navigateur et vous verrez comment la lumière se disperse à travers le maillage. |
| dix | Rendu des bords de maillage EdgesRendering est utilisé pour dessiner des egdes autour du maillage comme indiqué dans la sortie ci-dessus. |
| 11 | Mesh BlendModes Vous pouvez créer un mode de fusion en modifiant le mode alphanumérique des matériaux. |
| 12 | Mesh SolidParticles Le système SolidParticle est mis à jour sur un maillage. Toutes les propriétés que nous avons vues sur un maillage peuvent être utilisées sur le partilcle solide. |
| 13 | Facette de maillage Les données de facette prennent beaucoup de mémoire et cette fonctionnalité n'est pas activée par défaut. Pour l'activer, nous devons créer un maillage selon les besoins et y mettre à jour les données de facette. |