Need some hep for Three.js and WebGL project (Ray-cast or Physics engine Stuff)


Hello, guys!
I need some help for WebGL-based project.
I am working on my final project of Immersive Environment class using Three.js.
My final goal is making a journey inside human body with third person perspective.
What I done now is making and rigging and animating my character and some other parts of background and also I put them together in the below codes.

However, !!! I am completely stuck with making my model to walk around the slope or undulating surface !!!
my model can walk around flat surface BUT not undulating surface.

I searched a lot and found some example which is applicable for my project.
like ( )
and I figured out they applied some ray-casting function or physics engine like ‘cannon.js’ or ‘ammo.js’ on them.

I will do more trials to solve this problem,
but if you know how can solve this problem, please help me.

Here is my demonstration.

(Sometimes, It works bad at Chrome, but I tested it with Firefox and it works well in Firefox!)

Here is a my code

Thanks for reading!


Hey there, I know we talked about this in class – if you can post your resolution it would be really helpful!


Thanks Christopher

There are several solution to enable the mesh character to walk following a slope of map or geometry.
(I tried three ways and was able to apply only first one and third one)

First one is using ray-casting which can figure out the angle and position of surface of geometric object
like ( ).

Second one is using physics engine for three.js such as ‘ammo.js’ or ‘cannon.js’
like ( )

Third one is just using meshwalk.js, which is the simplest and easist way for third person character control (What I finally applied for my project).

This is my latest version of my project (working still in progress…)

(I will put footstep sound and a model of digestive organs and also enable this project to be touch-based control in order to perform in mobile device and tablet.)