BigFuncs coffee shaded moving ground

BigFuncs coffee shaded moving ground.markdown

BigFuncs coffee shaded moving ground

A Pen by Dealga McArdle on CodePen.

License.

script.js

# xwing located at http://codepen.io/zeffii/pen/VvbbQE

globalW = 900
globalH = 400
reamp = 165
gamp = 140
fov = 45
far = 3000
container = document.body
renderer = new THREE.WebGLRenderer({ alpha: true })
scene = new THREE.Scene()
cam = new THREE.PerspectiveCamera(fov, globalW/globalH, 1, far)
normals_material = new THREE.MeshPhongMaterial( { color: 0xe4e4e4 } )
pointLight1 = new THREE.PointLight(0xffffff, 0.3)
pointLight2 = new THREE.PointLight(0x66aaff, 0.3)
pointLight3 = new THREE.PointLight(0xffffaa, 0.4)
ambientLight = new THREE.AmbientLight(0x404040)

renderer.setClearColor( 0xffffff, 0.3)

make_object = (in_obj) ->
  
  group = new THREE.Object3D()
  geometry = new THREE.Geometry()
  geom_line = new THREE.Geometry()
  line_material = new THREE.LineBasicMaterial({color: 0x330044, linewidth: 2})
  
  # verts
  verts = in_obj.verts
  i = 0
  while i < verts.length
    geometry.vertices.push( new THREE.Vector3(verts[i], verts[i + 1], verts[i + 2]))
    i += 3

  # faces
  faces = in_obj.faces
  i = 0
  while i < faces.length
    geometry.faces.push(new THREE.Face3(faces[i], faces[i+1], faces[i+2]))
    i += 3

  geometry.computeFaceNormals()

  # make mesh obj from verts/faces
  TieFighter = new THREE.Mesh( geometry, normals_material)
  group.add(TieFighter)

  # lines / edges
  edges = in_obj.edges
  i = 0
  while i < edges.length
    vec1 = geometry.vertices[edges[i]]
    vec2 = geometry.vertices[edges[i+1]]
    geom_line.vertices.push(vec1)
    geom_line.vertices.push(vec2)
    i += 2

  # GL_LINES equivalent object
  lines = new THREE.LineSegments(geom_line, line_material)

  group.add(lines)
  return group


grouped_object = make_object(xwing)
grouped_object.scale.set(reamp, reamp, reamp)

random_angle = () ->
  fa = Math.floor(Math.random() * 4)
  [0, Math.PI/2, Math.PI, Math.PI*1.5][fa]

pick_random_greeble = () ->
  max_index = master_array.length - 1
  new_index = Math.floor(Math.random()*max_index) + 1
  master_array[new_index]

grouped_objects = []
for i in [0..5]
  # floor
  for elem, idx in [-3, -1, 1, 3]
    gob = make_object(pick_random_greeble())
    gob.scale.set(gamp, gamp, gamp)
    gob.position.y = gamp * (i * 2)
    gob.position.x = gamp * elem
    gob.position.z = -190
    grouped_objects.push(gob)
  


do initTHREE = ->
  
  renderer.setSize(globalW, globalH)
  container.appendChild(renderer.domElement)
  grouped_object.position.x = -50
  grouped_object.position.y = -330
  grouped_object.position.z = 10

  scene.add(cam)
  scene.add(grouped_object)
  
  for iobj in grouped_objects
    scene.add(iobj)
  
  pointLight1.position.x = 200
  pointLight1.position.y = 170
  pointLight1.position.z = 510
  pointLight2.position.x = -200
  pointLight3.position.z = 460
  scene.add(pointLight1)
  scene.add(pointLight2)
  scene.add(pointLight3)
  scene.add(ambientLight)
  cam.lookAt(grouped_object.position)
  renderer.render(scene, cam)

t = 0
    
do tick = ->
  t++
  angle = Math.PI / 122
  cam.position.x = -130
  cam.position.y = -730
  cam.position.z = 500
  cam.lookAt(grouped_object.position)
  renderer.render(scene, cam)
  
  for iobj in grouped_objects
    if iobj.position.y < -(3 * gamp * 2)
      iobj.position.y = 3 * gamp * 2
      iobj.rotation.z = random_angle()
    
    iobj.position.y -= 16
  
  if t >= (122*8)
    t = 0
  requestAnimationFrame(tick)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
<script src="http://codepen.io/zeffii/pen/VvbbQE"></script>
<script src="http://codepen.io/zeffii/pen/vNmpvp"></script>

style.css

body {
  background-color: #111
}