THREE.js orbitcontroll

by Thanos Saringelos

HTML

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="stage"></div>

CoffeeScript

width = 500
height = 300

scene = new THREE.Scene
geometry = new THREE.CubeGeometry 50, 50, 50
material = new THREE.MeshLambertMaterial
    color: "red"
cube = new THREE.Mesh geometry, material
cube.castShadow = true
cube.position.set 0, 0, 0
scene.add cube

sGeometry = new THREE.SphereGeometry 30
sMaterial = new THREE.MeshLambertMaterial
    color: 0x121212
sphere = new THREE.Mesh sGeometry, sMaterial
sphere.castShadow = true
sphere.position.set 100, 100, 100 

pGeometry = new THREE.PlaneGeometry 300, 300
pMaterial = new THREE.MeshLambertMaterial
    color: 0x0096d6
    side: THREE.DoubleSide
plane = new THREE.Mesh pGeometry, pMaterial
plane.receiveShadow = true
plane.position.set 0, 0, 0
plane.rotation.x = 90 * Math.PI/180 

# light
light = new THREE.DirectionalLight 0xffffff, 1
light.position.set 0, 100, 30
light.castShadow = true
scene.add light
ambient = new THREE.AmbientLight 0x550000
scene.add ambient

camera = new THREE.PerspectiveCamera 45, width / height, 1, 1000

camera.position.set 200, 300, 500
camera.lookAt cube.position

#helper
axis = new THREE.AxisHelper 1000
axis.position.set 0, 0, 0
scene.add axis


renderer = new THREE.WebGLRenderer
renderer.setSize width, height
renderer.setClearColor 0xeeeeee, 1
renderer.shadowMapEnabled = true
document.getElementById('stage').appendChild(renderer.domElement)
renderer.render scene, camera

#control
controls = new THREE.OrbitControls camera, renderer.domElement
render = ->
  requestAnimationFrame render  
  renderer.render scene, camera
  controls.update()
render()