Advancing in the world of three.js

    var leftKey = 72;

    var rightKey = 74;


    document.onkeydown = checkKey;
    function checkKey(e){
        e = e || window.event;
    if(e.keyCode === leftKey){
           car.position.z = car.position.z -10;

       }
    if(e.keyCode === rightKey){
           car.position.z = car.position.z +10;

       }
    } 

    car.position.x ++;

Greetings, I am attempting to move the car forward during each game update. However, when I try 'car.position.x ++;', it results in the error 'TypeError: Cannot read property 'position' of undefined'. Any suggestions on how to resolve this issue? Thank you!

myColladaLoader = new THREE.ColladaLoader();
myColladaLoader.options.convertUpAxis = true;

myColladaLoader.load( 'car.DAE', function ( collada ) {
        // Storing the dae model in a global variable.
        car = collada.scene;

        // Positioning the model in the scene (world space).
        car.position.x = -1850;
        car.position.y = 0;
        car.position.z = 0;

        // Scaling the model to the correct size.
        car.scale.x = car.scale.y = car.scale.z = 0.2;
        car.updateMatrix();

        // Adding the model to the scene.
        scene.add( car );
    } );

Car added successfully above!

Answer №1

The issue at hand is not a scoping error, but rather the JavaScript render function updating before the implementation of the car. To resolve this, it is necessary to postpone the car's movement until it is fully ready.

For further assistance, refer to the three.js Documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

issue with manipulating hidden field on the client side

After some troubleshooting, I discovered an issue with a hidden field in my form. Despite changing the value using JavaScript right before submitting the form, on the server side it appeared to be null or empty. The Request.Form["hidAction"] showed as em ...

Instructions for incorporating highcharts sub modules into a React application

I have been utilizing the react-jsx-highcharts library to seamlessly integrate Highcharts into my React application. Everything is functioning perfectly. However, I am now interested in incorporating the boost module. I attempted to add it by simply using ...

What is the best way to display an image and text side by side within a single row in react-table?

I am trying to display an image and text side by side within a single column in a React table. I have successfully added two texts together in a single column using the code below: Header: "Name", id: "User", accessor: (d) => ...

Ways to duplicate the content of a div to the clipboard without the use of flash

Simple question! I have a div identified as #toCopy, along with a button identified as #copy. Can you suggest the most efficient method to copy the content of #toCopy to the clipboard upon clicking #copy? ...

What strategies can be implemented to avoid re-rendering in Angular 6 when the window is resized or loses focus?

I am currently working with a component in Angular 6.0.8 that consists of only an iframe element. Here is the code in page.component.html: <iframe [src]="url"> The logic for setting the URL is handled in page.component.ts: ngOnInit() { this.u ...

Can the manifest.json file be edited dynamically?

I'm in the process of developing a React PWA and I'm exploring the possibility of dynamically adding icon URLs to the manifest.json file. My aim is to display a generic app icon until the user logs in. Once logged in, I plan to fetch a new icon f ...

Add the user's input text to a modal in C# MVC 5

If my status changes, I want to add another text box or text area for additional comments. In the photo provided, this has been implemented but the positioning is not quite right due to issues with the modal. Below is a snippet of my code where you can ta ...

Error encountered in Next.js while fetching data: Invalid JSON response received, with an unexpected token "<" at the start of the JSON data

I've been attempting to utilize the getStaticProps function in order to send a request and then pass the retrieved data to a component: However, I keep encountering this error: FetchError: invalid json response body at reason: Unexpected token < ...

The data retrieved from the web API is not undergoing the necessary conversion process

I am facing an issue with a web API call where the property checkNumber is defined as a double on the API side, but I need it to be treated as a string in my TypeScript model. Despite having the property defined as a string in my model, it is being receive ...

A guide on extracting the values of checked checkboxes by their ID using javascript

I'm currently attempting to extract the values of selected checkboxes. These checkboxes have distinct IDs because they are specified within a modal window. <input type = 'checkbox' id = 'audience_Name-$row[asset_ID]' value = &a ...

Utilizing ES6 Functions to Transform Objects into Arrays

Is there a way to convert a JavaScript object into an array using ECMAScript-6? Take, for instance: var inputObj = {a:'foo', b:[1,2,3], c:null, z:55}; The desired outcome would look like this: ['foo', [1,2,3], null, 55] The seque ...

What could be causing my .load() function to fail when attempting to target a specific div element?

My goal is to retrieve and display a div tag from another aspx page within my container div. Here is the jQuery code: function GetDocumentInfo(url) { $('MyContainer').load(url + ".otherdiv"); } This operation is triggered by a click event. ...

Connecting AngularJS with select options

I am currently developing a checkout feature that calculates shipping prices based on the selected country. If the user picks United States, it should display US. For any other country selection, it should show Not US While the shipping function correctly ...

Incorporate a div beside a button using componentDidMount in a React component

Upon page load, I aim to position an info icon div next to a button node. However, the button node is not available when componentDidMount is triggered. I have attempted to use setTimeout, but its effectiveness varies depending on the amount of data in th ...

Maximum opacity in Three.js fog

My Current Endeavor: I am in the process of developing a lightweight GIS application with topography. One feature I want to implement is atmosphere haze. The Code I'm Working With: (Please bear with me as I have multiple scenes) fogColor = new T ...

Is there a way to expand my dialog box to fill the entire screen?

Currently, I am studying a tutorial on creating an angular lightbox, which can be found here. However, I am facing an issue where the lightbox only expands to the size of the div when I place the button inside it. The code snippet in question is as follows ...

Encountering issues with Webpack 2 failing to resolve the entry point specified in the

Encountering an issue while trying to compile my application with webpack 2. This is how my app folder structure looks: / | - dist/ | | - src/ | | | | - modules/ | | | | | | - module1.js | | | | - index.js * | | _ webpack.config.js | | ...

Performing an Ajax request to submit a form without the need to reload the page in MVC

I am looking for assistance with submitting a form from an MVC view without refreshing the page. However, it seems that my AJAX code below is not functioning properly: //here is ajax call function AjaxCallAndShowMessage(btnClick) { $('form').s ...

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...