Developing a personalized Object3D class

Having a background in AS3/Away3D, I am new to THREE.js and I am trying to create a custom object class that extends THREE.Object3D for my scene. CustomObject will contain behavioral properties and methods, with each instance having its own data object determining its appearance and behavior. Keeping this code encapsulated will help tidy up my main.js file.

However, I am facing an issue where I can't directly add an instance of the class to my scene. Currently, I can only add the mesh using the CustomObject.getMesh() method. Is there a way to add the instance of the class directly to the scene for rendering? Below is a basic attempt I have made based on online resources and the /src directory:

function CustomObject(){

    THREE.Object3D.call( this );
    this.type = 'CustomObject';
    this.geometry = new THREE.BoxGeometry( 540, 540, 14 );
    this.mesh = new THREE.Mesh( this.geometry, new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
}

CustomObject.prototype = Object.create( THREE.Object3D.prototype );
CustomObject.prototype.constructor = THREE.Object3D;

CustomObject.prototype.getMesh = function(){

    return this.mesh;

}

I am looking to directly add the CustomObject class to the scene for better object management. Any guidance on how this can be achieved would be greatly appreciated.

Thank you in advance!

David

Answer №1

To include your own custom object in the scene directly, you can utilize a structure similar to the one below:

function CustomShape() {

    this.category = 'CustomObject';

    this.geometry = new THREE.BoxGeometry( 540, 540, 14 );
    this.material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );

    THREE.Mesh.call( this, this.geometry, this.material );

}

CustomShape.prototype = Object.create( THREE.Mesh.prototype );
CustomShape.prototype.constructor = CustomShape;

CustomShape.prototype.getMesh = function() {

    return this.mesh;

}

var example = new CustomShape();
scene.add( example );

Using three.js version r.71

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

Encountered an error while attempting to load resource in Node.js

I'm currently working on a project utilizing Node js (Express...). Let me do my best to explain the issue I am encountering. My work is being done on localhost, and the main page of my index.html has buttons that lead to other pages when clicked. I c ...

Searching Categories with jQuery: Explore Remote Results and Cache System

Seeking to enhance user experience on my website, I have decided to implement the JQuery Category Autocomplete plugin. This will enable users to search through categorized results stored in a separate file at "/search_basic.php" (details of the file's ...

Adjust the property to be optional or required depending on the condition using a generic type

const controlConfig = >T extends 'input' | 'button'(config: Config<T>): Config<T> => config; interface Config<TYPE extends 'input' | 'button'> { type: TYPE; label: string; ...

Error TS7053 indicates that an element is implicitly assigned the 'any' type when trying to use a 'string' type to index a 'User_Economy' type

Struggling with a particular question, but can't seem to find a solution. Error: TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'User_Economy'. No ind ...

Are specific names set aside for JQuery Selectors?

One time, I made a mistake with my selector: $("#cut") Unfortunately, this was not pulling the object correctly even though I had defined an object with that id in the HTML. After changing the object's id (and updating the selector), everything work ...

The Naming Convention for NPM Scripts

In my package.json, I have a script that looks similar to this: { ... scripts: { ... "testdb:e2e": "TESTDB_ENV='...' gulp mocha:e2e:backend && gulp mocha:e2e:frontend" } ... } I am interested in adding a s ...

Unable to proceed due to lint errors; after conducting research, the issue still remains

I'm still getting the hang of tslint and typescript. The error I'm encountering has me stumped. Can someone guide me on resolving it? I've searched extensively but haven't been able to find a solution. Sharing my code snippet below. (n ...

When making an ajax call, I passed the data "itemShape" but on the URL page, an error appeared stating "Undefined index: itemShape"

Hello, I have been using an Ajax function to send data with the key itemShape. However, when I directly access the URL page or service page, it displays the following error: Notice: Undefined index: itemShape in C:\wamp64\www\inventory_so ...

Activating a switch to execute a PHP code that displays a JavaScript code

At the conclusion of the button's click event, the following JavaScript code is executed: xmlObj.open ('GET', /ajax.php, true); xmlObj.send (''); } This will trigger the php script ajax.php located in the root directory: <?ph ...

Resizable and adaptable side panel

Seeking a template for a responsive sidebar that can be dragged horizontally to resize. Bootstrap compatibility is optional (using bootstrap 4.6, but other versions are acceptable) and jQuery can be utilized. An example that meets some of my requirements: ...

The Angular @HostListener beforeunload Event is a powerful way to handle

I've implemented the following code snippet in my main app.component.ts file within my Angular 17 project: @HostListener("window:beforeunload", ["$event"]) onTabClose($event: BeforeUnloadEvent) { $event.preventDefault(); ...

"Encountering an unfamiliar authentication strategy while using NodeJS passport

I am currently developing a project using node.js with passport authentication. However, I am encountering the following error message: Error: "Unknown authentication strategy " Below is my code: LocalStrategy = require('passport-local').Strat ...

Error message "auth/code-expired" is triggered when Firebase Multi Factor Authentication for a web application detects that the verification code has expired

While working on adding multi-factor authentication to my Angular web application, I encountered an error message stating: "auth/code-expired", "The SMS code has expired. Please resend the verification code to try again.", even though I ...

Differences between the http module and Express framework

After noticing this common pattern, I've become intrigued : const server = http.createServer(app); // Listen on provided port, on all network interfaces. server.listen(port); server.on('error', onError); server.on('listening', on ...

Ways to verify and incorporate https:// in a URL for a MEAN Stack application

When extracting the URL from API data, my code looks like this: <div class="row copy-text"> <a href="{{copy.Url}}" target="_blank" style="text-decoration: underline !important;">{{copy.Title}}</a> </div> I am interested in ve ...

Getting latitude and longitude from Google Maps in a React Native appHere are the steps to

Looking to retrieve the latitude and longitude from Google using React Native. As a newcomer to React Native, I have been unable to find any resources to address this issue. Any assistance would be greatly appreciated. Thanks! Thanks ...

Ensuring that the desired DOM elements have loaded before attempting to manipulate them in Vue.js

I've been struggling with this issue for the past day and I'm completely stuck. In my vue file, there's a method that operates like this: methods: { showSlides(n) { let slides = document.getElementsByClassName("mySlides"); ...

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

Adding semi-colon in JavaScript with special comments by YUI Compressor

Our team recently implemented YUI Compressor (2.4.8) on our project and it's been performing well. However, we encountered an unexpected issue while minifying JavaScript files that contain special comments. It appears that YUI Compressor is automatic ...

Ensure that the navigation bar remains consistent when switching between pages

My issue lies within the React components I am working with. Essentially, my goal is to create a Single Page Application (SPA) using ReactJS. While setting up authentication using auth0-js, I also established some routes for navigation. The layout is stru ...