Error: The object being added is not a valid instance of THREE.Object3D for the .add method

I encountered this error and I'm having trouble pinpointing its origin. It seems to be related to importing and creating 3D objects within my scene, but I can't figure out what exactly is causing the issue.

Below is the code snippet where I call a function before initializing:

function loadObjects()
{
loader = new THREE.JSONLoader();

var floorDiskmaterial = new THREE.MeshPhongMaterial({
    map: THREE.ImageUtils.loadTexture('img/floor_test.jpg'),
    transparent: true,
    color: 0xeaeaea,
    ambient: 0xeaeaea,
    overdraw: 0.5,
    //specular: 0x6a3e6d,
    shading: THREE.FlatShading,
    fog: false,
    //shininess: 50,
});

loader.load( "models/floorScene.js", function( geometry ) {
    FloorDiskFire = new THREE.Mesh( geometry, floorDiskmaterial);
    FloorDiskFire.position.set(0,0.2,0);
    FloorDiskFire.castShadow = true;
    FloorDiskFire.receiveShadow = true;
    FloorDiskFire.scale.set(1.5,1.5,1.5);
    //FloorDiskFire.rotation.y = -0.78;
} );

//-----Pillar Loader------//

var pillarMaterial = new THREE.MeshPhongMaterial({
    //map: THREE.ImageUtils.loadTexture('img/pillarMap.png'),
    //transparent: true,
    color: 0xeaeaea,
    ambient: 0xeaeaea,
    overdraw: 0.5,
    //specular: 0x6a3e6d,
    shading: THREE.FlatShading,
    fog: false,
    //shininess: 50,
});

loader.load( "models/pillar.js", function( pillar ) {
    firePillar = new THREE.Mesh(pillar, pillarMaterial);
    firePillar.position.set(135,0,135);
    firePillar.castShadow = true;
    firePillar.receiveShadow = true;
    firePillar.scale.set(1.7,1.7,1.7);
} );

loader.load( "models/pillar.js", function( pillar ) {
    earthPillar = new THREE.Mesh(pillar, pillarMaterial);
    earthPillar.position.set(135,0,-135);
    earthPillar.castShadow = true;
    earthPillar.receiveShadow = true;
    earthPillar.scale.set(1.7,1.7,1.7);
} );

loader.load( "models/pillar.js", function( pillar ) {
    airPillar = new THREE.Mesh(pillar, pillarMaterial);
    airPillar.position.set(-135,0,135);
    airPillar.castShadow = true;
    airPillar.receiveShadow = true;
    airPillar.scale.set(1.7,1.7,1.7);
} );

loader.load( "models/pillar.js", function( pillar ) {
    waterPillar = new THREE.Mesh(pillar, pillarMaterial);
    waterPillar.position.set(-135,0,-135);
    waterPillar.castShadow = true;
    waterPillar.receiveShadow = true;
    waterPillar.scale.set(1.7,1.7,1.7);
} );
}

Then in the initialization process, I add these objects into the scene:

loader.onLoadComplete=function(){
    scene.add(FloorDiskFire);

    scene.add(firePillar);
    scene.add(earthPillar);
    scene.add(waterPillar);
    scene.add(airPillar);
};

Answer №1

If you're finding yourself here and struggling to figure out why you're getting this error, I encountered it because I forgot to add a GLTF object to the scene as a THREE.Object3D object.

Here's a simplified version of my mistake:

let example = new THREE.Object3D();
loader.load(objects.exampleGLTF, function (object){
    example = object;
    scene.add(example);
});

I was perplexed for some time, running various tests to confirm that it was indeed loading, but the error persisted even after waiting 5 seconds.

The solution was to include ".scene" as shown below.

let example = new THREE.Object3D();
loader.load(objects.exampleGLTF, function (object){
    example = object.scene;
    scene.add(example);
});

Answer №2

It seems that there is an issue with the timing of the add call in this code. I didn't create this code from scratch and don't have the time for extensive debugging, but here's a hint about what might be wrong. It appears that some objects are still loading when you try to add them to the scene.

Here's a suggested procedure:

I made a change like this:

loader.onLoadComplete=function(){
        scene.add(FloorDiskFire);
        //scene.add(FloorDiskEarth);
        //scene.add(FloorDiskWater);
        //scene.add(FloorDiskAir);

        scene.add(firePillar);
        scene.add(earthPillar);
        scene.add(waterPillar);
        scene.add(airPillar);
    }

I grouped these actions into a new function called addObjects();:

function addObjects(){
        scene.add(FloorDiskFire);
        //scene.add(FloorDiskEarth);
        //scene.add(FloorDiskWater);
        //scene.add(FloorDiskAir);

        scene.add(firePillar);
        scene.add(earthPillar);
        scene.add(waterPillar);
        scene.add(airPillar);
    };

In your init() function, I called addObjects();, but encountered the same error! So I tried calling it after a delay - at line 309 > index.html:

setTimeout(function(){addObjects();},1000);

I initially tried 100ms, which didn't work, but 1 second worked well. This is not a solution, just an indication that delaying the function call resolves the issue. Your task now is to determine when to make the call (i.e., find the appropriate event to trigger the function) since loader.onLoadComplete isn't working as expected.

