s-shin/three.msm.coffee

## three.msm.coffee
###
three.msm.js - Micro Scene Manager for Three.js
Version 0.1.0
(C) 2013 Shintaro Seki
MIT License
###

# Usage? Let's read the code below!

@MSM = MSM = {}


class MSM.Game

	constructor: (@canvas, @fps=60, @width=null, @height=null) ->
		@frameCount = 0
		@frameSpan = 1000 / @fps # [ms]
		@renderer = new THREE.WebGLRenderer {canvas: @canvas}
		@width ?= @canvas.width
		@height ?= @canvas.height
		@renderer.setSize @width, @height
		@renderer.setClearColor 0xFFFFFF, 1
		@renderer.autoClear = false
		@isRunning_ = false;

	start: ->
		console.assert not @isRunning_
		@isRunning_ = true
		past = Date.now()
		requestAnimationFrame mainLoop = =>
			return unless @isRunning_
			# loop
			requestAnimationFrame mainLoop
			# adjust frame rate
			now = Date.now()
			return if now - past < @frameSpan
			past = now
			# update and render
			@frameCount++
			result = @currentScene.update()
			@renderer.clear()
			@renderer.render sc... for sc in result
			null
		@

	stop: -> @isRunning_ = false; @

	isRunning: -> @isRunning_

	setScene: (sceneClassOrInstance) ->
		if sceneClassOrInstance instanceof MSM.Scene
			@currentScene = sceneClassOrInstance
		else
			@currentScene = new sceneClassOrInstance @
		@


class MSM.Scene
	constructor: (@game) ->
	update: -> [] # [[THREE.Scene, THREE.Camera], ...]


## ~example.html
<!DOCTYPE html>
<head>
	<title>example</title>
	<style>
html, body { height: 100%; }
body { margin: 0px; padding: 0px; background-color: #000; text-align: center; }
canvas { height: 100%; vertical-align: middle; }
	</style>
</head>
<body>
	<canvas></canvas>
	<script src="js/coffee-script.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/three.msm.js"></script>
	<script type="text/coffeescript">
window.addEventListener "load", ->
	class Scene extends MSM.Scene
		constructor: (@game) ->
			@scene = new THREE.Scene
			@camera = new THREE.PerspectiveCamera \
				60, @game.width/@game.height, 0.001, 1000
			@camera.position.set 0, 0, 5

			light = new THREE.DirectionalLight 0xFFFFFF
			light.position.set 1, 1, 1
			@scene.add light

			@obj = new THREE.Mesh \
				new THREE.CubeGeometry(1, 1, 1),
				new THREE.MeshLambertMaterial({ambient: 0xFFFFFF})
			@scene.add @obj

		update: ->
			@obj.rotation.y += THREE.Math.degToRad(360 / (@game.fps * 10))
			[[@scene, @camera]]

	game = new MSM.Game document.getElementsByTagName("canvas")[0], 5, 640, 480
	game.setScene(Scene).start()
	</script>
</body>
	###
	three.msm.js - Micro Scene Manager for Three.js
	Version 0.1.0
	(C) 2013 Shintaro Seki
	MIT License
	###

	# Usage? Let's read the code below!

	@MSM = MSM = {}


	class MSM.Game

	constructor: (@canvas, @fps=60, @width=null, @height=null) ->
	@frameCount = 0
	@frameSpan = 1000 / @fps # [ms]
	@renderer = new THREE.WebGLRenderer {canvas: @canvas}
	@width ?= @canvas.width
	@height ?= @canvas.height
	@renderer.setSize @width, @height
	@renderer.setClearColor 0xFFFFFF, 1
	@renderer.autoClear = false
	@isRunning_ = false;

	start: ->
	console.assert not @isRunning_
	@isRunning_ = true
	past = Date.now()
	requestAnimationFrame mainLoop = =>
	return unless @isRunning_
	# loop
	requestAnimationFrame mainLoop
	# adjust frame rate
	now = Date.now()
	return if now - past < @frameSpan
	past = now
	# update and render
	@frameCount++
	result = @currentScene.update()
	@renderer.clear()
	@renderer.render sc... for sc in result
	null
	@

	stop: -> @isRunning_ = false; @

	isRunning: -> @isRunning_

	setScene: (sceneClassOrInstance) ->
	if sceneClassOrInstance instanceof MSM.Scene
	@currentScene = sceneClassOrInstance
	else
	@currentScene = new sceneClassOrInstance @
	@


	class MSM.Scene
	constructor: (@game) ->
	update: -> [] # [[THREE.Scene, THREE.Camera], ...]
	<!DOCTYPE html>
	<head>
	<title>example</title>
	<style>
	html, body { height: 100%; }
	body { margin: 0px; padding: 0px; background-color: #000; text-align: center; }
	canvas { height: 100%; vertical-align: middle; }
	</style>
	</head>
	<body>
	<canvas></canvas>
	<script src="js/coffee-script.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/three.msm.js"></script>
	<script type="text/coffeescript">
	window.addEventListener "load", ->
	class Scene extends MSM.Scene
	constructor: (@game) ->
	@scene = new THREE.Scene
	@camera = new THREE.PerspectiveCamera \
	60, @game.width/@game.height, 0.001, 1000
	@camera.position.set 0, 0, 5

	light = new THREE.DirectionalLight 0xFFFFFF
	light.position.set 1, 1, 1
	@scene.add light

	@obj = new THREE.Mesh \
	new THREE.CubeGeometry(1, 1, 1),
	new THREE.MeshLambertMaterial({ambient: 0xFFFFFF})
	@scene.add @obj

	update: ->
	@obj.rotation.y += THREE.Math.degToRad(360 / (@game.fps * 10))
	[[@scene, @camera]]

	game = new MSM.Game document.getElementsByTagName("canvas")[0], 5, 640, 480
	game.setScene(Scene).start()
	</script>
	</body>