2

It's my 7th day of searching for an answer. I want to write a simple game and I want to call for an Object.

My thinking is that I want a modular game, so I invoke scene and all that the usual way:

main.js:

var scene, controls, camera, renderer;
var SCREEN_WIDTH, SCREEN_HEIGHT;
.....

var thing;

init();
animate();

function init() {
    .....
    thing = new Player();
    .....
}


function animate() {
    .....
}

function render() {
    ......
}

and then I have my ( lets say it's-> ) Player.js class:

function Player() {
    var bobby;
    this.loader = new THREE.JSONLoader();

    this.loader.load(

        'obj/models/minecraft_sole.json',
        function ( geometry, materials ) {

            var material = new THREE.MultiMaterial( materials );
            var bobby = new THREE.Mesh( geometry, material );
            bobby.position.set(0, 0, 0);

            bobby.castShadow = true;
            bobby.receiveShadow = false;

            scene.add( bobby );

        }
    );

}

Player.prototype.animate = function() {

    this.bobby.rotation.y -= 0.5;

}

In the first batch of code I call for a new object:

thing = new Player();

And so everything works like a charm - the model loads, its' textures load and all that stuff, BUT - and this is what I can't figure out:

In the Player class I want to define the render() and animate() methods/functions for my Player Object, so that when I finally call my Player OBJECT in the main file ( main.js ) I want it to appear on the scene and animate according to their inner loop/render/animate methods.

PLEASE HELP and tell me the proper way of creating new Object with all of it's properties.

Tomasz Drozdowski
  • 43
  • 2
  • 12
  • It looks like you've already made it so that calling `new Player();` will add it to the scene. So in your `animate` loop, just call `thing.animate();` before calling `render();`. If this doesn't have the effect you're looking for, please describe which step isn't working. Is the player not appearing in the scene? is it not animating? Are there console errors? – TheJim01 May 31 '17 at 16:06
  • The are no errors. The Player indeed is invoking correctly, but then I have to add thing.animate() in main animate(){} in the mains.js, I wonder if there is a way to call animate() inside Player.js file. The effect I'm looking for is that after invoking Player() Object the information about how the Objecj should animate is invoked alongside with Mesh.data textures/ ect. whatever is in the Object Definition/Class. – Tomasz Drozdowski May 31 '17 at 18:55
  • In the Player.js <- in the definition of Object [ mesh,textures/vertices .... ] i want to setup some kind of this.animate(){} I have no clue. – Tomasz Drozdowski May 31 '17 at 19:01

1 Answers1

3

First, this.bobby will return undefined in your animate method unless you declare it as this.bobby in your constructor:

function Player() {
    this.bobby = null; // was: var bobby;
    this.loader = new THREE.JSONLoader();

But that might not be necessary.

To have some code execute when an object is about to be rendered, you can define an onBeforeRender method for the object. The renderer.render method automatically calls onBeforeRender for each object is renders, so in your case you would define it for your this.bobby object.

(Definition: onBeforeRender( renderer, scene, camera, geometry, material, group ))

Here's an example:

function Player() {
    var bobby = null;
    this.loader = new THREE.JSONLoader();

    this.loader.load( '...',
        function ( geometry, materials ) {    
            // the rest of your code is fine
            bobby = new THREE.Mesh(...);
            bobby.onBeforeRender = function(){
                // note that in this callback, "this" now refers to the "bobby" object
                this.rotation.y -= 0.5;
            };
        }
    );    
}

This has room to be optimized, but I'll leave that up to you.

TheJim01
  • 8,411
  • 1
  • 30
  • 54