Have problem to get the location in terms of mouse clicked on the height map

Questions
1

Hello everyone

I have an height map and I want to get the location of the map in terms of mouse clicked on the map.
and here is my code and my PG:
https://playground.babylonjs.com/#XB49NT#2

 engine.runRenderLoop(() => {
  const data = ground.getVerticesData(BABYLON.VertexBuffer.PositionKind);
  console.log("data",data); 
});

var avgX;
var avgY;
var avgZ;
var avg;

var vertexData2;
var vertexData3;
var colors;
var colors2;

var index0;
var index1;
var index2;
var selPos;
var selInd;
var selected;

var selectedMesh;
canvas.addEventListener("click", function (e) {
  var pickResult = scene.pick(scene.pointerX, scene.pointerY);
  if (pickResult.hit) {
    console.log("p", pickResult.hit);
    selectedMesh = pickResult.pickedMesh.getIndices();
    index0 = selectedMesh[pickResult.faceId * 3];
    index1 = selectedMesh[pickResult.faceId * 3 + 1];
    index2 = selectedMesh[pickResult.faceId * 3 + 2];
    // console.log(vertexData.positions[index1]);

    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data[i].length; j++) {
        x0 = data[i][3 * index0];
        y0 = data[i][3 * index0 + 1];
        z0 = data[i][3 * index0 + 2];

        x1 = data[i][3 * index1];
        y1 = data[i][3 * index1 + 1];
        z1 = data[i][3 * index1 + 2];

        x2 = data[i][3 * index2];
        y2 = data[i][3 * index2 + 1];
        z2 = data[i][3 * index2 + 2];
      }
    }

    var minX = Math.min(x0, x1, x2);
    var minY = Math.min(y0, y1, y2);
    var minZ = Math.min(z0, z1, z2);

    var maxX = Math.max(x0, x1, x2);
    var maxY = Math.max(y0, y1, y2);
    var maxZ = Math.max(z0, z1, z2);

    var minVec = new BABYLON.Vector3(minX, minY, minZ);
    var maxVec = new BABYLON.Vector3(maxX, maxY, maxZ);

    avgX = (x0 + x1 + x2) / 3;
    avgY = (y0 + y1 + y2) / 3;
    avgZ = (z0 + z1 + z2) / 3;

    avg = BABYLON.Vector3(avgX, avgY, avgZ);

    console.log("v1", x0, y0, z0);
    console.log("v2", x1, y1, z1);
    console.log("v3", x2, y2, z2);

    // console.log("avg", avgX, avgY, avgZ);

    selPos = [x0, y0, z0, x1, y1, z1, x2, y2, z2];
    selInd = [0, 1, 2];
    colors = [1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1];
    colors2 = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

    vertexData2 = new BABYLON.VertexData();

    vertexData2.positions = selPos;
    vertexData2.indices = selInd;
    vertexData2.colors = colors;

    vertexData2.applyToMesh(customMesh2);
    console.log("s", selectedMesh);

    var mat2 = new BABYLON.StandardMaterial("mat", scene);
    mat2.wireframe = true;
    customMesh2.material = mat2;
  } else {
    console.log("h", pickResult.hit);
    vertexData3 = new BABYLON.VertexData();

    vertexData3.positions = selPos;
    vertexData3.indices = selInd;
    vertexData3.colors = colors2;

    vertexData3.applyToMesh(customMesh3);
    console.log("s", selectedMesh);

    var mat3 = new BABYLON.StandardMaterial("mat", scene);
    mat3.wireframe = true;
    customMesh3.material = mat3;
  }
});
2

Is pickResult.pickedPoint not what you want?

If you want the 2D coordinates in the map texture, you can do something like:

const pickedPoint = pickResult.pickedPoint;
const tx = pickedPoint.x / 7120 + 0.5;
const ty = pickedPoint.z / 7120 + 0.5;

as your terrain is 7120x7120.

3

Hi @Evgeni_Popov
I want to get the actual 3D coordinate of the height map and other models on the scene and then set it to set target when I double click on an arbitrary point.

I have change my code to the following:

	scene.onPointerDown = function (evt, pickResult) {
    // if the click hits the ground object, we change the impact position

    const pickedPoint = pickResult.pickedPoint;
    const tx = pickedPoint.x 
    const ty = pickedPoint.z
    const tz = pickedPoint.y
    if (pickResult.hit) {
        camera.setTarget(BABYLON.Vector3(tx,ty,tz));
    }
};

BUT i got an error, which said getBundingInfo of undefined.

4

Please provide a PG with your changes as their is no getBoundingInfo call in your snipped.

pickResult.pickedPoint is the right value to use, but pickResult and/or pickedPoint could be null, so you should check for that.

5

sorry I forgot to put the PG: https://playground.babylonjs.com/#XB49NT#5

6

You forgot the new before new BABYLON.Vector3(tx,ty,tz).

But you can simply pass pickedPoint to setTarget.

1 Like
7

Thank you so much :pray: :pray: :pray:
sorry for my mistake.

1 Like