Move on ground With the help of cursor

Questions
1

Hi,
I am in need of a similar experience like this Multilevel Full Rehab - framing stage - 42 Summer Street - Matterport 3D Showcase
While hover the mouse on a ground mesh, there should be an image kind of marker. When I click on the ground, the camera should move to that place. Please have a look into the shared link.

Thanks,
Jaya kannan K R.

2

This sounds extremely similar to the VR teleportation feature @RaananW ?

1 Like
3

This is probably very close to the hotspot teleportation implementation. You will need to change the cursor yourself, and will need to add images (or a marker) to the spots, but other than that this is implemented (when in VR):

2 Likes
4

First of all thanks for your replies @sebavan @RaananW . @sebavan You are right, this is similar to the teleportation in VR. I need the same in WebGL too. @RaananW I am not sure about your suggestion on it. I am sharing another sample of it which is a webgl sample contains the same operation.

Just go through it and click “ENTER THE SHOWROOM” button and move the cursor on the floor, you will see the operation.

Thanks,
Jaya Kannan K R.

5

This is something you will be able to implement on your own. The pointer selection feature allows you to know when the pointer collides with any mesh that is pickable. When when the pointer selection points at a specific mesh, you will want to set a different behavior. One of the behaviors is - when the p[ointer select is selecting the ground mesh, show a pointer mesh in the point defined in the picking info

6

Done.
I have shared my script below

let mouse_on_ground = false;
    let canvas = document.getElementById("renderCanvas");
    let engine = new BABYLON.Engine(canvas, true, {
      preserveDrawingBuffer: true,
      stencil: true,
      disableWebGL2Support: false,
    });
    engine.setHardwareScalingLevel(0.5);
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera(
      "camera",
      Math.PI / 2,
      Math.PI / 2.5,
      3,
      new BABYLON.Vector3(0, 0, 4),
      scene
    );
    scene.shadowsEnabled = true;
    camera.wheelPrecision = 20;
    camera.position = new BABYLON.Vector3(30,1,0);
    camera.fov = 0.5;
    camera.inertia = 0.8;
    camera.target = new BABYLON.Vector3(0,0,0);
    camera.attachControl(canvas, true);

    //   const light = new BABYLON.HemisphericLight(
    //     "light",
    //     new BABYLON.Vector3(0, 1, 0),
    //     scene
    //   );
    let json_data;
    let material_data;

    var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData(
      "assets/textures/sample.env",
      scene
    );
    scene.environmentTexture = hdrTexture;
    scene.environmentIntensity = 0.4;
    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 40, height: 10 });
    let material_gnd = new BABYLON.PBRMaterial("ground_material", scene);

    const cursor_part = BABYLON.MeshBuilder.CreateGround("cursor_part", { width: 2, height: 2 });
    const cursor_part_material = new BABYLON.PBRMaterial("cursor_part_material", scene);
    cursor_part_material.unlit = true;
    cursor_part_material.albedoColor = new BABYLON.Color3(1, 0, 0);
    cursor_part_material.backFaceCulling = false;
    cursor_part_material.albedoTexture = new BABYLON.Texture(
      "./assets/textures/ring.webp",
      scene
    );
    cursor_part_material.albedoTexture.uScale = 1;
    cursor_part_material.albedoTexture.vScale = -1;
    cursor_part_material.opacityTexture = new BABYLON.Texture(
      "./assets/textures/ring.webp",
      scene
    );
    cursor_part_material.opacityTexture.uScale = 1;
    cursor_part_material.opacityTexture.vScale = -1;

    cursor_part.material = cursor_part_material;

    ground.material = material_gnd;
    ground.position.y -= 2;
    //   scene.createDefaultSkybox(hdrTexture, true, 10000);
    $.getJSON("assets/json/materials.json", function (json) {
      let json_data = json;
      material_data = json_data.Materials;
      start();
    });

    var defaultPipeline = new BABYLON.DefaultRenderingPipeline(
      "default",
      true,
      scene,
      [camera]
    );
    defaultPipeline.fxaaEnabled = true;

    function start() {
      let ground_plane = scene.getMeshByName("ground");
      interfacing_action_manager = new BABYLON.ActionManager(scene);
      interfacing_action_manager.registerAction(
        new BABYLON.ExecuteCodeAction(
          BABYLON.ActionManager.OnPointerOverTrigger,
          function (ev) {
            let mesh_under_cursor = ev.meshUnderPointer.name;
            mouse_on_ground = true;
          }
        )
      );
      interfacing_action_manager.registerAction(
        new BABYLON.ExecuteCodeAction(
          BABYLON.ActionManager.OnPointerOutTrigger,
          function (ev) {
            mouse_on_ground = false;
          }
        )
      );
      ground_plane.actionManager = interfacing_action_manager;

    }

    scene.onPointerMove = function (event, pickResult) {
      if (mouse_on_ground) {
        cursor_part.position = new BABYLON.Vector3(pickResult.pickedPoint.x, pickResult.pickedPoint.y + 0.1, pickResult.pickedPoint.z);
        
      }
    }
    scene.onPointerDown = function (event, pickResult) {
      if (mouse_on_ground) {
        let camPosTo = new BABYLON.Vector3(pickResult.pickedPoint.x, pickResult.pickedPoint.y + 1, pickResult.pickedPoint.z);
        camera.position = camPosTo;
        camera.target = new BABYLON.Vector3(pickResult.pickedPoint.x,pickResult.pickedPoint.y + 1,pickResult.pickedPoint.z+1)
      }
    }


    engine.runRenderLoop(function () {
      if (scene && scene.activeCamera) {
        scene.render();
      }
    });
    window.addEventListener("resize", function () {
      engine.resize();
    });
2 Likes