https://github.com/hamza-rafique/heatmap-threejs

using reactjs threejs created heatmap and loading glt 3d
https://github.com/hamza-rafique/heatmap-threejs

heatmap heatmap-visualization heatmap-with-threejs-reactjs reactjs threejs-example threejs-learning

Last synced: 12 months ago
JSON representation

using reactjs threejs created heatmap and loading glt 3d

• Host: GitHub
• URL: https://github.com/hamza-rafique/heatmap-threejs
• Owner: Hamza-Rafique
• Created: 2024-09-07T15:15:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-16T12:07:36.000Z (over 1 year ago)
• Last Synced: 2025-01-08T02:16:58.471Z (about 1 year ago)
• Topics: heatmap, heatmap-visualization, heatmap-with-threejs-reactjs, reactjs, threejs-example, threejs-learning
• Language: JavaScript
• Homepage:
• Size: 23.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

U will be given GLB file and base on Gaze Data from Game engine, it needs to output a heatmap like this attached image

**Another example**

![image](https://github.com/user-attachments/assets/1666e7d6-966b-4d1f-b2ff-123334272d07)

https://community.cesium.com/t/applying-colored-heatmaps-to-buildings-as-3d-tiles/9688

---

- use React and ThreeJS can use BabylonJS if u want.

- Implement heatmap on GLB file from data given

- Should not be tide to one GLB, so logic should be any GLB and the data from that scene

It should feel and look like provided screenshot

POSX and POZ is cords which u need to use

This GLB has a region of 

```python

"regions" : [

        {

            "name" : "Tracker",

            "minX" : "-108.8917",

            "maxX" : "84.31494",

            "minZ" : "-36.81385",

            "maxZ" : "127.0695"

        }

    ]

```

in provided screenshot u can see 2D map with same positions