Loading two different models is not possible with ColladaLoader

Upon running the code snippet below, an error is thrown:

Uncaught TypeError: Cannot read property 'x' of undefinedt @ three.min.js:462renderBuffer @ three.min.js:549k @ three.min.js:450render @ three.min.js:561render @ loaderTest.html:46

The error occurs on the last line where render() is called.

If I load the same model twice using loader.load(..), the error does not occur. It only happens when different models are selected.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var light = new THREE.AmbientLight( 0xFFFFFF ); 
scene.add( light );

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;

loader.load("models/model1.dae", function(colladaModel){
    var model = colladaModel.scene;
    model.position.set(0,0,0);
    scene.add(model);
});

loader.load("models/model2.dae", function(colladaModel){
    var model = colladaModel.scene;
    model.position.set(20,0,0);
    scene.add(model);
});

camera.position.z = 100;

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
};

render();

Answer №1

You're interfering with the model variable. The provided callback won't execute until the model finishes loading, but it's already loading another one simultaneously.

model = colladaModel.scene;

You failed to declare the variable model, making it a global variable that is shared across the browser and between the two callbacks. You should actually use window.model in this case.

Update them to:

var model = colladaModel.scene;

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

Authenticate with Google using the Javascript API without causing a pop-up to appear

Here is the code I'm using to allow users to log in with their Google account via the Javascript API. HTML <a id="gp_login" href="javascript:void(0)" onclick="javascript:googleAuth()">Login using Google</a> Javascript function gPOnLoad ...

swap out an element in an array with an extra element

My array contains elements with both id and des properties. I would like to add an additional property like value:0 to each object in the array. I achieved this using a loop. let data = [ { "id": 1001, "des": "aaa" }, { ...

Displaying a clock using PHP

Seeking a way to display server time on my website, I have successfully implemented client-side time using JavaScript. How can I now showcase the server time? Are there any ZendFramework classes that can assist with this? Currently, I am utilizing the fo ...

Leverage the retrieved JSON data from the database within an HTML template using the Play

Currently, I am facing a challenge with implementing a login feature in my project. I am struggling to figure out how to showcase the JSON string that is returned on the webpage. Below is a snippet of my code: Security.java: public Person webLogin(Perso ...

Asynchronous requests in Node.js within an Array.forEach loop not finishing execution prior to writing a JSON file

I have developed a web scraping Node.js application that extracts job description text from multiple URLs. Currently, I am working with an array of job objects called jobObj. The code iterates through each URL, sends a request for HTML content, uses the Ch ...

Angular error ReferenceError: $Value is not defined in this context

As a newcomer to AngularJS, I am facing an issue while passing a list from the HTML file to the backend for processing. The error message ReferenceError: $Value is not defined keeps popping up. Within my controller file, I have a function named test. The ...

Encountering an issue with the SSR module evaluation despite having SSR disabled in Svelte Kit

I needed a specific route in my app to not be server-side rendered. This can be achieved by setting export const ssr = false in the module script or configuring ssr: false in the svelte.config.js, as outlined in the Svelte documentation. Despite disabling ...

Bookmarklet in JavaScript that automatically extracts and displays Meta keywords in a new tab within the browser

I successfully implemented a script that extracts site meta keywords and writes them into the DOM. javascript:(function metaKeywords() { metaCollection = document.getElementsByTagName('meta'); for (i=0;i<metaCollection.length;i++) { nameAttri ...

Styling a table based on specific conditions using Angular and JavaScript

I am trying to conditionally style the text in the table based on the time elapsed since the last ping. Specifically, I want to change the color of the text from green to red once 5 minutes have passed and vice versa. <form name="myform" data-ng-submit ...

How to send props from a Vue.js component tag in an HTML file

I'm facing an issue with passing props from the HTML to the JavaScript code and then down to a Vue component. Here's a snippet of my index.html file: <div id="js-group-discounts"> <div class="form-group required"> <datepick ...

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

What is the proper way to utilize the value of a Node.js promise in a different function?

In my Node.js application, I have two functions defined. The first function is structured like this: function checkAdd ( address /* : string | void */ ) /* :Promise<Object[]> */ { var convertToLowerCase = address.toLowerCase() return Promi ...

Extracting information from JSON using jQuery

this is a sample json object: { "box 1": [{ "difficulty_grade": "5a+" }, { "gym": "New_gym" }, { "route_author": "some author" },]} https://i.sstatic.net/UJodJ.png Here is the code snippet: variable groups contains JSON data as shown in the ...

Encountering a problem when using the routingService to navigate inside a JavaScript function

Within my Angular component, I have a method called onCellPrepared. In this method, I am using jQuery to attach a span tag. I want to be able to trigger an Angular service to navigate to another page when the span tag is clicked. How can I successful ...

Having trouble using the elementIsNotVisible method in Selenium WebDriver with JavaScript

I'm struggling to detect the absence of an element using the elementIsNotVisible condition in the Selenium JavaScript Webdriver. This condition requires a webdriver.WebElement object, which is problematic because the element may have already disappear ...

Using React Native to trigger a function based on a conditional statement

<Pressable onPress={()=> { if(newID) { EditPress(newID) } else { AddPress } }} style={styles.logBox} > <Text style={{ textAlign:"center", ...

Encountering an issue with the message: "Property 'ref' is not available on the type 'IntrinsicAttributes'."

Having trouble implementing a link in React and TypeScript that scrolls to the correct component after clicking? I'm using the useRef Hook, but encountering an error: Type '{ ref: MutableRefObject<HTMLDivElement | null>; }' is not assi ...

Video texture is running but only displaying a blank screen

I am attempting to incorporate a video texture into my project using three.js. While the video does get added to the scene, the cube remains black. I can hear the audio playing in the browser, indicating that the video is present somewhere. As a beginner w ...

JavaScript property counterparts

Recently, I've been working on creating alias's for a specific property in my code. var default_commands = {} default_commands['foo'] = "bar"; My goal is to create multiple aliases for the key 'foo' in the object. For examp ...

Checking the URL in Redux Form

I am currently using the redux-form library to manage my form in React Redux. I have successfully implemented validation for fields like email and name. However, I am facing an issue with validating a URL field in redux-form. What specific format should I ...