Low Poly Three.js Mountain Scene

index.html

<div id="threejs">

Low Poly Three.js Mountain Scene.markdown

Low Poly Three.js Mountain Scene

Followed a tutorial recently on using Blender to create a low poly mountain landscape. Decided to export the mesh data and create a Three.js scene out of it.

Tutorial http://cgi.tutsplus.com/tutorials/secrets-to-creating-low-poly-illustrations-in-blender--cg-31770

Three.js Exporter for Blender https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

Boilerplate Three.js code from http://codepen.io/alaingalvan/pen/aJvrB

A Pen by Benjamin Miles on CodePen.

License.

script.js

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/THREEx.WindowResize.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150586/OrbitControls.js"></script>

style.css

html, body
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  overflow: hidden
  background: #111