-
-
Save rehno-lindeque/549072 to your computer and use it in GitHub Desktop.
CoffeeScript version of the JSON scene definition for SceneJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
### | |
A teapot with an orbiting directional light source that you can rotate with the mouse. | |
The white dot is not the actual position of the light - it just indicates its direction | |
relative to the teapot. | |
Lindsay S. Kay, (CoffeeScript port by Rehno Lindeque) | |
lindsay.kay@xeolabs.com | |
### | |
exampleScene = | |
SceneJS.createNode( | |
type: "scene" | |
cfg: | |
canvasId: "theCanvas" # Bind scene to a WebGL canvas: | |
loggingElementId: "theLoggingDiv" # Bind to logging DIV | |
nodes: [ | |
type: "renderer", | |
cfg: | |
clear: { depth: true, color: true } | |
viewport: { x: 1, y: 1, width: 600, height: 600 } | |
clearColor: { r: 0.0, g: 0.0, b: 0.0 } | |
enableTexture2D: true | |
nodes: [ | |
type: "lookat", | |
cfg: | |
eye: { x: 0.0, y: 10.0, z: -35.0 } | |
look: { y: 1.0 } | |
up: { y: 1.0 } | |
nodes: [ | |
type: "camera" | |
cfg: | |
optics: | |
type: "perspective" | |
fovy: 55.0 | |
aspect: 1.0 | |
near: 0.10 | |
far: 300.0 | |
nodes: [ | |
# Our animated light source is rotated using a Quaternion node which | |
# receives rotation updates through configs injected into the scene when | |
# it is rendered | |
type:"quaternion" | |
sid: "myQuaternion" | |
nodes: [ | |
type:"lights" | |
cfg: | |
sources: | |
type: "dir" | |
color: { r: 1.0, g: 1.0, b: 0.0 } # Colour of our light | |
# Our light will contribute to both the quantities of | |
# specular and diffuse light that will hit our teapot. | |
diffuse: true | |
specular: true | |
# The directional lights direction, a vector from the | |
# origin of this coordinate system (which is in this | |
# case the view coordinate system, since our light is | |
# not within any no modelling transform nodes). | |
# The direction vector is calculated by mouse handlers and | |
# injected into the scenes render method. | |
dir: { x: 0, y: 0, z: -1.0 } | |
# Note the absence of attenuation properties; | |
# unlike a point light, a directional light has no | |
# position, and is therefore not subject to attenuation | |
# since it is at an infinite distance. | |
] | |
nodes: [ | |
# A sphere that marks the lights direction - not the focus | |
# of this example | |
type: "translate" | |
cfg: { z: -10 } | |
nodes: [ | |
type: "material" | |
cfg: | |
baseColor: { r: 0.6, g: 0.6, b: 0.6 } | |
specularColor: { r: 0.9, g: 0.9, b: 0.9 } | |
emit: 0.5 | |
specular: 0.9 | |
shine: 6.0 | |
nodes: [ | |
type: "scale" | |
cfg: { x:0.5, y: 0.5, z: 0.5 } | |
nodes: [ | |
type: "sphere" | |
] | |
] | |
] | |
] | |
] | |
# Teapot, rotated and scaled into position within model-space, coloured | |
# with some material properties | |
type: "rotate" | |
cfg: { angle: -20, x : 1.0 } | |
nodes: [ | |
type: "rotate" | |
cfg: { angle: 30.0, y : 1.0 } | |
nodes: [ | |
type: "scale" | |
cfg: { x: 2, y: 2, z: 2 } | |
nodes: [ | |
type: "material" | |
cfg: | |
baseColor: { r: 0.9, g: 0.2, b: 0.2 } | |
specularColor: { r: 0.9, g: 0.9, b: 0.2 } | |
emit: 0.0 | |
specular: 0.9 | |
shine: 6.0 | |
nodes: [ | |
type: "teapot" | |
] | |
] | |
] | |
] | |
] | |
] | |
] | |
) | |
### | |
Scene rendering loop and mouse handler stuff | |
### | |
rotx = 0 | |
roty = 0 | |
lastX = 0 | |
lastY = 0 | |
dragging = false | |
# Throw the switch, Igor! | |
# We render the scene. | |
exampleScene.render() | |
# Always get canvas from scene - it will try to bind to a default canvas | |
# can't find the one specified | |
canvas = document.getElementById exampleScene.getCanvasId() | |
mouseDown = (event) -> | |
lastX = event.clientX | |
lastY = event.clientY | |
dragging = true | |
mouseUp = () -> | |
dragging = false; | |
# On a mouse drag, we'll re-render the scene, passing in | |
# incremented angles in each time. | |
mouseMove = (event) -> | |
if dragging | |
roty = event.clientX - lastX | |
rotx = -(event.clientY - lastY) | |
if Math.abs(roty) > Math.abs(rotx) | |
exampleScene.setConfigs( | |
"#myQuaternion": | |
"+rotation": # Maps to Quaternion#addRotation({ y: 1, angle: roty }) | |
y: 1 | |
angle: roty | |
).render() | |
else | |
exampleScene.setConfigs( | |
"#myQuaternion": | |
"+rotation": # Maps to Quaternion#addRotation({ x: 1, angle: rotx }) | |
x: 1 | |
angle: rotx | |
).render() | |
lastX = event.clientX | |
lastY = event.clientY | |
canvas.addEventListener("mousedown", mouseDown, true) | |
canvas.addEventListener("mousemove", mouseMove, true) | |
canvas.addEventListener("mouseup", mouseUp, true) | |
SceneJS.addListener("error", (e) -> alert(e.exception.message)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment