Check it out! https://punkoffice.com/cybertruck
Feel free to use the code and GLB file.
I might stick this one in my virtual world.
Check it out! https://punkoffice.com/cybertruck
Feel free to use the code and GLB file.
I might stick this one in my virtual world.
Put this in the console to make the car driveable:
{
var camera = scene.activeCamera;
var carMesh = new BABYLON.AbstractMesh('Cybertruck', scene);
for(var i=0; i<scene.meshes.length; i++){
let mesh = scene.meshes[i];
if(mesh.id.startsWith('Cybertruck_primitive')){
mesh.setParent(carMesh);
}
}
camera.parent = carMesh;
var actions = {
forward: false,
backward: false,
brake: false,
steerLeft: false,
steerRight: false
};
var car = {
velocity: 0,
acceleration: 0.01,
deceleration: 0.01,
maxSpeed: 1,
agility: 0.01
};
var worldProperties = {
friction: 0.001
};
scene.onBeforeRenderObservable.add(function(){
if(actions.forward){
car.velocity += car.acceleration;
}
if(actions.backward){
car.velocity -= car.acceleration;
}
if(actions.brake){
car.velocity -= car.deceleration * getMoveDirection();
}
car.velocity -= worldProperties.friction * getMoveDirection();
var speed = Math.abs(car.velocity);
if(speed > car.maxSpeed){
car.velocity = car.maxSpeed * getMoveDirection();
speed = car.maxSpeed;
}
var rotate = car.agility * (speed / car.maxSpeed) * Math.PI * 2;
if(actions.steerLeft){
carMesh.rotation.y -= rotate * getMoveDirection();
}
if(actions.steerRight){
carMesh.rotation.y += rotate * getMoveDirection();
}
carMesh.position.addInPlace(carMesh.right.scale(car.velocity));
});
scene.onKeyboardObservable.add(function(kbInfo){
switch (kbInfo.type) {
case BABYLON.KeyboardEventTypes.KEYDOWN:
handleKeyDown(kbInfo.event.keyCode, true);
break;
case BABYLON.KeyboardEventTypes.KEYUP:
handleKeyDown(kbInfo.event.keyCode, false);
break;
}
});
function getMoveDirection(){
return car.velocity === 0 ? 0 : (car.velocity / Math.abs(car.velocity));
}
function handleKeyDown(keyCode, bool){
switch(keyCode){
case 87: // w
case 38: // arrow up
case 90: // z
actions.forward = bool;
break;
case 83: // s
case 40: // arrow down
actions.backward = bool;
break;
case 32: // spacebar
actions.brake = bool;
break;
case 65: // a
case 37: // arrow left
case 81: // q
actions.steerLeft = bool;
break;
case 68: // d
case 39: // arrow right
actions.steerRight = bool;
break;
}
}
}
hey that’s cool! Now I’m tempted to put together a post-apocalyptic city and have multiplayer cybertrucks driving around shooting eachother
do it!!!
EXCELLENT music loop. PBR and ParticleSystems too?
Even the font is radical.
Anyone call Elon?!?
Hey, @ozRocker, got some LazerShow code… @Pryme8 was talking about LazerShader.
He just got done with some volumetric fog? It would go good around that truck, with those lights!
3DCOMPOSEIT
Easy - Lazers out of the headlights/brakes. Got that logic. OR weapon rise up from MOONROOF (hard). : ) Success: with mesh door (recently).
About the MOON. Have you seen this?
~ @PatrickRyan.
Please. Cybertruck on Moon.
Bestever.
CyberTruck on Moon, BUT no Icosahedron gravity? @JohnK solves it over holidays, I bet.
DownRaySystem - new “plate” rotate. BUT Quaternion rotation of Heavenly Body. TOUGH! Settled with Cuboid. Wouldn’t work for CYBERTRUCK. Last and least → got a Purple Nebula AND a SpaceBox if any1 wants to 3D~COLLAGE it. [then call Elon]. Go BABYLON!
AWARD: COOLEST~YET. : )
You’re a mind-reader @aFalcon! I did want to add fog and laser lights but I couldn’t figure out how to do it in the 2 days I gave myself for this side-project.
I would also prefer for the controls to move the ground around but have the camera and particle emitters stay in place. Not so easy to spin the mesh around with inertia (unless there’s some new BABYLONJS command I don’t know of).
I posted this on Elon’s Twitter feed. Hopefully he sees it and likes it so much he gives me a Cybertruck
I feel like there is something wrong with the particles… @PatrickRyan mentioned that to me and yeah this is weird. Particles are either moving away from the car or are covering it based on where you are:
Do you mind reproducing the particles setup on the PG? I feel like there is a bug here
Here is the playground: https://playground.babylonjs.com/#TZF2EZ#3
I’d prefer if the particle emitters stayed in place and only the ground and car spins around. I couldn’t figure out how to do that though.
Unfortunately does not work because of CORs
https://playground.babylonjs.com/#TZF2EZ#4
That’s weird. It works fine for me. CORS is enabled. I have .htaccess in place
Ok it works now and I confirm there is a bug in particles placement
Investigating…
https://playground.babylonjs.com/#TZF2EZ#6
I see what you mean. Particles are always going left regardless if you view from front or back
Ok gotcha! this is not a bug you are setting a translationVector
This was weird because I was not expecting it (it was set to 0, 0.5 so scaling was not centered anymore hence the scaling always going left from the camera standpoint. It was like moving the render transform origin from 0.5 0.5 to 0 0.5 in css)
Same without it: https://playground.babylonjs.com/#TZF2EZ#7
Mystery solved! Thanks for your help
This looks good. I have merged car control in playground https://playground.babylonjs.com/#TZF2EZ#8
It will be cool to put it in cyber landscape instead like this one : CyberPunk
That looks awesome! I’m not that artistic to be able to create something like that. Very good @HiteshSahu
This come with the smashed window?
I added the Cybertruck to my virtual world so you can drive it around.
Cybertruck complete with shattered windows!?!
Best Cybertruck award.
VideoWallz. Nice.
Look forward to see how you use them.
I used a different model of Tesla Cybertruck and created a BabylonJS experiment inspired by this.
You can break Cybertruck’s windows, crush traffic cones, do stunt jumps, switch lights, paint color .
See it in action : http://hiteshsahu.com/cybertruck
Crush traffic cones? You’re quick! I only heard about that earlier today