Exploring the capabilities of three.js

I am interested in analyzing the classes within the three.js library. I have developed a function that can determine whether a given class relies on another class or not.

function getParent (className) {
    var parent = null;
    var object = new THREE[className]();

    for (var a in THREE) {
        if (typeof THREE[a] === "function" && object instanceof THREE[a] && a !== className) {
            parent = a;
            break;
        }
    }
    return parent;
}

Additionally, I would like to create a function that returns two arrays - one containing properties and the other containing methods. While iterating over an "object", I want to be able to differentiate between inherited and non-inherited members. However, when there is a parent present and I store a reference to it, simply negating the result of parentObject.hasOwnProperty does not yield the desired outcome.

for (var member in object) {
    if (typeof object[member] === "function") {
        if (!parentObject.hasOwnProperty(member)) {
            methods.push(member);
        }
    }
    else {
        //...
    }
}

Answer №1

hasOwnProp doesn't search along the prototype chain, so a true result means the property is not inherited. No need to inspect parent object members.

if (object.hasOwnProp(member))
    actions.push(member)
else
    ...

For further information - Object.prototype.hasOwnProp()

Answer №2

Hopefully, you now have a clearer understanding of how JavaScript classes function and how inheritance is implemented for them.

for (var key in THREE) {
   if (typeof THREE[key] === "function" && object instanceof THREE[key] && key !== className) {
       parent = key;

The previous approach doesn't support multi-level inheritance. It's recommended to use something like:

function getParent (className) {
    var proto = THREE[className].prototype,
        parproto = Object.getPrototypeOf(proto);

    for (var key in THREE)
        if (typeof THREE[key] === "function" && THREE[key].prototype === parproto)
            return key;
    return null;
}

Please note that this method only identifies prototypical inheritance and not mixin inheritance. Given that Three.js uses the standard pattern for prototypical inheritance, you can also find relevant code snippets in the repository.

I am able to determine the type of member, but how do I confirm it's not inherited? Checking if the parent exists and simply negating the result of parentObject.hasOwnProperty may not yield accurate results.

It's unclear what parentObject represents in your context. Especially for methods, instances often inherit methods from prototypes, meaning they are not considered as their own properties.

A more effective approach could involve:

function describeProperties(className) {
    try {
        var obj = new THREE[className](), 
            proto = Object.getPrototypeOf(obj);
    } catch(e) { 
        obj = proto = THREE[className].prototype;
    }
    var properties = {};
    for (var property in obj) {
        var description = [];
        description.push( (typeof obj[property] == "function") ? "method" : "value");
        if (!(property in proto)) 
            description.push("instance-specific")
        if (obj !== proto && obj.hasOwnProperty(property) && property in proto)
            description.push("defaulted");
        if (property in Object.getPrototypeOf(proto)) {
            description.push("inherited")
            if (proto.hasOwnProperty(property)) 
                description.push("overwritten");
        }
        properties[property] = description.join(" ");
    }
    return properties;
}

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

Tips for resizing an object in a single direction using THREE.JS

I have encountered an issue while adding a cube to my scene using THREE.JS. When I try to change the height of the cube by increasing its y coordinate, it also seems to expand in the negative y direction as well. var cubeGeometry2 = new THREE.BoxGeomet ...

Tips for removing beforeunload handler following ajax request

Is there a way to prevent a specific script from running after a successful AJAX response? I have a script that runs when the page is refreshed, but I don't want it to run after my AJAX call. How can I achieve this? The script that needs to be remove ...

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

The correct assertion of types is not carried out during the initialization of generics through a constructor

I am encountering a minor issue with TypeScript, and I am uncertain whether it is due to a typo on my part or if TypeScript is unable to correctly infer the types. Let me provide all the necessary code to replicate the problem: interface IRawFoo { type: s ...

Is there a keen eye out there that can help me pinpoint the mistake in this SVG/Javascript function?

I have created a series of SVG circles that are meant to alternate in color between blue and red with each click. However, I am experiencing some inconsistency in the behavior. In my local environment, the color doesn't change to red until the second ...

"Utilizing AJAX in JavaScript to render HTML content and inserting it into an HTML element with a specific id

I ran into an issue while trying to display HTML content in a Bootstrap modal using AJAX. The class seems to be malfunctioning and I'm unable to pinpoint the source of the error. Here's the code snippet: var all_gaugeKritis5 = ""; all_gaugeKrit ...

How can I create a timed slideshow of images?

Is there a way to make a series of images slide automatically after closing or stopping a video? To see the specific website in question, click here: Upon visiting the site, a video pops up. How can I program the image slides to transition every 7 secon ...

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

const [selectedCountry, setSelectedCountry] = useState(); <Autocomplete autoHighlight={true} //required autoSelect={true} id="geo-select-country" options={availableCountries} value={se ...

Retrieve the value of a struct data member in a different file

In my computer.h file, I have a data member named "status" which is calculated in the computer.c file. Now, I need to access this value and print it in another file called display.c. The issue is that I am unsure of how to access this variable. I am restr ...

Tally up various figures in all tables

I am dealing with a dynamic table generated from a PHP loop. Below is an example of the table structure extracted from the browser source code: <table class="table"> ... (table content) </table> <table class="table"> ... (t ...

An animation triggered by scrolling using the @keyframes rule

Is it possible to smoothly animate a variable font using @keyframes on scroll and have it complete the animation loop when the user stops scrolling, rather than snapping back to the starting position? I've managed to make the animation work, but it l ...

Filtering an object using data in AngularJS

My current data object structure looks like this : $scope.data = [ { "name": "1001", "queue": [ { "number": "111", } ] }, { "name": "1002", "queue": [ ] ...

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

I'm struggling to get my Iframe to show the html string properly. Here's the content of the string: var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0"> <SCRIPT language=JavaScript> var Caller_User_Ty ...

The integration of Zoom SDK with React and Node inevitably leads to encountering errors

I have been struggling to integrate zoomsdk into my react app and have followed all the steps mentioned here. The backend part is functioning properly, and I am receiving the signature response. However, when attempting to run the frontend portion, I encou ...

Setting up dgrid cells to show the complete width of the information

I am developing an application that will generate a dgrid with variable column numbers and widths determined by user input. Please refer to the screenshots below for examples. The first screenshot displays a dgrid with only a few select fields, rendering n ...

Tips for reversing the order of a v-for loop using Vue.js

I am working with an array called "names" that starts off empty names: [] To add elements to this array using the unshift() function, which adds elements to the beginning instead of the end, I do it like this: names.unshift("Leonardo") names.unshift("Vict ...

I possess 9 captivating visuals that gracefully unveil their larger counterparts upon being clicked. Curiously, this enchanting feature seems to encounter a perplexing issue within the realm of web browsing

<style type="text/javascript" src="jquery-1.11.0.min.js"></style> <style type="text/javascript" src="myCode.js"></style> </body> //jquery is within my site directory on my desktop $(document).ready(function(){ //note: $("#ar ...

Sending real-time information to Vue parameters and routes

I've recently started working with Vue and I'm facing some challenges. I'm not sure if it's even possible, but I'll pose the question to see what insights the Stack Overflow community can offer. My query is about storing component ...

Learn the steps for filling the color area between two points in HighCharts

Is it possible to have a color fill between two points on an area chart when clicked? You can view the current chart here. $(function () { $('#container').highcharts({ chart: { type: & ...

What is the best way to add a sliding effect to this presentation?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow I am attempting to create a sliding effect for image transitions instead of the typical fade in and out. However, I'm uncertain about how to approach this challenge. My concept i ...