THREE.js Texture Animation

r111

THREE.js 에서는 애니메이션 GIF 파일을 텍스쳐로 사용할수 없습니다.

구글링을 통해 텍스쳐를 애니메이션 GIF 파일처럼 적용하는 소스를 발견하여
이곳에 소개해 봅니다.

function TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) 
{	
	// note: texture passed by reference, will be updated by the update function.
		
	this.tilesHorizontal = tilesHoriz;
	this.tilesVertical = tilesVert;
	// how many images does this spritesheet contain?
	//  usually equals tilesHoriz * tilesVert, but not necessarily,
	//  if there at blank tiles at the bottom of the spritesheet. 
	this.numberOfTiles = numTiles;
	texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
	texture.repeat.set( 1 / this.tilesHorizontal, 1 / this.tilesVertical );

	// how long should each image be displayed?
	this.tileDisplayDuration = tileDispDuration;

	// how long has the current image been displayed?
	this.currentDisplayTime = 0;

	// which image is currently being displayed?
	this.currentTile = 0;
		
	this.update = function( milliSec )
	{
		this.currentDisplayTime += milliSec;
		while (this.currentDisplayTime > this.tileDisplayDuration)
		{
			this.currentDisplayTime -= this.tileDisplayDuration;
			this.currentTile++;
			if (this.currentTile == this.numberOfTiles)
				this.currentTile = 0;
			var currentColumn = this.currentTile % this.tilesHorizontal;
			texture.offset.x = currentColumn / this.tilesHorizontal;
			var currentRow = Math.floor( this.currentTile / this.tilesHorizontal );
			texture.offset.y = currentRow / this.tilesVertical;
		}
	};
}

소스출처 : http://stemkoski.github.io/Three.js/Texture-Animation.html

Texture Animation (Three.js)

 

TextureAnimator() 사용법

1. 애니메이션 스프라이트 이미지파일을 만듭니다.

- THREE.js 에서는 이미지 파일을 사용할때 가로/세로의 비율을 동일 하거나 2배수로 할것을 권장합니다.

 

2. 오브젝트에 텍스쳐 이미지를 등록 합니다.

- 기존의 일반 텍스쳐이미지 등록과 같습니다.

var 스프라이트텍스쳐 = new THREE.TextureLoader().load( image-url );

var 박스 = new THREE.Mesh(
  new THREE.BoxBufferGeometry(1,1,1),
  new THREE.MeshBasicMaterial({ map: 스프라이트텍스쳐 })
);

장면.add(박스);

 

3. 읽어들인 스프라이트 이미지를 재료로 하는 애니매이션 객체를 생성합니다.

var 스프라이트애니 = new TextureAnimator(
  스프라이트텍스쳐, // 스프라이트 텍스쳐 객체 지정
  8, // 가로 갯수
  8, // 세로 갯수
  63, // 총 갯수
  50 // 이미지컷당 변경 시간간격(1000분의 1초)
);

- 1번의 예제 이미지 파일의 경우 가로 8칸, 세로 8칸, 총 이미지컷 수는 63개 입니다.
- 이미지의 순서는 왼쪽 아래부터 오른쪽으로 순서대로 전환됩니다.

 

4. 애니메이션 업데이트

var clock = new THREE.Clock();
var delta = clock.getDelta(); 

스프라이트애니.update(1000 * delta);
// 1000 * delta : 미세한 프레임의 지연값 보정

- 애니메이션 객체는 .update() 함수를 실행할때만 갱신 됩니다.
- 필요에 따라 별도의 함수, 또는 전반적인 렌더링 함수안(보통 animate())에 포함시켜 줍니다.
- 위에서 지연값을 보정하기 위한 Clock() 과 getDelta() 에 대한 자세한 사항은 THREE.Clock 을 참조하세요.

 

See the Pen TextureAnimator by Ricon Kim (@vitneum) on CodePen.