Install
npm i @ocio/three-spriteanimated
API
import SpriteAnimated from '@ocio/three-spriteanimated'
const soldier = SpriteAnimated()
Methods
.play()
.pause()
.goto(number)
.update(delta)
.addFrames({ material, framesHorizontal, framesVertical, [flipHorizontal, flipVertical, frameDisplayDuration ]})
soldier.addFrames({
material,
framesHorizontal: 30,
framesVertical: 2,
// flipHorizontal: false,
// flipVertical: false,
// frameDisplayDuration: 1000 / 30
})
.sprites
scene.add(soldier.sprites) // .sprites is a THREE.Group
.setKeyFrame(number, { onLeaveFrame })
// When the 29 frame is about to end we move to the 0 frame to generate a loop
soldier.setKeyFrame(29, {
onLeaveFrame: () => 0,
})
Quick Example
// https://www.codeandweb.com/free-sprite-sheet-packer
import * as THREE from 'three'
import SpriteAnimated from '@ocio/three-spriteanimated'
// BASIC THREE WORLD
const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
const camera = new THREE.PerspectiveCamera(
25,
window.innerWidth / window.innerHeight,
1,
999999
)
camera.position.set(5, 5, 5)
camera.lookAt(new THREE.Vector3(0, 0, 0))
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// BASIC THREE WORLD
// Importing texture
const url = 'https://i.ibb.co/k0sw5NS/60.png'
const loader = new THREE.TextureLoader()
const material = new THREE.SpriteMaterial({ map: loader.load(url) })
// Creating sprite
const soldier = SpriteAnimated()
soldier.addFrames({
material,
framesHorizontal: 30,
framesVertical: 2,
})
scene.add(soldier.sprites)
// animate
const clock = new THREE.Clock()
function animate(time) {
renderer.render(scene, camera)
requestAnimationFrame(animate)
soldier.update(clock.getDelta()) // We must update our sprite any time
}
animate()
Demos
npm run dev
Tools (Texture Packers)
https://www.codeandweb.com/free-sprite-sheet-packer https://www.codeandweb.com/texturepacker http://free-tex-packer.com/download/