babylon-steering
Version:
Steering behaviours library for Babylon.js
326 lines (276 loc) • 13.8 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js Steering behaviours</title>
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="./index.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<!-- Sidebar -->
<aside>
<h3>Examples</h3>
<ul>
<li><a href="index.html">Seek, Flee, Avoid</a></li>
<li><a href="two.html">Pursue, Evade</a></li>
<li><a href="">Interpose, Hide</a></li>
<li><a href="">Follow path</a></li>
<li><a href="">Wander</a></li>
<li><a href="">Follow Leader</a></li>
<li><a href="">Queue</a></li>
<li><a href="">Flock</a></li>
</ul>
</aside>
<!-- Main -->
<main style="flex: 1">
<canvas id="renderCanvas"></canvas>
<div id="info">
Red sphere <span style="color:red"> SEEKS</span> green box avoiding white box.
<br>
Blue sphere <span style="color:rgb(78, 78, 243);">FLEES</span> red sphere avoiding white box.
<br>
Drag <span style="color:green;">green box</span> with the mouse.
</div>
</main>
</div>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = null;
var scene = null;
var createDefaultEngine = function () {
return new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true
});
};
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
scene.collisionsEnabled = true;
scene.clearColor = new BABYLON.Color3(0, 0, 0);
/* var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.setPosition(new BABYLON.Vector3(20, 500, 1000));
camera.lowerBetaLimit = 0.1;
camera.upperBetaLimit = (Math.PI / 2) * 0.99;
camera.lowerRadiusLimit = 150;
camera.applyGravity = true; */
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 1200, -100), scene);
camera.setTarget(BABYLON.Vector3.Zero());
/* camera.attachControl(canvas, true); */
// Light
// var light = new BABYLON.PointLight("omni", new BABYLON.Vector3(10, 100, 10), scene);
// light.intensity = 2;
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.25;
// Ground
var ground = BABYLON.Mesh.CreateGround("ground", 5000, 5000, 1, scene, false);
var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.specularColor = BABYLON.Color3.Black();
ground.material = groundMaterial;
ground.checkCollisions = true;
function createActor(color, scene) {
let sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 20, scene);
let targetBox = BABYLON.MeshBuilder.CreateBox("targetBox", {
height: 10,
width: 5,
depth: 10,
updatable: true,
sideOrientation: BABYLON.Mesh.DOUBLESIDE
});
targetBox.parent = sphere;
targetBox.position = new BABYLON.Vector3(0, 0, 10);
let redMat = new BABYLON.StandardMaterial("grodefaultund", scene);
redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.emissiveColor = color ? color : BABYLON.Color3.Red();
sphere.material = redMat;
targetBox.material = redMat;
sphere.position.y = 10;
sphere.position.x = Math.random() * 650;
sphere.position.z = Math.random() * 650;
sphere.checkCollisions = true;
targetBox.checkCollisions = true;
sphere.isPickable = true;
targetBox.isPickable = true;
var disc = BABYLON.MeshBuilder.CreateDisc("disc", { radius: 160, arc: 0.33, tessellation: 12, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);
var coneOfViewMat = new BABYLON.StandardMaterial("myMaterial", scene);
coneOfViewMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
coneOfViewMat.alpha = 0.35;
disc.parent = sphere;
disc.rotation.x = Math.PI / 2;
disc.rotation.y = -Math.PI / 6;
disc.isPickable = true;
disc.material = coneOfViewMat;
return sphere;
}
function createElement(color, dimension = 20, scene) {
var element = BABYLON.Mesh.CreateBox("element", dimension, scene);
var greenMat = new BABYLON.StandardMaterial("default", scene);
greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
greenMat.emissiveColor = color ? color : BABYLON.Color3.White();
element.material = greenMat;
element.position.x = Math.random() * 650;
element.position.z = Math.random() * 650;
element.position.y = dimension / 2;
element.checkCollisions = true;
return element;
}
var redSphere = createActor(BABYLON.Color3.Red(), scene);
// var yellowSphere = createActor(BABYLON.Color3.Yellow(), scene);
var blueSphere = createActor(BABYLON.Color3.Blue(), scene);
// let istances = [];
// for (var index = 0; index < 5; index++) {
// var newInstance = createActor(BABYLON.Color3.Green(), scene);
// // var newInstance = greenSphere.createInstance("i" + index);
// istances.push(new SteeringVehicle(newInstance, engine));
// }
var whiteBox = createElement(BABYLON.Color3.White(), 40, scene);
var greenBox = createElement(BABYLON.Color3.Green(), 20, scene);
/* camera.lockedTarget = greenBox; //version 2.5 onwards */
/* BABYLON.Tags.EnableFor(greenBox);
greenBox.addTags("target"); */
// Events
var canvas = engine.getRenderingCanvas();
var startingPoint;
var currentMesh;
// STEERING ACTORS
redSphere = new SteeringVehicle(redSphere, engine,{ maxSpeed: 0.5, mass: 1 });
// yellowSphere = new SteeringVehicle(yellowSphere, engine);
blueSphere = new SteeringVehicle(blueSphere, engine);
greenBox = new SteeringVehicle(greenBox, engine);
whiteBox = new SteeringVehicle(whiteBox, engine, {
mass: 10
});
var getGroundPosition = function () {
// Use a predicate to get position on the ground
var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
return mesh == ground;
});
if (pickinfo.hit) {
return pickinfo.pickedPoint;
}
return null;
}
var onPointerDown = function (evt) {
if (evt.button !== 0) {
let pos = getGroundPosition(evt);
pos.y = 10;
greenBox.waypoints.push(pos);
}
// check if we are under a mesh
var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
return mesh !== ground;
});
if (pickInfo.hit) {
currentMesh = pickInfo.pickedMesh;
startingPoint = getGroundPosition(evt);
if (startingPoint) { // we need to disconnect camera from canvas
setTimeout(function () {
camera.detachControl(canvas);
}, 0);
}
}
}
var onPointerUp = function () {
if (startingPoint) {
camera.attachControl(canvas, true);
startingPoint = null;
return;
}
}
var onPointerMove = function (evt) {
if (!startingPoint) {
return;
}
var current = getGroundPosition(evt);
if (!current) {
return;
}
var diff = current.subtract(startingPoint);
currentMesh.position.addInPlace(diff);
startingPoint = current;
}
canvas.addEventListener("pointerdown", onPointerDown, false);
canvas.addEventListener("pointerup", onPointerUp, false);
canvas.addEventListener("pointermove", onPointerMove, false);
scene.onDispose = function () {
canvas.removeEventListener("pointerdown", onPointerDown);
canvas.removeEventListener("pointerup", onPointerUp);
canvas.removeEventListener("pointermove", onPointerMove);
}
scene.executeWhenReady(function () {
engine.runRenderLoop(function () {
// yellowSphere.followActor(greenBox, 100) // ok
// yellowSphere.arrive(greenBox) // ok
// blueSphere.fleeActor(greenBox, 100); // ok
// redSphere.applyForce(new BABYLON.Vector3(1, 0, 0.5));
redSphere.seek(greenBox, 60)
console.log(blueSphere.canSee(redSphere));
// blueSphere.flee(redSphere, 160)
// redSphere.attract(yellowSphere, 150, 2.5);
// blueSphere.seek(greenBox)
// console.log(/* yellowSphere.inSight(redSphere), */yellowSphere.canSee(redSphere));
//if(yellowSphere.inSight(redSphere) && yellowSphere.canSee(redSphere)){
//yellowSphere.hide(redSphere, [greenBox, whiteBox]);
// console.log(yellowSphere.getAngle(redSphere, true));
// yellowSphere.calcAngle(yellowSphere, redSphere);
blueSphere.isInConeOfViewOf(redSphere);
//} else {
// yellowSphere.idle()
//}
// redSphere.pursue(greenBox)
// blueSphere.pursue(greenBox)
// blueSphere.evade(redSphere)
// yellowSphere.interpose(redSphere, blueSphere);
// greenBox.followPath(greenBox.waypoints, true, 100); // ok
// whiteBox.separation(istances);
// blueSphere.avoid([whiteBox])
redSphere.avoid([whiteBox])
// yellowSphere.avoid([whiteBox, greenBox])
// si guarda la direzione della sola sfera rossa
// var forward = new BABYLON.Vector3(0, 0, 1);
// var direction = redSphere.mesh.getDirection(forward).normalize();
// console.log(direction);
redSphere.lookWhereGoing(true);
//yellowSphere.lookWhereGoing(true);
// yellowSphere.lookTarget(redSphere)
blueSphere.lookWhereGoing(true);
redSphere.update();
blueSphere.update();
// yellowSphere.update();
greenBox.update();
whiteBox.update();
// istances.forEach(e => {
// e.wander();
// // e.followLeader(greenBox, istances)
// // e.flock(istances)
// // e.queue(istances);
// e.avoid([whiteBox])
// e.lookWhereGoing(true);
// e.update();
// });
scene.render();
});
});
return scene;
};
engine = createDefaultEngine();
if (!engine) throw 'engine should not be null.';
scene = createScene();
engine.runRenderLoop(function () {
if (scene) {
scene.render();
}
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>