Create a subclass of THREE.Mesh by utilizing prototypal inheritance

My goal is to create a subclass of THREE.Mesh as shown below (THREE.Mesh inherits from THREE.Object3D).

Planet = function(geometry, material) {
    THREE.Mesh.call(this);

    this.geometry = geometry;
    this.material = material;
};

Planet.prototype = Object.create(THREE.Mesh.prototype);

Everything seems to be working well when I provide a SphereGeometry, except for the fact that the boundRadius property is not set as it would have been if I had used just a regular THREE.Mesh. However, the scene still renders correctly.

On the other hand, when I provide a CubeGeometry, there are problems in the render loop.

Uncaught TypeError: Cannot read property 'radius' of null three.min.js:105
THREE.Frustum.intersectsObject three.min.js:105
render three.min.js:414
starsgl.Application.render Application.js:60
starsgl.Application.animate Application.js:55
starsgl.Application Application.js:50
(anonymous function)

I followed the similar approach that Three.js uses to subclass THREE.Object3D with THREE.Mesh. However, it seems like I might be overlooking something.

javascriptthree.js

Answer №1

The radius parameter is not being invoked as the geometry has not been established.

const createPlanet = (geometry, material) => {
  return new THREE.Mesh(geometry, material);
};

const Planet = Object.create(THREE.Mesh.prototype);

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

Extract the titles and showcase them in a div using a structured list

Currently, I have a dynamic container with the class .product_section where I need to display the headings inside it in a UL list format within the div.toc. I am looking for a script that can iterate through each .product_section and generate a list using ...

javascriptphpjquerywordpress

Tips for invoking a function in an ASP.NET code-behind file using JavaScript

I'm currently trying to display an image in my div by calling a function from the code behind file. The image tag is dynamically bound with JavaScript, but I'm having trouble figuring out how to call a function with parameters. The code snippet I ...

javascriptc#asp.net

Using the same Angular component with varying input values

Recently, I encountered a puzzling issue that has left me unsure of where to even start investigating the possible causes. I am currently utilizing a library called angular-stl-model-viewer, which is based on Three.js. The problem arises when I call a comp ...

htmlangulartypescriptthree.js

Ways to choose fresh rendered components in jQuery without the need for an event-trigger

I am currently developing a jQuery project where a specific part of the page is loaded based on different options using the load() method. Within my application, I have this line of code: $('.pe').myFunction(); The requirement is for this code ...

javascriptjqueryloadselector

Implement strict mode with npm

Are there any potential downsides to not using 'use strict' in a node module published through npm? Is it advisable to omit it if I want the module to be easily usable by others? EDIT: I am specifically asking this question to understand if excl ...

javascriptnode.jsnpm

Include a personalized header in $http

In my factory, I have multiple functions that follow this structure: doFunction: function () { return $http({ method: 'POST', url: 'https://localhost:8000/test', data: {}, headers: { "My_Header" ...

javascriptangularjspost

What could be causing the "document is not defined" error to appear in my code?

Currently, I am in the process of developing an application using React Native that allows users to input text, submit it by clicking a button, and then have the entered text sent to me via email. To achieve this functionality, I have utilized EmailJS and ...

javascriptnode.jsreactjsreact-native

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

javascriptcssdompseudo-element

Laravel vue infinite scroll failing to load additional content

I've been trying to implement the infinite scroll feature from Element UI in my app, but for some reason, it's just not working. Here's a snippet of my code: Code script // Your JavaScript code goes here ...

javascriptlaravelvue.jsvuejs2

Create and store a new data entry in the custom taxonomy of a specific post

I have successfully added an upload image feature to my custom post type taxonomy. The post type is portfolio, and the taxonomy is portfolio-category. The input field for adding the image (which opens the WordPress uploader) is functioning properly. Howev ...

javascriptphpwordpress

My router-outlet is malfunctioning when trying to display my component

I am currently diving into learning Angular 2 in order to revamp my personal website. However, I've encountered an issue where my application fails to load the component when I navigate to the appropriate route by clicking on the navigation bar. Insi ...

javascriptangulartypescriptnpm

The server-side API is unable to transfer cookies through the NextJS application router

I'm facing an issue in my nextjs app where I am attempting to retrieve data using the async await mechanism. My code looks like this: export const getHomeData = async (tokenCalled4PublicApis: string) => { try { // const all = getCookie( ...

javascriptreactjsnext.jsnext.js13

Progress Bar Aligned in the Middle

I am having difficulty centering the percentage total within the colored progress bar. I have attempted placing the <p> tag in various <div> tags but haven't been able to figure it out. Can someone provide assistance? ...

javascriptcssposition

When navigating to a subsite or subfolder, the SVG href ID cannot be located

The topic at hand revolves around another issue: The challenge of creating an Ajax website with links from multiple subfolders. Take a look at the discussion where a solution for that problem was discovered. However, my current dilemma with that solution ...

javascriptjqueryhtml.htaccesssvg

Unable to open file after downloading via AJAX

I am facing an issue while trying to download a file using an Ajax request. Although the file is successfully downloaded, I am unable to open it. I am seeking assistance with the provided details below. Thank you. On a JSP page, there is a list ...

javascriptajaxjsp

AngularJS: Hide Row in NG-Grid Based on Condition

I am a beginner in angularJS and I have a requirement to hide a row in my ng-grid table if the value of a column is '0'. The grid consists of 4 columns: User Today This Week This Month I need to hide an entire row if the value in the 'Th ...

javascriptangularjsng-grid

What is the best way to display a page within a div when clicking in Yii?

I'm trying to use the jQuery function .load() to load a page into a specific div. Here's my code: <a href="" onclick="return false;" id="generalinfo"> <div class="row alert alert-danger"> <h4 class="text-center">Gen ...

javascriptphpjqueryhtmlyii

Facing Issues with User.update in Mongoose and MongoDB

I have been struggling to create a new collection and push it into a specific user's collections array. Despite researching various stackoverflow posts, I am unable to achieve this using either User.update() or User.findOneAndUpdate(). I can confirm t ...

javascriptmongodbexpressmongoosemongoose-schema

Automatically compile files while performing an npm install or update

I am looking for a way to automatically compile my TypeScript code into JavaScript when another project requires it. For example, when a project runs npm install or updates with my project as a dependency, I want a specific command to be executed after all ...

javascriptnode.jstypescriptnpmconfiguration

Bypassing a forward slash / when handling variables in an Ajax URL

I am currently dealing with pre-existing code that validates a user's submission by sending it to a specific URL using Ajax: var url = '/foo/bar/' + valuea + '/' + valueb + '/' + valuec; This information is then sent vi ...

javascriptjqueryajax