<div id="threejs">
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-19784624-1', 'auto');
  ga('send', 'pageview');

</script>
html, body
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  overflow: hidden
  background: #111
View Compiled
#Variables
scene = undefined
camera = undefined
renderer = undefined
container = undefined
controls = undefined
clock = undefined
mesh = undefined
rotate = true

#Scene Start
start = ->
  scene = new THREE.Scene
  VIEW_ANGLE = 45
  NEAR = 0.1
  FAR = 10000
  SCREEN_WIDTH = window.innerWidth
  SCREEN_HEIGHT = window.innerHeight
  ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT
  #Create camera
  camera = new THREE.PerspectiveCamera VIEW_ANGLE, ASPECT, NEAR, FAR
  camera.position.set 107.82504298529939, 104.02121980722944, -114.02178601347767
  camera.rotation.set -2.4020274682629177, 0.6097939469542306, 2.6601321578044113
  camera.lookAt scene.position
  scene.add camera
  #Renderer
  renderer = new THREE.WebGLRenderer
    antialias: true
    alpha: true
  renderer.setSize SCREEN_WIDTH, SCREEN_HEIGHT
  #Window resize helper
  THREEx.WindowResize renderer, camera
  #Append Element
  container = document.getElementById('threejs')
  container.appendChild renderer.domElement
  #Add clock
  clock = new THREE.Clock
  #Orbit Controls
  controls = new THREE.OrbitControls camera, renderer.domElement

#
draw = ->
  #Add Hemisphere Light
  hemiLight = new THREE.HemisphereLight 0xffffff, 0xffffff, 0.6
  hemiLight.color.setHSL 0.6, 1, 0.6
  hemiLight.groundColor.setHSL 0.095, 1, 0.75
  hemiLight.position.set 0, 500, 0
  scene.add hemiLight

  #Add Directional light
  light = new THREE.DirectionalLight 0xffffff, 5
  light.position.set -2000, 0, -500
  light.castShadow = true
  scene.add light
  
  #Load Blender Model
  jsonLoader = new THREE.JSONLoader
  jsonLoader.load 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/mountain.js?v=2.1', addMesh

#Add a model to the scene
addMesh = (geometry, materials) ->
  material = new THREE.MeshFaceMaterial materials
  mesh = new THREE.Mesh geometry, material
  mesh.castShadow = true
  mesh.receiveShadow = true
  mesh.scale.set 12, 12, 12
  mesh.position.set 0, 0, -18
  scene.add mesh

#Animation Loop
animate = ->
  requestAnimationFrame animate
  controls.update()
  if rotate and mesh
    mesh.rotation.y += 0.2 * clock.getDelta()
  renderer.render scene, camera

#Start all the things!
start()
draw()
animate()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/THREEx.WindowResize.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/OrbitControls.js