CoffeeScript version of the JSON scene definition for SceneJS

scenejs-json-example1.coffee

###
  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))