escalator in babylon js

[vikk]

 i start a two floor shoping mall in babylon js with the help of 3dmax . i use escalator to go second floor . then i want when my camera go near the escalator . we automatic go to second floor . how can i do this . 

[V!nc3r]

You want to teleport instantly or go up following escalator steps ?

To follow step animation, maybe a simple way would be to animate invisible planes set as colliders, sync to step anim. Or, depends of your escalator setup, directly set steps objects as colliders.

[brianzinn]

If you attach a mesh to your camera (parent) then when that mesh collides with the bottom of the escalator you can trigger an animation (code is untested):
 

var cameraStartPosition = new BABYLON.Vector3(cameraMesh.position.x, cameraMesh.position.y, cameraMesh.position.z)
var topOfEscalatorPosition = new BABYLON.Vector3(newPosition.x, newPosition.y, newPosition.z)

var keys = []
keys.push({
  frame: 0,
  value: cameraStartPosition
})
keys.push({
  frame: 30,
  value: topOfEscalatorPosition 
})

var cameraAnimation = new BABYLON.Animation('escalator-animation', 'position', 30,
            BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)

cameraAnimation.setKeys(keys)
camera.animations.push(cameraAnimation)

this.scene.beginAnimation(camera, 0, 30, false, 1, function() {
  console.log('top of escalator.  animation done.');
}

You can do tests on camera position to see if you should trigger the animation, but you could also test if a mesh parented to your camera collides with the bottom of the escalator by putting a mesh there or you can do a position test - something like:

const goUpEscalator = this.cameraMesh.intersectsMesh(bottomOfEscalatorMesh, false)

 

[vikk]

 var animateCameraPosition = function (camera, fromPosition, toPosition)
            {

                var animCamPosition = new BABYLON.Animation("animCam", "position", 15,BABYLON.Animation.ANIMATIONTYPE_VECTOR3,BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                                  
                var keysPosition = [];

                keysPosition.push({
                    frame: 0,
                    value: fromPosition
                });

                keysPosition.push({
                    frame: 100,
                    value: toPosition
                });

                animCamPosition.setKeys(keysPosition);
                camera.animations.push(animCamPosition);
                scene.beginAnimation(camera, 0, 100, false);
            };

document.getElementById("escalator").onclick = function () {
            
            animateCameraPosition(camera, camera.position,  new BABYLON.Vector3(894,850,3600))
        };

i do and its working. but i want to do when my camera go infront of escalator then its automatic up to the first floor

in my code its go through the on click of button

[Wingnut]

Hi guys.

I started a playground.  Got a ramp, got animation function, ready for intersectsMesh or onCollide or Ray testing, etc. 

I wanted to test further, but I have gotten interrupted.  Perhaps others will continue.

We need some way to "sense" when camera is near top of ramp, or near bottom of ramp (to trigger animations).  Cya in a little while.

[Wingnut]

Hi guys.  I had a little time today... to play with the escalator.  link

Still goofing around.  Can't fig WHY I have a "hi intersect" (see console) when RUN.  Camera.mesh is not intersecting ramp, so checkStuff() should report no intersect at RUN.  Currently, camera.applyGravity is active.  Turn-off to fly camera/camera.mesh freely.

Hi intersect... ramp turns blue (2nd-floor color).  Lo intersect, ramp turns green (ground color).  No intersect, ramp goes/stays white.  Cursor "forward" to ramp... it will turn green... lo intersect.  But still, why hi intersect at RUN time?  Perhaps because... for a lightning-fast moment, camera.mesh is at 0,0,0 when first created?  Maybe.  Still testing.

Caution:  Camera.mesh bounding boxes may appear larger than they actually are.  heh.  (Pan-around camera with mouse, to see camera.mesh bounding box wires.  Also notice that I am using camera.mesh for both intersect testing (a HAVE-TO)... and in the animator (lines 54 and 55).  No animations on the camera itself.  The continuous-running line 85... keeps the camera WITH the camera.mesh, position-wise.

There's got to be a better way to make an escalator.    I feel like I'm using a cruise ship... to travel to my local grocery store.  heh

It's that spongy-sphere issue that I am also working-on... in that other thread.  It has my brain all messed-up, I suspect.    (What's new, eh?)

I'm on break, but others... feel free to "run with it".  thx.

[Wingnut]

More "Vikk's Escalator" fun...

https://www.babylonjs-playground.com/#1OTXWR#16

No mesh needed on camera (instead, using a collider on cam).  I have a highSensor and lowSensor on the ramp.

It seems that these sensors work best... when you keep your head up.    Don't look down at the sensors.

Still playing, but, this works sort-of ok.  Vikk may already have a working escalator, but I wanted to do more experiments.

Use arrow keys to drive cam into low sensor... ramp will turn green, and up the ramp you go... slowly. 

Nav-around on the 2nd floor, then drive into the highSensor (with your head held high).  The ramp will turn blue, and down you go.

Exciting!    Panning-around while riding escalator... works fine.  RenderLoop-called checkStuff() does the work.  Func onDone() is called when animation ends.

As we can see by the PG code-litter, a few other methods were tried.  This one works best, so far.  Sensors can be made invisible.

Wingnut mistakes likely.  Comments and ideas, other methods, and complete re-writes... welcome.

[Dad72]

var animateCameraPosition = new BABYLON.Animation("animCam", "position", 15, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                                  
                var keysPosition = [];

                keysPosition.push({
                    frame: 0,
                    value: fromPosition
                });

                keysPosition.push({
                    frame: 100,
                    value: toPosition
                });

                animCamPosition.setKeys(keysPosition);
                camera.animations.push(animCamPosition);
                scene.beginAnimation(camera, 0, 100, false);
            };

// automatic
if(cameraOrPlayer.intersectsMesh(bottomOfEscalatorMesh, false))
{   
            animateCameraPosition(camera, camera.position, new BABYLON.Vector3(894, 850, 3600)) 
}

 

[Wingnut]

Hi D, thx for input. 

What is cameraOrPlayer? 

It HAS TO BE a mesh, or else intersectsMesh won't work.  IntersectsMesh doesn't work with ONLY a camera.  The camera needs to have a mesh attached, somehow.

I did some experiments with that method... in earlier versions.  I created a box in camera.mesh.

https://www.babylonjs-playground.com/#1OTXWR#9  See lines 87 and 94. Turn camera to see bounding box of camera.mesh.

Look at console when clicking RUN.  We get a "high intersection" when scene is first RUNned.  Not sure why.  Likely Wingnut mistake. 

That is the reason I abandoned intersectsMesh method. 

I think it is a VERY FAST momentary intersect, because we don't see ramp change color (line 88).  I think it is an intersect that lasts only one frame.  Perhaps wait for .executeWhenReady... and THEN install checkStuff() in renderLoop.  That might fix it.

[Dad72]

I took the examples above. So the camera on intersectMesh. But the best is the player on intersectMesh. So I made a variable cameraOrPlayer