Build games as easily as you play them — join the Phaser Beam waitlist for Early Access.
                
            
            class DemoD extends Phaser.Scene { constructor () { super({ key: 'DemoD', active: true }); this.graphics; this.t = { x: -0.03490658503988659, y: 0.03490658503988659, z: -0.03490658503988659 }; this.modelData = {}; this.objects = []; } preload () { this.load.setBaseURL('https://cdn.phaserfiles.com/v385'); this.load.text('bevelledcube', 'assets/text/bevelledcube.obj'); this.load.text('computer', 'assets/text/computer.obj'); this.load.text('geosphere', 'assets/text/geosphere.obj'); this.load.text('spike', 'assets/text/spike.obj'); this.load.text('torus', 'assets/text/torus.obj'); } create () { this.parseObj('bevelledcube'); this.parseObj('computer'); this.parseObj('geosphere'); this.parseObj('spike'); this.parseObj('torus'); this.graphics = this.add.graphics(); this.camera = { x: 400, y: 340 }; var b = this.addObject('bevelledcube', -200, -200, 0); var g = this.addObject('geosphere', 200, -200, 0); g.color = 0x00ffff; var t = this.addObject('torus', -200, 100, 0); t.color = 0xff00ff; t.scale = 200; var c = this.addObject('computer', 200, 100, 0); c.color = 0xffff00; this.tweens.add({ targets: t, duration: 2000, scale: 10, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); this.tweens.add({ targets: c, duration: 4000, scale: 10, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); var cam = this.cameras.main; cam.x = 800; cam.y = 600; } update () { this.graphics.clear(); for (var i = 0; i < this.objects.length; i++) { this.objects[i].rotateX(0.01); this.objects[i].rotateY(0.03); this.objects[i].rotateZ(0.01); this.objects[i].render(this.graphics); } } addObject (key, x, y, z) { var model = new Obj3D(this.camera, this.getModel(key), x, y, z); this.objects.push(model); return model; } getModel (key) { var data = Phaser.Utils.Objects.Extend(true, this.modelData[key], {}); return data; } // Parses out tris and quads from the obj file parseObj (key) { var text = this.cache.text.get(key); var verts = []; var faces = []; // split the text into lines var lines = text.replace('\r', '').split('\n'); var count = lines.length; for (var i = 0; i < count; i++) { var line = lines[i]; if (line[0] === 'v') { // lines that start with 'v' are vertices var tokens = line.split(' '); verts.push({ x: parseFloat(tokens[1]), y: parseFloat(tokens[2]), z: parseFloat(tokens[3]) }); } else if (line[0] === 'f') { // lines that start with 'f' are faces var tokens = line.split(' '); var face = [ parseInt(tokens[1], 10), parseInt(tokens[2], 10), parseInt(tokens[3], 10), parseInt(tokens[4], 10) ]; faces.push(face); if (face[0] < 0) { face[0] = verts.length + face[0]; } if (face[1] < 0) { face[1] = verts.length + face[1]; } if (face[2] < 0) { face[2] = verts.length + face[2]; } if (!face[3]) { face[3] = face[2]; } else if (face[3] < 0) { face[3] = verts.length + face[3]; } } } this.modelData[key] = { verts: verts, faces: faces }; return this.modelData[key]; } }
class DemoD extends Phaser.Scene
{
    constructor ()
    {
        super({ key: 'DemoD', active: true });
        this.graphics;
        this.t = {
            x: -0.03490658503988659,
            y: 0.03490658503988659,
            z: -0.03490658503988659
        };
        this.modelData = {};
        this.objects = [];
    }
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
        this.load.text('bevelledcube', 'assets/text/bevelledcube.obj');
        this.load.text('computer', 'assets/text/computer.obj');
        this.load.text('geosphere', 'assets/text/geosphere.obj');
        this.load.text('spike', 'assets/text/spike.obj');
        this.load.text('torus', 'assets/text/torus.obj');
    }
    create ()
    {
        this.parseObj('bevelledcube');
        this.parseObj('computer');
        this.parseObj('geosphere');
        this.parseObj('spike');
        this.parseObj('torus');
        this.graphics = this.add.graphics();
        this.camera = {
            x: 400,
            y: 340
        };
        var b = this.addObject('bevelledcube', -200, -200, 0);
        var g = this.addObject('geosphere', 200, -200, 0);
        g.color = 0x00ffff;
        var t = this.addObject('torus', -200, 100, 0);
        t.color = 0xff00ff;
        t.scale = 200;
        var c = this.addObject('computer', 200, 100, 0);
        c.color = 0xffff00;
        this.tweens.add({
            targets: t,
            duration: 2000,
            scale: 10,
            ease: 'Sine.easeInOut',
            repeat: -1,
            yoyo: true
        });
        this.tweens.add({
            targets: c,
            duration: 4000,
            scale: 10,
            ease: 'Sine.easeInOut',
            repeat: -1,
            yoyo: true
        });
        var cam = this.cameras.main;
        cam.x = 800;
        cam.y = 600;
    }
    update ()
    {
        this.graphics.clear();
        for (var i = 0; i < this.objects.length; i++)
        {
            this.objects[i].rotateX(0.01);
            this.objects[i].rotateY(0.03);
            this.objects[i].rotateZ(0.01);
            this.objects[i].render(this.graphics);
        }
    }
    addObject (key, x, y, z)
    {
        var model = new Obj3D(this.camera, this.getModel(key), x, y, z);
        this.objects.push(model);
        return model;
    }
    getModel (key)
    {
        var data = Phaser.Utils.Objects.Extend(true, this.modelData[key], {});
        return data;
    }
    //  Parses out tris and quads from the obj file
    parseObj (key)
    {
        var text = this.cache.text.get(key);
        var verts = [];
        var faces = [];
        // split the text into lines
        var lines = text.replace('\r', '').split('\n');
        var count = lines.length;
        for (var i = 0; i < count; i++)
        {
            var line = lines[i];
            if (line[0] === 'v')
            {
                // lines that start with 'v' are vertices
                var tokens = line.split(' ');
                verts.push({
                    x: parseFloat(tokens[1]),
                    y: parseFloat(tokens[2]),
                    z: parseFloat(tokens[3])
                });
            }
            else if (line[0] === 'f')
            {
                // lines that start with 'f' are faces
                var tokens = line.split(' ');
                var face = [
                    parseInt(tokens[1], 10),
                    parseInt(tokens[2], 10),
                    parseInt(tokens[3], 10),
                    parseInt(tokens[4], 10)
                ];
                faces.push(face);
                if (face[0] < 0)
                {
                    face[0] = verts.length + face[0];
                }
                if (face[1] < 0)
                {
                    face[1] = verts.length + face[1];
                }
                if (face[2] < 0)
                {
                    face[2] = verts.length + face[2];
                }
                if (!face[3])
                {
                    face[3] = face[2];
                }
                else if (face[3] < 0)
                {
                    face[3] = verts.length + face[3];
                }
            }
        }
        this.modelData[key] = {
            verts: verts,
            faces: faces
        };
        return this.modelData[key];
    }
}