You can access the modified file here.

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

Perform an asynchronous request using a data variable retrieved from a previous asynchronous request

I have a function using ajax to parse XML data. Here is an example: $.ajax({ type: "GET", url: "the.xml", dataType: "xml", success: function parseXml(data){ $(data).find("ITEM").each(function(){ var x = $("URL", this).t ...

Modifying the default value setting in MUI Datepicker

Currently, I am utilizing version @mui/x-date-pickers ^6.17.0. Here is the custom date picker I am using: https://i.stack.imgur.com/k8nF1.png Upon clicking the input field, the placeholder switches and a value gets appended. However, modifying the input ...

Using Quaternion in THREE.js for Rotating and Translating Objects

I possess the following elements: a translation: [x1, y1, z1] a quaternion: [x, y, z, w] Is there a method to utilize the translation and quaternion to execute rotation and translation on a three.js mesh? Furthermore, is it possible to merge these in ...

The Evolution of Alternatives to contentEditable

Related: ContentEditable Alternative I am curious about the timeline of online WYSIWYG editors prior to the existence of contentEditable. I remember using GDocs and GMail with rich-text features that functioned similarly to contentEditable. I would appre ...

Hiding the y-axis on a msstackedcolumn2dlinedy Fusion Chart: A step-by-step guide

Currently, I am utilizing the msstackedcolumn2dlinedy fusion charts. To see an example of this in action, please take a look at this fiddle: Fiddle The objective I have is to hide the y-axis value on the right side of this chart. Can anyone provide guida ...

I am experiencing issues with the customsort function when trying to sort a column of

Seeking assistance with customizing the sorting function for a Date column in a primeng table. Currently, the column is displaying data formatted as 'hh:mm a' and not sorting correctly (e.g. sorting as 1am, 1pm, 10am, 10pm instead of in chronolog ...

Pressing a button will display a div element, which will automatically be hidden after 5 seconds

I'm working on an email submission form that displays a confirmation message below the input field when a user submits their email address. The confirmation text should fade out after 5 seconds. Here's the code snippet: <div class="input-gro ...

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

Feeling lost when it comes to tackling the Data Access Object/Layer in an Express/MongoDB setup?

I currently have an Express application that is integrated with MongoDB. My goal is to decouple my database access from the server layer. However, in trying to achieve this, I've encountered two main approaches: Passing Res as an argument //server.j ...

Step-by-step guide to initializing a project using React with Typescript and a functional server-side script

I am working on a project that involves a React Typescript app (created using Create React App). In this project, I need to have an executable script that can run alongside the React app. Both the app and the script are intended to only run on local machin ...

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Currently, my CSS file contains numerous @font-face tags. Each tag specifies a unique font-family and src URL. @font-face{ font-family: Garamond; src: url('ePrintFonts/pcl_91545.ttf'); } @font-face{ font-family: C ...

Reversing the Jquery checkbox functionality

Seeking some quick assistance here. I'm puzzled as to why this function seems to be working in reverse. Whenever I try to check the checkboxes, they all get unchecked and vice versa. Everything was functioning smoothly until I introduced the .click() ...

The excess triggering of ajax events is occurring due to the else clause

My website contains an ajax function that calls a cgi script. Occasionally, this script returns a 500 error. I want to modify the AJAX call so that it retries the request when this error occurs. Here is how I have attempted to do so: function shelverx() { ...

Tips for leveraging Angular resources with Sails

I recently started using angular resource with sails. var roles = sailsResource('roles').query(); // GET /roles $scope.rolesList = roles; angular.forEach($scope.rolesList, function(role) { console.log("Role: " + role); }); The output is sh ...

How can I slow down the response time in Express Node?

I have set up a route that triggers an asynchronous function when the URL is accessed. This function will eventually return a value, which I want to use as the response for the get request. However, I am facing an issue with delaying the response until the ...

Filtering Arrays of Objects: A Guide to Filtering in JavaScript

Could really use some assistance with sorting an array of objects in javascript. My users array looks like this: var users = [ { first: 'Jon', last: 'Snow', email: '<a href="/cdn-cgi/l/email-protection" class="__ ...

Obtain the selected option's value using Angular

Having an issue with my user.model.ts file. I have a list of users that I can edit by clicking on a button that filters the user's data and puts it in a bootstrap modal. I'm using [ngModel] in a select tag to get the country of my user, but when ...

Is there a way to incorporate locales in calculations involving percentages?

Given the number 4030.146852312 I want to retrieve the four decimal places from this number, resulting in: 4030.1468 Furthermore, I need to format this number according to the specified locale. For example: 4.030,1468 What is the best way to achieve thi ...

Leveraging promises to make Ajax calls without repeating code

Would it be possible to create an ajax function without duplicating it? Passing different parameters, which are locations to various files. Then utilizing the promise to combine them into a single object, possibly incorporating the spread operator. Is th ...

UI-Router: What is the best way to access a page within my project without adding it as a State?

Currently in the process of learning Angular and UI-Router. Initially, I followed the advice of many and chose to utilize UI-Router. In my original setup, the login page was included in all States. However, I decided it would be best to keep it as a separ ...