Want to let car 'drive' but that doesn't work, instead the camera moves

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 :slight_smile:
Thanks!

Can you please share you current progress as a fiddle? https://jsfiddle.net/f2Lommf5/

In any event, you have to ensure that the object variable is defined in global scope. As soon as the onLoad() callback of OBJLoader.load() fires, you have to assign the loaded object to this variable. After that, it should be possible to change the position of the car within the keydown event listener.

I will do that… but I don’t know how to present the 3D model then? Since it’s on my computer. Do you know where I can best put it online?

If you create a github repo with your code, it should be possible to request the model from there.

Okay so I did manage to upload everything to github. However I can’t find out how to link everything (models/javascript etc.) correctly in JSFiddle :slightly_frowning_face:

How can I link from JSFiddle to Github? Sorry for being a noob…

See my comment in: Building skeleton from exported armature and binding to skinned mesh

I don’t know it anymore… I can’t even seem to make a normal cube
https://jsfiddle.net/zeemeeuw1994/po8kxtvs/23/

It says: THREE is not defined

I did try your reply with the raw file, but then it says: Refused to execute script from ‘link’ because it’s MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled

Some fixes :slight_smile:
https://jsfiddle.net/prisoner849/p65ex38t/

You rock! Thanks a lot, that’s a start :slight_smile:

okay, sooooo… I finally managed to get the model in a JSFiddle. However I would still like to get the car moving I just don’t really know how to

https://jsfiddle.net/zeemeeuw1994/p65ex38t/17/

The problem is that OrbitControls seems to interfere with a custom keydown event listener. If I remove OrbitControls, it’s possible to control the car with the arrow keys.

https://jsfiddle.net/p65ex38t/22/

If you want both types of controls, you have to enhance OrbitControls with your custom code. The following example might also be useful for you:

https://threejs.org/examples/#webgl_materials_cars

1 Like

Thanks a lot :slight_smile:.

I have to dig into that, since I’m still kinda new to this.

still one other question. I added a rotation. But is it also possible to use two keys simultaneously? So up arrow and right arrow? Making it slowly turn as a real car.

Yes. I suggest you take some time and study Car.js. I guess you can answer most of your questions by yourself when you analyze how the logic works.