How to call .render and .animate functions inside object class?

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/44284456/how-to-call-render-and-animate-functions-inside-object-class

标签

javascript

three.js