PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, July 8, 2022

[FIXED] How can I use my "render" function in a different class in three.js?

 July 08, 2022     class, function, javascript, three.js     No comments   

Issue

I'm new to three.js and I am making a bowling game. But I have an issue here, I made the physics in a class and now I need to access a function from my "Application" class. I really don't get the issue here and I'm pretty lost.

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);
    }
}

Animate Function inside "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);
    }
    // I need to call render here
    //this.renderer.render(this.scene, this.camera);
}

Solution

Base class example:

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();

Passing an object to an Animation class (using static method) example:

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);



Answered By - Lee Taylor
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing