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/v355'); 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/v355');
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];
}
}