Project1

标题: mv如何使用three.js? [打印本页]

---

作者: 汪汪    时间: 2015-12-23 10:59
标题: mv如何使用three.js?


如题,

参考 live2d的那个试了试,结果只能获得一个静态的图......
如何让它动起来呢?

原始的
http://www.hewebgl.com/article/getarticle/50

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
参考live2d那个.修改成的
https://rpg.blue/forum.php?mod=viewthread&tid=385505
function L2d_Sprite(){
        this.initialize.apply(this, arguments);
}

/**
* RMMV Live2D Sprite 物件
*/

L2d_Sprite.prototype = Object.create(PIXI.Sprite.prototype);
L2d_Sprite.prototype.constructor = L2d_Sprite;
L2d_Sprite.prototype.initialize = function() {

    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ alpha:true, });
    this.renderer.setSize(300, 300);
    this.geometry = new THREE.CubeGeometry(1,1,1);
    this.material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    this.cube = new THREE.Mesh(this.geometry, this.material);
    this.scene.add(this.cube);
    this.camera.position.z = 5;
        var texture=new PIXI.Texture.fromCanvas(this.renderer.domElement);
        PIXI.Sprite.call(this, texture);
}










已自己解决.....


function T3_Sprite(){
        this.initialize.apply(this, arguments);
}
(function() {

       
T3_Sprite.prototype = Object.create(Sprite.prototype);
T3_Sprite.prototype.constructor = T3_Sprite;
T3_Sprite.prototype.initialize = function() {

    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({alpha:true});
    this.renderer.setSize(300, 300);
    this.geometry = new THREE.CubeGeometry(1,1,1);
    this.material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    this.cube = new THREE.Mesh(this.geometry, this.material);
    this.scene.add(this.cube);
    this.camera.position.z = 5;
    this.renderer.render(this.scene, this.camera);
   
    this._canvas = this.renderer.domElement

        var texture=new PIXI.Texture.fromCanvas(this._canvas)
        PIXI.Sprite.call(this, texture);

    this._bitmap = null;
    this._frame = new Rectangle();   

    this._frame.width = this._canvas.width;
    this._frame.height = this._canvas.height;

   
    this._realFrame = new Rectangle();
    this._offset = new Point();
    this._blendColor = [0, 0, 0, 0];
    this._colorTone = [0, 0, 0, 0];
    this._context = null;
    this._tintTexture = null;

    this.spriteId = Sprite._counter++;
    this.opaque = false;


        this.requestID
    this.updateAnimation()
}







T3_Sprite.prototype.stopAnimation =function () {
         var cancelAnimationFrame =
            window.cancelAnimationFrame ||
            window.mozCancelAnimationFrame;
        //取消动画帧
        cancelAnimationFrame(this.requestID);
       
}




T3_Sprite.prototype.updateAnimation =function () {
        this.cube.rotation.x += 100;
    this.renderer.render(this.scene, this.camera)
    this.texture.baseTexture =new PIXI.BaseTexture(this._canvas);
        
        var requestAnimationFrame =
                     window.requestAnimationFrame ||
                     window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;
        this.requestID = requestAnimationFrame( this.updateAnimation.bind(this))
}



Object.defineProperty(T3_Sprite.prototype, 'bitmap', {
    configurable: false
});



})();

---

欢迎光临 Project1 (https://rpg.blue/)

Powered by Discuz! X3.1