javascript - 如何在对象类中调用 .render 和 .animate 函数？

Question

这是我寻找答案的第七天。 我想编写一个简单的游戏，并且想调用一个对象。

我的想法是我想要一个模块化游戏，所以我以通常的方式调用场景和所有这些:

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() {
    ......
}

然后我就有了我的(可以说是->)Player.js 类:

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;

}

在第一批代码中，我调用一个新对象:

thing = new Player();

所以一切都像一个魅力 - 模型加载，它的纹理加载和所有这些东西，但是 - 这是我无法弄清楚的:

在 Player 类中，我想为我的 Player 对象定义 render() 和 animate() 方法/函数，这样当我最终在主文件 ( main.js ) 中调用我的 Player OBJECT 时，我希望它出现在场景中并根据其内部循环/渲染/动画方法进行动画处理。

请帮助并告诉我创建具有所有属性的新对象的正确方法。

Answer 1

首先，this.bobby 将在您的 animate 方法中返回 undefined，除非您在构造函数中将其声明为 this.bobby:

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

但这可能没有必要。

要在对象即将渲染时执行一些代码，您可以为该对象定义一个 onBeforeRender 方法。 renderer.render 方法会自动为每个渲染对象调用 onBeforeRender ，因此在您的情况下，您将为 this.bobby 对象定义它。

(定义:onBeforeRender(渲染器、场景、相机、几何体、 Material 、组))

这是一个例子:

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

这还有优化的空间，但我会把它留给你。