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

**URL:** <https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620>\
**Category:** Questions\
**Tags:** models, controls, camera\
**Created:** [October 23, 2018, 2:32pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620 "2018-10-23T14:32:46Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 23, 2018, 2:32pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/1 "2018-10-23T14:32:46Z")

</div>

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](https://joshondesign.com/p/books/canvasdeepdive/chapter11.html)  
Here’s the code I’ve got so far:

```javascript
 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!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2018, 3:06pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/2 "2018-10-23T15:06:23Z")

</div>

Can you please share you current progress as a fiddle? [https://jsfiddle.net/f2Lommf5/](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.

---

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 23, 2018, 3:25pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/3 "2018-10-23T15:25:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2018, 3:30pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/4 "2018-10-23T15:30:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 24, 2018, 10:12am UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/5 "2018-10-24T10:12:45Z")

</div>

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 🙁

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 24, 2018, 11:35am UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/6 "2018-10-24T11:35:46Z")

</div>

See my comment in: [Building skeleton from exported armature and binding to skinned mesh](https://discourse.threejs.org/t/building-skeleton-from-exported-armature-and-binding-to-skinned-mesh/4196/3?u=mugen87)

---

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 24, 2018, 2:44pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/7 "2018-10-24T14:44:47Z")

</div>

I don’t know it anymore… I can’t even seem to make a normal cube  
[https://jsfiddle.net/zeemeeuw1994/po8kxtvs/23/](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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 24, 2018, 2:59pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/8 "2018-10-24T14:59:34Z")

</div>

> [@zeemeeuw1994](#):
>
> I can’t even seem to make a normal cube

Some fixes 🙂

> **[Basic Scene - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/p65ex38t/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 24, 2018, 3:00pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/9 "2018-10-24T15:00:28Z")

</div>

You rock! Thanks a lot, that’s a start 🙂

---

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 24, 2018, 3:12pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/11 "2018-10-24T15:12:26Z")

</div>

> [@Mugen87](#):
>
> If you create a github repo with your code, it should be possible to request the model from there.

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

> **[Basic Scene - JSFiddle - Code Playground](https://jsfiddle.net/zeemeeuw1994/p65ex38t/17/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 24, 2018, 3:33pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/12 "2018-10-24T15:33:28Z")

</div>

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/](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](https://threejs.org/examples/#webgl_materials_cars)

---

<div class="post-metadata">

**Author:** ![zeemeeuw1994](https://avatars.discourse-cdn.com/v4/letter/z/58f4c7/32.png) [@zeemeeuw1994](https://discourse.threejs.org/u/zeemeeuw1994)\
**Post date:** [October 24, 2018, 3:46pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/13 "2018-10-24T15:46:15Z")

</div>

Thanks a lot 🙂.

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 24, 2018, 3:50pm UTC](https://discourse.threejs.org/t/want-to-let-car-drive-but-that-doesnt-work-instead-the-camera-moves/4620/14 "2018-10-24T15:50:01Z")

</div>

> [@zeemeeuw1994](#):
>
> . But is it also possible to use two keys simultaneously?

Yes. I suggest you take some time and study [Car.js](https://github.com/mrdoob/three.js/blob/dev/examples/js/Car.js). I guess you can answer most of your questions by yourself when you analyze how the logic works.