What are the steps to implement the "render" function from one class into another class within three.js?

As a newcomer to three.js, I have been working on creating a bowling game. However, I am encountering an issue where I need to access a function from my "Application" class within the physics class that I have created.

Here is a snippet of the Application Class:

export class Application {
    constructor() {  
        this.objects = [];
        this.createScene();
    }

    createScene() {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(60,
        window.innerWidth / window.innerHeight, 1, 10000);

        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this.renderer.domElement);
        this.render();

    }

    getMesh(){
        return this.curveObject;
    }
    update(){
        
    }

    render() {
        requestAnimationFrame(() => {    
        this.render();
    });
        this.objects.forEach((object) => {
        object.update();
    });
        this.renderer.render(this.scene, this.camera);
    }
}

And here is the Animate Function inside the "Physics" class:

  animate(){
       if (this.pinTest){
      //  console.log(this.pinTest);
        this.pin1Mesh.position.copy(this.pin1Body.position);
        this.pin1Mesh.quaternion.copy(this.pin1Body.quaternion);
        this.pinTest.position.copy(this.pin1Body.position);
        this.pinTest.quaternion.copy(this.pin1Body.quaternion);
    }
    // Now I am looking for a way to execute the render function here
    //this.renderer.render(this.scene, this.camera);
}

Answer №1

Example of a base class:

class baseAnimation {
  animate() {
    if (this.pinTest) {
      //  console.log(this.pinTest);
      this.pin1Mesh.position.copy(this.pin1Body.position);
      this.pin1Mesh.quaternion.copy(this.pin1Body.quaternion);
      this.pinTest.position.copy(this.pin1Body.position);
      this.pinTest.quaternion.copy(this.pin1Body.quaternion);
    } else
      console.log("pinTest === false");
  }
}

class Physics extends baseAnimation {

}



let test = new Physics();

test.pinTest = false;

test.animate();

Illustration of passing an object to an Animation class (using static method):

class Animation {
  static animate(obj) {
    if (obj.pinTest) {
      //  console.log(this.pinTest);
      obj.pin1Mesh.position.copy(obj.pin1Body.position);
      obj.pin1Mesh.quaternion.copy(obj.pin1Body.quaternion);
      obj.pinTest.position.copy(obj.pin1Body.position);
      obj.pinTest.quaternion.copy(obj.pin1Body.quaternion);
    } else
      console.log("pinTest === false");
  }
}

class Physics {

}

let test = new Physics();

test.pinTest = false;

Animation.animate(test);

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

Creating a new music application and looking for ways to keep track of and update the number of plays for

I'm currently developing a music app and am looking for a way to update the play count every time a user listens to a song for at least 30 seconds. I've attempted the following approach: let current_final; let current_initial; ...

Angular update row and save data to an array

When comparing the data of an edited row with the row just below it, I encounter a specific scenario. In a table containing 5 rows, as I edit records from top to bottom using the provided code snippet, I am able to store the values in an array. The most re ...

Navigating through the DOM using JavaScript or regular expressions

I have a DOM string called innerHTML and I am looking to extract or display the node value using either JavaScript's DOM API or JavaScript RegEx. "<nobr> <label class="datatable-header-sortable-child" onmousedown="javascript:giveFeedback(&ap ...

Guide on creating a live connection between a slider and a canvas

Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...

When invoking a function, a React Component utilizes the props from the first element instead of its own

Whenever I try to invoke a function of a component, it seems to be replacing the parameters and passing the props of the first array element instead of the selected one. To illustrate this issue, let's take a look at some code: Firstly, here is how ...

Suggestion for implementing numerous ajax countdown timers (one call per second)

I am currently developing a system with 100 countdown timers that each make an ajax call every second to retrieve the endTime from the database and update the countdown time. The reason for calling this every second is because the endTime can be altered. ...

The concealed [hidden] attribute in Angular2 triggers the display of the element after a brief delay

I am currently utilizing the [hidden] attribute within my application to conceal certain elements based on a specific condition. The situation is such that I have two divs - one for displaying results and another for showing the text "No results". Both t ...

Processing of an array received via AJAX and passed to a PHP script, inside a separate function in a different file

I have a JavaScript array that I am sending via AJAX to a PHP file named aux.php. What I want is for this array to be visible and manipulable within a function inside a class in another PHP file called payments.php. I've provided all the code so they ...

How to resolve the issue of "Fixing 'Unhandled Runtime Error TypeError: event is undefined'"

Today I encountered this error: Unhandled Runtime Error TypeError: event is undefined and couldn't find a solution online Here's the code snippet: import { ethers } from 'ethers' import { create as ipfsHttpClient } from 'ipfs-h ...

What is the best way to incorporate bullet points into a textarea?

How can I make a bullet point appear when pressing the 'enter' button inside a textarea? I tried using this code, but it doesn't seem to work. Any suggestions? <script> $(".todolist").focus(function() { if(document.getElementById( ...

Ways to troubleshoot and fix the problem of encountering an "Internal Server Error" when sending emails with nodeMailer in node.js

When attempting to send a confirmation email using nodemailer, I encountered an internet server error in production when allowing insecure apps for Gmail accounts, although it works fine locally. Any suggestions on how to resolve this issue? router.post(& ...

What is the process for choosing and making changes to a specific portion of a textContent?

<h1 id="block ">This is my header block</h1> To dynamically change the color of the "block" word every 2 seconds using JavaScript: let colors = ["blue", "green", "pink", "purple"]; let curColor = 0; const changeColor = () => { ...

Troubleshooting Problem with CSS Background-Image in Safari

These questions have been popping up all over the web with little response. I've added some CSS in jQuery like this: $('#object').css('background-image', 'url(../../Content/Images/green-tick.png)'); This works in all b ...

Navigating Users and Routing with Ionic Framework (AngularJS)

Currently, I am using Ionic for a new project and could use some guidance with routing (I'm relatively new to Angular). These are the states I have defined: $stateProvider.state('map', { url: '/map', views: { map: ...

Steps for releasing a third-party library that is compatible with both Angular 2 and Angular 4

Currently, I am utilizing a third-party library for Angular that is compatible with Angular 2. However, I want to make sure this library can support all versions of Angular, including Angular 4 and Angular 5. How can I go about publishing an updated vers ...

There seems to be an issue with the post request to a PHP file as it is returning a null value when

I have been struggling with this issue for a while now and can't seem to understand why I keep getting null after calling my $.ajax function. I pass an associative array containing the method name, then invoke the method in PHP to return a JSON string ...

While using jQuery, it was discovered that the name attribute could be changed within the .each() function when working in console.log. However

I'm attempting to modify the name attribute of a cloned table row with the following code: var ipCount = 2; $("#input_form").on("click", "#add_input_param", function() { $('#input_param tr').eq(1).clone().find('input').val ...

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

Hey there! I've encountered an issue with vscode where it highlights valid code in red when using the union operator '??' or optional chaining '?.'. The code still builds without errors, but vscode displays a hover error message st ...

WebPack bundling causing issues with Knockout Validation

I am developing a web application using Knockout along with the Knockout-Validation plugin, and I want to utilize WebPack for bundling. However, I encountered an issue where Knockout-Validation seems to break when incorporated with WebPack. To illustrate ...

Explore Silverlights assortment using JavaScript

I have embedded a Silverlight class into my page, and in App.xaml.cs this component is registered to allow calls to Silverlight methods from JavaScript, which is functioning correctly. However, I now want to access not just methods, but collections. For e ...