Guide on importing a JS file into the main JS file using Three.js

Question

Guide on importing a JS file into the main JS file using Three.js

I'm fairly new to Threejs and I am trying to organize my code by putting some of my threejs code in a separate JS file and then using it in my main.js file. Here is a simplified version of what I am trying to do:

main.js

import * as THREE from 'three'
import Box from './classes/Parts.js'
const box = new Box()
scene.add(box)

Parts.js

class Box {
  constructor() {
    this.geom = new THREE.BoxGeometry(2, 2, 2);
    this.mat = new THREE.MeshBasicMaterial({
      color: 0xff0000
    });
    this.mesh = new THREE.Mesh(this.geom, this.mat);
  }
}
export default Box;

This is similar to this.

However, I am encountering the following error:

THREE.Object3D.add: object not an instance of THREE.Object3D.

What am I doing wrong here?

javascript three.js

Answer 1

Answer №1

In order to add custom objects to the scene graph, they must be derived from the THREE.Object3D class. Your Box class does not meet this requirement. Here is the revised code:

class Box extends THREE.Mesh {
  constructor() {
    const geom = new THREE.BoxGeometry(2, 2, 2);
    const mat = new THREE.MeshBasicMaterial({
      color: 0xff0000
    });
    super(geom,mat);
  }
}
export default Box;

Answer 2

In order to add custom objects to the scene graph, they must be derived from the THREE.Object3D class. Your Box class does not meet this requirement. Here is the revised code:

class Box extends THREE.Mesh {
  constructor() {
    const geom = new THREE.BoxGeometry(2, 2, 2);
    const mat = new THREE.MeshBasicMaterial({
      color: 0xff0000
    });
    super(geom,mat);
  }
}
export default Box;

Guide on importing a JS file into the main JS file using Three.js

Answer №1

Similar questions

Looking for a method to substitute "test" with a different value

Issue with DropdownListFor validation using jQuery when the onchange event triggers submission

The mssql node is experiencing an issue where it is unable to accept work due to the pool being

The React functional component captures a snapshot of its state when initializing a websocket event handler

Disabling the global ajax datatype causes issues with Rails remote links

Ways to define a variable based on a CSS class attribute?

SOLVING the issue of page flicker in SVELTE

Having trouble with the webpage not loading correctly after implementing react-router-dom

What is the reason behind the requirement in Javascript (ES.next) that a function must be declared as async in order to utilize await functionality?

Authentication with Laravel and Vue.js

Massive React State Array containing hundreds of Input elements, sluggish state updates triggered by onChange events

ffmpeg is successfully converting less than half of my images into a video

Clicking on the delete option will remove the corresponding row of Firebase data

Angular: controller's property has not been initialized

As soon as I inserted the image, the text vanished into thin air

The hide-columns feature in Ng-table does not allow for manual column hiding from the controller

In Google Chrome, the edges of hexagons appear jagged and not smooth

Ways to retrieve the total of all the values stored within an object created using a constructor function

Automatic Full-Screen Switching Upon Video Playback in HTML5

Issue with PassportJs not forwarding users after successful authentication