JavaScript
class Animator {
constructor(frame_set, delay) {
this.count = 0;
this.delay = delay;
this.frame_set = frame_set;// animation frames
this.frame_index = 0;// playhead
this.frame_value = frame_set[0];// current frame
}
animate() {
this.count ++;
if (this.count > this.delay) {
this.count = 0;
this.frame_index = (this.frame_index == this.frame_set.length - 1) ? 0 : this.frame_index + 1;
this.frame_value = this.frame_set[this.frame_index];
}
}
}
let camera, scene, renderer, clock, spritesheet,map,map_columns,map_rows;
const cols = 8; // amount of columns
const rows = 3; // amount of rows
const totalCount = 24; // amount of images of sprite sheet
const fps = 1; // how many images are shown per second
init();
animate();
function init() {
map = [ 6, 0,22, 8, 8,21, 1, 5, 0,22,
20,14,21, 8, 8,21, 8,12, 7,22,
21,22,21, 8, 8,22, 8,19,14,21,
0, 1, 5,15,15, 0, 8,21,22,22,
7, 8,12,13,13, 7, 8,22, 1, 1,
14, 8,12,13,13, 7, 8,21, 8, 8,
22, 8,19,20,20,14, 8,21, 8, 8,
21, 8,21,22,21,21, 8, 5,15,15,
1, 8, 1, 5, 0,21, 8,19,20,20,
8, 8, 8,12, 7,21, 8,21,22,21];
map_columns = 10;
map_rows = 10;
tile_size = 144;
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
clock = new THREE.Clock();
const loader = new THREE.TextureLoader();
spriteSheet = loader.load( 'https://i.imgur.com/wucpG7e.png' );
spriteSheet.minFilter = THREE.LinearFilter;
spriteSheet.repeat.x = 1 / cols;
spriteSheet.repeat.y = 1 / rows;
const geometry = new THREE.PlaneBufferGeometry();
const material = new THREE.MeshBasicMaterial( { map: spriteSheet } );
console.log(material);
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer(...