But as you can imagine, I want my car to drive only in specific area, so it doesn’t go out of the scene.
The issue is, I don’t know how to do it properly. I have tried it with “if” statements, checking if car has reached a certain position and then animating it again, but that logic doesn’t seem to work well, I wonder maybe it is possible to somehow set boundaries or something?
My ultimate goal would be to see car going:
Straight until water
Then it turns 180 degrees (I will just rotate all wheels and car frame itself)
Thanks for the idea, I have never used vectors before, so this is a bit new for me. But I suppose for this to work, I would have to apply this function to my whole 5 elements (4 wheels and car body) or somehow stitch them all together to one piece? I have tried this one one of my cars wheels, it goes, but not quite in to the direction I want it to, rather than forward.
var lim = 5;
var clock = new THREE.Clock();
var speed = 1;
var dir = new THREE.Vector3(4, 0, 0).normalize();
var pos = new THREE.Vector3();
var lookAt = new THREE.Vector3();
renderer.setAnimationLoop(() => {
pos.copy(wheel_front_right.position).addScaledVector(dir, speed * clock.getDelta());
if (Math.abs(pos.length()) >= lim) {
var posDif = Math.abs(pos.length()) - lim;
dir.negate();
pos.addScaledVector(dir, posDif);
}
wheel_front_right.position.copy(pos);
lookAt.copy(pos).add(dir);
wheel_front_right.lookAt(lookAt);
renderer.render(scene, camera);
})
I set X axis here var dir = new THREE.Vector3(4, 0, 0).normalize(); (I suppose that’s where you set the movement) but like mentioned, it got rotated weirdly.
I managed to integrate slider values to the speed inside this movement function, so now I can adjust it, which is good.
I just need to figure out that thing with rotation of wheels and then I would somehow make it work.
My car is constructed of 5 sperate objects, car frame and 4 separate wheels (all with animations set seperatly) so I’m not quite sure how I should apply that movement to my whole car, since if I will apply it to the car frame, it would work I guess, but the wheels will not go back together with frame and carry on driving off the scene. Maybe I’m just not grasping the whole concept yet, I would be pleased if you could explain.
They should work with any generic car model (4 wheels and a body, optional steering wheel). You can also take a look at how the camera follows the car (click “follow camera”), and how the car and camera jump back to the center of the map when it drives too far.
Alright, so I have used a group and combined my car with my wheels. Now I have added whole car to your given algorithm, which is good already, but I still have a few issues (pardon me if I’m too rookie to fully understand that algorithm, doing my best at learning three.js).
My car moves sideways as opposed to moving forward, any ideas how I can change direction? (it is vectors’ direction as I understand).
Wheels do not spin. I saw you have added wheels to your fiddle with arrays and functions but that’s a bit out league for me just for now, would there be any “amateur” way to make them spin? I tried adding wheel_front_right.rotation.z = some value for testing in the whole car moving function, but that doesn’t seem to work.
My current setup looks like this:
//movement
var lim = 20;
var clock = new THREE.Clock();
var dir = new THREE.Vector3(0, 0, 250).normalize();
var pos = new THREE.Vector3();
var lookAt = new THREE.Vector3();
renderer.setAnimationLoop(() => {
pos.copy(car_frame.position).addScaledVector(dir, controlBoxParams.carSpeed * clock.getDelta());
if (Math.abs(pos.length()) >= lim) {
var posDif = Math.abs(pos.length()) - lim;
dir.negate();
pos.addScaledVector(dir, posDif);
}
car_frame.position.copy(pos);
lookAt.copy(pos).add(dir);
car_frame.lookAt(lookAt);
renderer.render(scene, camera);
})
I’ve forked the fiddle and made some changes. https://jsfiddle.net/prisoner849/p8mx314L/
Now the wheels are children of the frame too (note their y-coordinates in comparison to the previous fiddle).
So, the rest is to change the vector of direction. It’s THREE.Vector3(1, 0, 0).
No need to put big numbers in the direction vector, as it’s normalized, means its length is always equals to 1.
Perfect, I have managed to deal with the wheels, now they spin nicely, thank you!
Now only one last issue left, even though when I set vector to THREE.Vector3(1, 0, 0) the car moves in the right direction, its object position (as a whole) is not right, it seems to be facing to the left. I tried adding car_frame.rotation.y = Math.PI; in the function to get it rotated, but that doesn’t work, I guess function overrides everything.
My current issue with cars’ position itself, once I fix it, I will call this a WIN
Yeah, noticed that just now. Any ideas how could I get around this? I could spin whole scene around so car would go its path, but that’s a bit rough, maybe there is any way to make it follow the X axis as opposed to Y in your provided movement function?
Take a look at how the things added to each other.
, but many other questioners before it. One of them was me. 
helpful examples.
