const node0 = [-100, -100, -100]; const node1 = [-100, -100, 100]; const node2 = [-100, 100, -100]; const node3 = [-100, 100, 100]; const node4 = [ 100, -100, -100]; const node5 = [ 100, -100, 100]; const node6 = [ 100, 100, -100]; const node7 = [ 100, 100, 100]; const nodes = [node0, node1, node2, node3, node4, node5, node6, node7]; const edge0 = [0, 1]; const edge1 = [1, 3]; const edge2 = [3, 2]; const edge3 = [2, 0]; const edge4 = [4, 5]; const edge5 = [5, 7]; const edge6 = [7, 6]; const edge7 = [6, 4]; const edge8 = [0, 4]; const edge9 = [1, 5]; const edge10 = [2, 6]; const edge11 = [3, 7]; const edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11]; const t = { x: -0.03490658503988659, y: 0.05235987755982989, z: -0.05235987755982989 }; class Example extends Phaser.Scene { graphics; create () { this.graphics = this.add.graphics({x: 400, y: 300}); this.rotateZ3D(0.5235987755982988); this.rotateY3D(0.5235987755982988); this.rotateX3D(0.5235987755982988); this.tweens.add({ targets: [t], duration: 6000, x: 0.03490658503988659, ease: Phaser.Math.Easing.Sine.InOut, yoyo: true, repeat: -1, }); this.tweens.add({ targets: [t], duration: 4000, y: -0.05235987755982989, ease: Phaser.Math.Easing.Sine.InOut, yoyo: true, repeat: -1, }); this.tweens.add({ targets: [t], duration: 4000, z: 0.05235987755982989, ease: Phaser.Math.Easing.Sine.InOut, yoyo: true, repeat: -1, }); } update () { this.rotateX3D(t.x); this.rotateY3D(t.y); this.rotateZ3D(t.z); this.graphics.clear(); this.graphics.lineStyle(2, 0x00ff00, 1.0); this.graphics.beginPath(); for (let e = 0; e < edges.length; e++) { const n0 = edges[e][0]; const n1 = edges[e][1]; const node0 = nodes[n0]; const node1 = nodes[n1]; this.graphics.moveTo(node0[0], node0[1]); this.graphics.lineTo(node1[0], node1[1]); } this.graphics.closePath(); this.graphics.strokePath(); } rotateZ3D (theta) { const ts = Math.sin(theta); const tc = Math.cos(theta); for (let n = 0; n < nodes.length; n++) { const node = nodes[n]; const x = node[0]; const y = node[1]; node[0] = x * tc - y * ts; node[1] = y * tc + x * ts; } } rotateY3D (theta) { const ts = Math.sin(theta); const tc = Math.cos(theta); for (let n = 0; n < nodes.length; n++) { const node = nodes[n]; const x = node[0]; const z = node[2]; node[0] = x * tc - z * ts; node[2] = z * tc + x * ts; } } rotateX3D (theta) { const ts = Math.sin(theta); const tc = Math.cos(theta); for (let n = 0; n < nodes.length; n++) { const node = nodes[n]; const y = node[1]; const z = node[2]; node[1] = y * tc - z * ts; node[2] = z * tc + y * ts; } } } const config = { type: Phaser.WEBGL, width: 800, height: 600, parent: 'phaser-example', scene: Example }; const game = new Phaser.Game(config);
Scan to open on your mobile device
const node0 = [-100, -100, -100]; const node1 = [-100, -100, 100]; const node2 = [-100, 100, -100]; const node3 = [-100, 100, 100]; const node4 = [ 100, -100, -100]; const node5 = [ 100, -100, 100]; const node6 = [ 100, 100, -100]; const node7 = [ 100, 100, 100]; const nodes = [node0, node1, node2, node3, node4, node5, node6, node7]; const edge0 = [0, 1]; const edge1 = [1, 3]; const edge2 = [3, 2]; const edge3 = [2, 0]; const edge4 = [4, 5]; const edge5 = [5, 7]; const edge6 = [7, 6]; const edge7 = [6, 4]; const edge8 = [0, 4]; const edge9 = [1, 5]; const edge10 = [2, 6]; const edge11 = [3, 7]; const edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11]; const t = { x: -0.03490658503988659, y: 0.05235987755982989, z: -0.05235987755982989 }; class Example extends Phaser.Scene { graphics; create () { this.graphics = this.add.graphics({x: 400, y: 300}); this.rotateZ3D(0.5235987755982988); this.rotateY3D(0.5235987755982988); this.rotateX3D(0.5235987755982988); this.tweens.add({ targets: [t], duration: 6000, x: 0.03490658503988659, ease: Phaser.Math.Easing.Sine.InOut, yoyo: true, repeat: -1, }); this.tweens.add({ targets: [t], duration: 4000, y: -0.05235987755982989, ease: Phaser.Math.Easing.Sine.InOut, yoyo: true, repeat: -1, }); this.tweens.add({ targets: [t], duration: 4000, z: 0.05235987755982989, ease: Phaser.Math.Easing.Sine.InOut, yoyo: true, repeat: -1, }); } update () { this.rotateX3D(t.x); this.rotateY3D(t.y); this.rotateZ3D(t.z); this.graphics.clear(); this.graphics.lineStyle(2, 0x00ff00, 1.0); this.graphics.beginPath(); for (let e = 0; e < edges.length; e++) { const n0 = edges[e][0]; const n1 = edges[e][1]; const node0 = nodes[n0]; const node1 = nodes[n1]; this.graphics.moveTo(node0[0], node0[1]); this.graphics.lineTo(node1[0], node1[1]); } this.graphics.closePath(); this.graphics.strokePath(); } rotateZ3D (theta) { const ts = Math.sin(theta); const tc = Math.cos(theta); for (let n = 0; n < nodes.length; n++) { const node = nodes[n]; const x = node[0]; const y = node[1]; node[0] = x * tc - y * ts; node[1] = y * tc + x * ts; } } rotateY3D (theta) { const ts = Math.sin(theta); const tc = Math.cos(theta); for (let n = 0; n < nodes.length; n++) { const node = nodes[n]; const x = node[0]; const z = node[2]; node[0] = x * tc - z * ts; node[2] = z * tc + x * ts; } } rotateX3D (theta) { const ts = Math.sin(theta); const tc = Math.cos(theta); for (let n = 0; n < nodes.length; n++) { const node = nodes[n]; const y = node[1]; const z = node[2]; node[1] = y * tc - z * ts; node[2] = z * tc + y * ts; } } } const config = { type: Phaser.WEBGL, width: 800, height: 600, parent: 'phaser-example', scene: Example }; const game = new Phaser.Game(config);