Hey, I’m stuck with this again with plotting the heatmap. So, I already asked this question previously here Previous Question
But, I’m trying to find out the generic solution so that whatever sphere points we create it should render the heatmap correctly at the sphere point location regardless the ground size. So, previously the guy suggested me a workaround trick to change the ground size and position. I’m using simpleheatmap.js to plot the heatmap.
So, here is my current playground where I’m testing - Heatmap
As we can see it plots the heatmaps at the top left corner, instead it should be plotted at the sphere points location. The heatmap is plotted only when I pass the x, and z coordinates divided by 10 otherwise it doesn’t plot. I don’t understand why it is happening.
What I’ve tried so far -
- Tried to convert the heatmap point to ground coordinates
var worldPoint = new Vector3(x, 0, z);
var localPoint = Vector3.TransformCoordinates(worldPoint, ground.getWorldMatrix());
but got the same points as I have.
- Tried to convert the sphere vector3 points to screen points but no luck as it changes as we drag/move
var boundingBox = sphere.getBoundingInfo().boundingBox;
// Get the center of the bounding box
var center = boundingBox.centerWorld;
var coordinates = Vector3.Project(center,
Matrix.Identity(),
scene.getTransformMatrix(),
camera.viewport.toGlobal(
engine.getRenderWidth(),
engine.getRenderHeight(),
)
);
- If you see, I’ve listened to the
scene.onPointerUpevent and tried to plot the point manually on the sphere point, if you uncomment and check it does but I didn’t understand cause the pickup points are different than the actual points
scene.onPointerUp = function(p,pick){
var pickResult = scene.pick(
scene.pointerX,
scene.pointerY
);
var { x, y } = pickResult.getTextureCoordinates();
console.log(x, y)
try {
const heatmapVal = randomIntFromInterval(1,100)
dataset.push([x, y, Math.round( heatmapVal / 10 )]);
const heat = simpleheat('babylonjs-container', textureContext).data(dataset).max(60);
heat.draw(0.5);
} catch (error) {
console.log('error', error)
}
};
- So, again what I thought is to manually fire the pointer-up event by passing the 2d points and listen to the event. But that also doesn’t work as the event is not dispatching. Not understand what I’m doing wrong.
var event = new PointerEvent('pointerup', {
pointerId: 1, // Use a unique pointer ID
pointerType: 'pointerup',
clientX: x, // Set the clientX position of the pointer
clientY: z, // Set the clientY position of the pointer
});
// Dispatch the event on the canvas element
canvas.dispatchEvent(event);
scene.onPointerObservable.notifyObservers(event);
I’ve been searching and reading a lot for 2 days but didn’t find anything which can help me to go ahead. Please correct me on what I’m doing wrong or what is the better way to plot the heatmap on sphere location.
