Has anyone here implemented a tank controller in threejs before? 
Specifically, I’m trying to understand how to properly create and animate tank tracks (treads) or how do you simulate track movement?
If you look through the showcase posts, there was a really nice tank simulator a month or 2 ago…
r.e. tank treads.. theres a lot of ways to implement it with varying levels of accuracy/complexity/cost. Easiest is to use UV animation to scroll a tread texture around the loop.. fast and cheap
Next hardest is probably to animate the treads using skinned meshes or morph targets, or, using the curve modifier to warp a bunch of tread pieces along a curve path.. fast, more expensive than UV animation but relatively cheap. three.js webgl - curve modifier
Hardest, is to simulate the treads as actual rigidbody spheres, chained together with constraints, which can look really good (you get sag and flapping, and potentially the ability to break them) but is very computationally expensive, and hard to get right.
Thanks for the detailed breakdown that’s really helpful. I’m currently going with UV srolling texture animation , because i think it will be more performance friendly as you explained , I was a bit confused earlier because there aren’t many clear tutorials on this topic, but this really helped, thanks again!
@manthrax i have tried this but this process seems so hard , in blender some object have more than one meshes and after joining them i was struggling to find the correct name .
3d Model is from sketchfab made by **MartusMartus7878
My question is can we build the tracks like “world of tank” game, i mean interact with the terrain or ground ?**
Github: GitHub - Aditya02git/UV_Scroll_Texture_Example · GitHub
Live:
here is the codepen:
That looks pretty good to me, no?
Thanks! I’m aiming to polish the movement and make the tracks feel more realistic.
A bit more realistic would be when the speed of wheel rotation, track texture offsetting and tank motion are consistent with each other. Without such consistency it looks like tank sliding and gear skipping.
Yeah , you are right , you need to just play with these values , untill it feels perfect to you .
const speed = 0.01;
const rotationSpeed = 0.003;
const scrollSpeed = 0.003;
const wheelSpeed = 0.01;
i have just decrease the speed and wheelSpeed , and now i think its good 
The tread rotation is a bit slow. You should be able to pick a point on the ground and the above point on the tread. If you have the speed right, there will be no movement between that point on the ground and the point on the tread.
Or you can work it out mathematically, which will be useful as speed changes. You simply determine the length (circumference) of the tread (e.g. meters). At a certain speed (e.g. meters per second), the rate of rotation (in seconds) should be the length divided by the speed.
This will be really cool if are able to get the tread to deform over obstacles. This will require getting the wheels to move up and down. I used to have an RC tank (about 1/16 scale) and that part was just fascinating. You may have to use Cannon to create an uneven surface.
Good catch — the tread speed is a bit off right now. I’ll correct it using the proper speed-to-rotation relation so it doesn’t slip against the ground.
And yeah, deforming the tread over obstacles would be awesome. I’m thinking of trying a multi-wheel suspension with raycasting to fake that effect.
Thanks for the insight! Oh, what model of RC tank did you have? Did you build it yourself or buy it? Asking because I have a great interest in mechanics. I remember back in my childhood, I used to take out motors from my RC toys and try to build a helicopter using cello tape, wires, a 2.5V battery, and a paper propeller. I also used to make the helicopter model with LEGO, and ended up getting scolded by my dad 
You can make the wheels go up and down mechanically.
You can model the tank in Blender and add animation which can be used in three.js. Or you can model the wheels in three.js using cylinder shapes and then animate them in three.js. But you have to know the height of the terrain under each wheel to do that.
One big challenge, of course, is that when the treads have to conform to the ground, more of the tread will be required on the bottom. IRL the idler wheels at the top would deflect downward to give the treads the extra tread they need. But since that is all hidden, you could probably get away with not modeling the idler wheels.
My model tank was a Jagdpanther. The treads were a single piece of rubber, but I believe it had the big interleaved wheels like a Panther which would have helped highlight the motion of the treads over the ground.
[EDITED[ The most amazing flying machine I ever saw was a super-lightweight little helicopter-type thing made of balsa wood and tissue paper. The prop (or props) rotated very slowly and it hovered for quite awhile in front of me. This may be what it looked like.
That’s a really good point about the tread deformation. Can I also raycast under each wheel and move the wheels vertically based on terrain height? That should fake the suspension pretty well without needing a fully simulated track system.
For the extra tread length on uneven ground, I was thinking of dynamically adjusting the upper track spline tension instead of simulating every tread segment physically. I wonder how games like World Of Tanks or War Thunder implemented this.
To create motion over rough terrain using the curved path approach that manthrax suggested, it would seem that you only have to worry about a handful of data points - the farthest point forward on the front idler wheel, the farthest point back on the back drive sprocket and the farthest point down on each of the road wheels.
The first two points should not change. As far as I know the road wheels only deflect vertically, so only the Y value of those wheels will change. The X-values of all the wheels should remain the same.
Because the top part of the tread is hidden, there is no need to populate that part of the path with tread segments. Instead, you can simply run a straight line from the top of the drive sprocket to the top of the idler wheel. When a tread segment reaches the top of the drive sprocket, you simply have it zip it forward to the top of the idler wheel. So you don’t need all the segments, only enough to populate the visible area.
I am guessing that you can use some kind of automated splining to curve the path for you. In that case, your data points would be the centers of the above wheels.
ADDITIONAL
I tried researching how War Thunder animates their tank treads and it sounds exactly like what manthrax recommended: a combination of 3D objects and splines.