Drawing a heatmap over the surface of a loaded 3d object

1,200 views
Skip to first unread message

Blade Trick

unread,
Mar 16, 2018, 10:41:09 AM3/16/18
to WebGL Dev List
Hello!

This is my first post to a google group.  I hope I'm okay asking some question here.

The gist:
I have this project I'm working on where I load up a mesh using THREE.JSONLoader, throw some lights on it and generate a set of 200 random points using THREE.GeometryUtils.randomPointsInGeometry(model.geometry, 200);
I'd like to be able to use those random points to generate a heat map over a the model.

There's a small javascript library called simpleheat that has the basics of how I'd like it to look.  The demo on that site allows you to mouse draw over a 2D surface.  The more points drawn in an area, the more "heat" shows up on screen.  Like so:


So while cruising the internet, I ran across a post in this group:  Techniques for drawing lines, with mouse, on 3D objects in WebGL or OpenGL? by Lindsay Kay and a response by Leo Armour that looked like a promising start.
and from that, a webpage called Skull Paint.

The rub:
I can represent the random data points as circles on the 3D object, but they render perpendicular to the object.   



I'm not sure how to get the circles to appear to lay flat (or mold) over the surface. 
I think if I can get that part of it, my battle would be mostly won.

Any thoughts or ideas are appreciated!
My thanks,
Carlos
Reply all
Reply to author
Forward
0 new messages