Hi,
So I’m pretty new to Three.js. I have a problem:
I’ve imported a 3D model car and I want to let it “drive” (basically just move and turn with the arrows). However the thing that is moving is my camera instead of the car.
Anyone who can help me?
This is my inspiration: https://joshondesign.com/p/books/canvasdeepdive/chapter11.html
Here’s the code I’ve got so far:
var scene = new THREE.Scene( );
var camera = new THREE.PerspectiveCamera ( 75, window.innerWidth / innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( {antialias:true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild ( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
keyboard = new THREEx.KeyboardState();
// create the shape
new THREE.MTLLoader()
.setPath( '_myModel_' )
.load( 'car.mtl', function ( materials ) {
materials.preload();
new THREE.OBJLoader()
.setMaterials( materials )
.setPath( '_myModel_' )
.load( 'car.obj', function ( object ) {
object.scale.set( 0.25, 0.25, 0.25 );
// object.rotation.set( 0, Math.PI / -4, 0 );
object.rotation.set( 0, Math.PI, 0 );
object.position.set( 0, -0.5, 0 );
scene.add( object );
});
} );
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event){
var keyCode = event.which;
if (keyCode == 83 ){
object.position.x -= 1;
} else if (keyCode == 87){
object.position.x += 1;
} else if (keyCode == 65){
object.position.z -= 1;
} else if (keyCode == 68){
object.position.z += 1;
}
render();
};
camera.position.z = 5;
// draw scene
var render = function ( )
{
renderer.render ( scene, camera );
};
var GameLoop = function ( )
{
requestAnimationFrame ( GameLoop );
render ( );
controls.update();
};
GameLoop( );
I appreciate the help 
Thanks!
