三.js对象启动动画/游戏循环

three.js object starting animation/game loop

本文关键字：游戏 循环 动画 启动 js 对象      更新时间：2023-09-26

我使用angularJS和Three.js作为我的前端。

我像这样创建了我的三个.js对象：

var ThreeObject = (function() {
//constructor
function ThreeObject() {}
ThreeObject.prototype.init = functio init (){
//init scene,renderer,....
};
ThreeObject.prototype.update = function update(){
//update various objects attatched to scene
};
ThreeObject.prototype.draw = function draw(){
this.renderer.render(this.scene,this.camera);
};
return ThreeObject;
})();

在我的角度控制器中，我正在调用：

app.controller('Controller', ['$scope', '$http', function($scope,$http) {
    var foo = new ThreeObject(800,600);
    foo.init(document.getElementById('container'));
    function loop() {
        foo.update();
        foo.draw();
        requestAnimationFrame(loop);
    };
    requestAnimationFrame(loop);
 }]);

由于 angular 推广 MVC，我的第一反应是将所有三种.js行为封装到模型中。我不确定的是，这是否是正确的方法？

创建一个处理循环的指令会更好吗？这对我使用的方法有什么好处吗？

这是我使用工厂而不是指令使用 AngularJS 和 THREEjs 制作的示例。 在这个例子中，我使用的是工厂内部的渲染循环。

http://blog.tempt3d.com/2014/02/angularjs-threejs-servicefactory.html

希望这有帮助。

相关文章：