The function THREE.Object3D.add cannot be executed because the object provided is not a valid instance of THREE.Object3D. This issue

Has anyone encountered issues when requiring an Object3D? Take a look at the code snippets below:

This code works fine:

...
// Import THREE globally

var material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var mesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);

console.dir(mesh) // -> THREE.Mesh

scene.add(mesh);

...

This code doesn't work:

Character.ts

export class Character {

    create() {

        var material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        return new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);

    }

}

app.ts

import {Character} from "./Character.js;

var mesh = (new Character).create();

console.dir(mesh) // -> THREE.Mesh

scene.add(mesh);

Error message:

app.js:8861 THREE.Object3D.add: object not an instance of THREE.Object3D.

I am using browserify

THREE.js version r78

Answer №1

Recently, I encountered a similar issue where I unintentionally included three.js twice in my project. Initially, I manually added it and later realized that a library I was using already included three.js. This led to conflicts with object constructors being overwritten, ultimately resulting in errors. To illustrate this scenario, take a look at the following code snippet (borrowed from here):

window.MyObject = function () {};
var v1 = new window.MyObject();
console.log( 'first object instanceof:', v1 instanceof window.MyObject ); // true

window.MyObject = function () {};
var v2 = new window.MyObject();
console.log( 'second object instanceof:', v2 instanceof window.MyObject ); // true
console.log( 'first object instanceof:', v1 instanceof window.MyObject ); // false!

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

How to populate an ExtJS 3.4 combobox with local JSON data in a few simple steps

I am utilizing ExtJS 3.4 and in need of populating a combobox with specific data obtained from a previous XMLHttpRequest, stored in a variable as follows: my_variable = "[{"cod_domini":"1","nom_domini":"Sant Esteve de Palautordera"},{"cod_domini":"2","no ...

How can you implement div slide animations using AngularJS?

Is there a way to slide a div when a user clicks on a tab? I have created a demo in jQuery Mobile (view demo here) with three tabs that show transitions. Can you provide guidance on how to achieve the same functionality in Angular? I have been attempting t ...

Limiting the input in a text box to only allow whole numbers and no decimal values

What is the best way to limit a textbox to only accept whole numbers and exclude decimal values and alphabets? ...

LitElement - Exclude attribute when value is false

Is there a way to display these three options differently: <my-el someValue="a"></my-el> <my-el someValue="b"></my-el> <my-el></my-el> Notice the absence of the attribute someValue on the third element. To achieve thi ...

Steps to connect my JavaScript file from a separate folder to my EJS file

Currently, I have an ejs file located in this directory: ./admin/admin.ejs and a regular JS file in the following directory: ./public/client.js as well as an express app situated in this directory: ./app.js which renders the ejs file using the code b ...

Unable to deploy the Firebase function to Firebase functions platform

I've been watching Doug's video on YouTube for guidance on changing a message with functions in JavaScript. To resolve the error message 'types can only be applied to ts files,' I installed the Flow language script. Thankfully, that err ...

Python, JavaScript, and Selenium RC all work together within loop statements on .aspx pages

I've been diving into Python on my own for the past few months. My initial project involves creating a browser driver test case with the Selenium RC web driving framework (I'm avoiding importing webdriver to keep things simple). The goal is to ha ...

Leveraging nodemailer for automated email delivery

Hey there! I'm looking for some advice on how to set up scheduling with emailing using nodemailer. Ideally, I'd love to be able to schedule emails to send every day at 9am within a web app using nodemailer. However, I'm not sure where to st ...

Converting an object to a string using AngularJS within a directive

Can anyone assist me in ensuring that AngularJS preserves non-string values in directive attributes? While searching for a method to display a tree structure in HTML from JSON data, I came across this code snippet: http://jsfiddle.net/n8dPm/ I've be ...

Guide to executing multiple AJAX requests within a single Django view

As I develop my personal spending diary, I encountered a dilemma. To enhance the user experience, I aim to streamline the process of adding new items without refreshing the page. Although I created a single ajax form, I now realize the necessity for two ...

Issue with React Native TextInput failing to update state within a functional component when onChange event is triggered

When using a TextInput in a React Native functional component, I am facing an issue where the state for "name" is not updating properly when onChange occurs. To debug this issue, I have added a console log in useEffect to monitor the new state value. Howe ...

The loop is failing to return a true or false result from the query

Could you please analyze why the output of the loop is not correct? In this code snippet, I am looping through the friendId array of a user and comparing it with the search results. If there is a match, the result should be true; otherwise, it should be f ...

Slow loading time when switching between items in the drop-down menu from the Main Menu

Visiting my website at europebathroom.com, you will notice a horizontal main menu with dropdown functionality. When hovering over a menu item, the corresponding dropdown appears seamlessly. Yet, sometimes quickly touching another menu item unintentionally ...

I'm encountering a strange issue where Node JS is mistakenly claiming that the method doesn't exist, even though

Ah, it seems I've encountered an error in my test project. The issue lies with Node JS not being able to locate the getStr function within the Another object. Allow me to share the code with you: test.js var Another = require('./another.js&apo ...

Changing p tags to br tags on tinyMCE

I need assistance with using tinyMCE as an inline editor. I want it so that when a user is in edit mode and presses enter, <br /> is inserted instead of <p>. I have gone through the manual and FAQ but have not been able to achieve this successf ...

Utilize data from API responses to configure settings in angular-datepicker using pickadate.js

I am attempting to configure the options for the angular-datepicker, which is utilizing pickadate, by fetching data from a web-api call. Here is my current code: <label for="datepicker">Date:</label> <input type="text" id="datepicker" pick ...

What are some solutions for resolving JavaScript's 'undefined' error?

(function(window) { var johnGreeter = {}; johnGreeter.name = "John"; var greeting = "Hello "; johnGreeter.sayHello = function() { console.log(greeting + johnGreeter.name); } window.johnGreeter = johnGreeter; })(window); // <!DOCTYPE html ...

Adjust the Scope in Angular-Charts.js Post-Rendering

I am currently facing a challenge with displaying multiple charts using the angular-charts.js framework. The issue is that I require all the charts to have the same scale, but each chart currently has its own scale based on the displayed data. Unfortunatel ...

A guide on iterating and accessing Vue data in a loop

I am looking to iterate through my code in order to extract the value of each form input. This is to ultimately display a total score and severity score based on the user's inputs. The total score will count the number of symptoms present (0-3), while ...

"Concealing Querystrings in Node.js and AJAX: A Step-by-Step

I want to create a simple login form using the ajax Post method. However, I am having issues with the querystring still appearing in the URL. Can anyone help me resolve this issue? Thank you for any assistance! [ https://i.stack.imgur.com/R76O4.png http ...