Tesla cybertruck

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.

9 Likes

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;
    }
  }
}
5 Likes

hey that’s cool! Now I’m tempted to put together a post-apocalyptic city and have multiplayer cybertrucks driving around shooting eachother :rofl:

2 Likes

:fire: 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. :trophy: : )

:eagle:

1 Like

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 :smiley:

3 Likes

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

1 Like

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 :frowning:
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

1 Like

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 :slight_smile: you are setting a translationVector :wink:

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

1 Like

This looks good. I have merged car control in playground https://playground.babylonjs.com/#TZF2EZ#8

3 Likes

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?

2 Likes

I added the Cybertruck to my virtual world so you can drive it around.

5 Likes

Cybertruck complete with shattered windows!?!

Best Cybertruck award. :truck:

VideoWallz. Nice.

Look forward to see how you use them. :beers:

:eagle:

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 :red_car:.

See it in action : http://hiteshsahu.com/cybertruck

2 Likes

Crush traffic cones? You’re quick! I only heard about that earlier today :rofl: