React-babylon teleportation

Questions
1

Hi,

How do I implement the teleportation and controller functionality in VR with react-babylon.

           <Engine
              antialias={true}
              adaptToDeviceRatio={true}
              canvasId="my-canvas"
            >
              <Scene id="my-scene">
                <arcRotateCamera
                  name="arc"
                  target={new Vector3(0, 1, 0)}
                  alpha={-Math.PI / 2}
                  beta={0.5 + Math.PI / 4}
                  radius={2}
                  minZ={0.001}
                  wheelPrecision={50}
                />

                <directionalLight
                  name="dl"
                  direction={new Vector3(0, -0.5, 0.5)}
                  position={new Vector3(0, 2, 0.5)}
                />

                <icoSphere
                  name="counterClockwise"
                  position={new Vector3(-0.5, 1, 0)}
                  radius={0.2}
                  flat={true}
                  subdivisions={1}
                >
                  <standardMaterial
                    diffuseColor={Color3.Yellow()}
                    specularColor={Color3.Black()}
                  />
                </icoSphere>

                <icoSphere
                  name="clockwise"
                  position={new Vector3(0.5, 1, 0)}
                  radius={0.2}
                  flat={true}
                  subdivisions={1}
                >
                  <standardMaterial
                    diffuseColor={Color3.FromInts(255, 165, 0)}
                    specularColor={Color3.Black()}
                  />
                </icoSphere>

                <ground
                  name="ground"
                  width={50}
                  height={50}
                  subdivisions={8}
                >
                  <standardMaterial
                    diffuseColor={Color3.FromInts(255, 165, 0)}
                    specularColor={Color3.Black()}
                  />
                </ground>

                <vrExperienceHelper
                  webVROptions={{ createDeviceOrientationCamera: false }}
                  teleportEnvironmentGround={true}
                  enableTeleportation={{ floorMeshName: "ground" }}
                  enableInteractions={true}
                />
              </Scene>
            </Engine>
1 Like
2

Pinging @brianzinn who is the master of react-babylon.

3

Good question! What you have there ought to work as-is. Unfortunately enableTeleportation is not being picked up. I will need to update the code generation - some methods aren’t handled by the renderer - currently it’s done explicitly by a pattern. I’ll put out a new version tonight after work :slight_smile:

1 Like
4

Wow, thank you so much. I was sure it was my limited experience. I love your react-babylon.
I intend to use it quite extensively so unfortunately I will continue to bother you.

5

please try the latest NPM 2.2.9 - i added enableTeleportation support, but did not have time to test it out… let me know how it goes :slight_smile:

6

Hi Brian,

I tested NPM 2.2.9 the controller ray is visible, I can use the controller to rotate around. Teleportation, front and back seems not to work. I will play more with the code and let you know.
Thank’s for the effort.

1 Like
7

I recall the back and front small movement being done on the thumb controller, but will depend on your device. Does this mean teleportation is working otherwise on the ground? Keep bothering us - that’s how we make it easier for the next person :slight_smile:

8

No the teleportation is not working only 360 rotate. I am trying to record the VR session and send it to you. It looks like I can only save videos only to my Facebook account (I have Oculus Rift) and I am not used with Facebook, in fact it will be my first post Facebook ever. I will try to record and send you the video link hope this works, it may take me some time.

9

OK, I was not successful recording the VR session. Oculus is aborting when I enter VR from the browser. I tried Nvidia capture screen but in the browser you can’t see the VR experience.
I have an Oculus Rift and the movement is done with the thumb controller. Left right is rotate in increments 30 degree maybe, front & back short is front and back step increments. Controller Ray touching the ground is teleportation to the location of the Ground, Ray intersection.

What is working: Ray is on, left and right will rotate camera left and right by 30 degree maybe.

10

let me dig out my vr headset and give it a try!