I am getting started with Babylon.js and am getting stuck. I have this code to create boxes and add cylinders to them. When clicked, bullets fire out from the cylinder.
I've added a playground link here: https://playground.babylonjs.com/#ELP0A5#2
I'm placing the turrets on the field and attempting to rotate them all to face each other. With my code today, the first and final turret are place perfectly.
However, I cannot get the middle two turrets to face the right direction. I feel I need to flip the starting X for turret 1 and both the x and Y for turret two, but the syntax is alluding me!
Can anyone help me aim my little boxes?
var canvas = document.getElementById('renderCanvas');
canvas.width = 800; // Set the width of the canvas
canvas.height = 600; // Set the height of the canvas
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.enablePhysics();
// Create camera
var camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 4, 5, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
console.log("Adding a big light!");
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);
console.log("Adding a light!");
// Create turrets old
// var turretColors = [new BABYLON.Color3(1, 0, 0), new BABYLON.Color3(0, 1, 0), new BABYLON.Color3(0, 0, 1), new BABYLON.Color3(1, 1, 0), new BABYLON.Color3(1, 0, 1), new BABYLON.Color3(0, 1, 1)]; var turrets = [];
// Create turrets
var turretColors = [
new BABYLON.Color3(1, 0, 0),
new BABYLON.Color3(0, 1, 0),
new BABYLON.Color3(0, 0, 1),
new BABYLON.Color3(1, 1, 0)
];
var turrets = [];
for (var i = 0; i < 4; i++) {
var turret = BABYLON.MeshBuilder.CreateBox('turret' + i, { size: 0.5 }, scene);
turret.position.x = (i % 2 === 0) ? -2 : 2;
turret.position.z = (i < 2) ? -2 : 2;
turret.material = new BABYLON.StandardMaterial('turretMat' + i, scene);
turret.id = "turret" + i;
console.log("creating turret of " + turretColors[i] + " color");
// Set bright colors for turrets
turret.material.diffuseColor = turretColors[i];
// Set the initial rotation angles to make turrets face each other
turret.rotation.y = (i % 2 === 0) ? Math.PI : 0;
var cylinder = BABYLON.MeshBuilder.CreateCylinder('cylinder' + i, { height: 0.8, diameter: 0.2 }, scene);
cylinder.material = new BABYLON.StandardMaterial('cylinderMat' + i, scene);
cylinder.material.diffuseColor = new BABYLON.Color3(0, 1, 1); // Set the color of the cylinder
// Position the cylinder perpendicular to the box and aligned with the direction of the box
cylinder.position.y = 0.25; // Adjust the position along the local Y-axis
cylinder.position.z = 0.25; // Adjust the position along the local Y-axis
cylinder.rotation.x = Math.PI / 2; // Align with the direction of the box
cylinder.parent = turret; // Make the cylinder a child of the box
// if (i === 1 || i === 2) {
// turret.rotation.y += Math.PI * .5;
// }
if (i===2){
turret.rotation.y -= Math.PI;
}
if (i === 3) {
// Flip direction on both axes for turret 3
turret.rotation.x = Math.PI;
turret.rotation.z = Math.PI;
}
// Add oscillation animation
var oscillationAnimation = new BABYLON.Animation('oscillationAnimation', 'rotation.y', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var oscillationKeys = [];
oscillationKeys.push({ frame: 0, value: 0 });
oscillationKeys.push({ frame: 15, value: Math.PI / 2 });
oscillationKeys.push({ frame: 30, value: 0 });
oscillationAnimation.setKeys(oscillationKeys);
turret.animations = [oscillationAnimation];
scene.beginAnimation(turret, 0, 30, true);
turrets.push(turret);
}
