block by nitaku e3ba0ce173b638e362e1

3D building (three.js)

Full Screen

A 3D COLLADA file representing a building is exported from SketchUp and rendered with three.js, using an ortographic camera.

The 3D model is a work-in-progress representation of a real building (our research center).

index.js

// Generated by CoffeeScript 1.4.0
(function() {
  var D, aspect, camera, height, light, loader, render, renderer, scene, width;

  width = 960;

  height = 500;

  aspect = width / height;

  D = 8;

  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });

  renderer.setSize(width, height);

  document.body.appendChild(renderer.domElement);

  light = new THREE.DirectionalLight(0xffffff, 1);

  light.position.set(10, -20, 15);

  scene.add(light);

  camera.position.set(15, -25, 20);

  camera.lookAt(new THREE.Vector3(-5, -5, 0));

  camera.rotation.z = 1 / 6 * Math.PI;

  render = function() {
    return renderer.render(scene, camera);
  };

  loader = new THREE.ColladaLoader();

  loader.load('CNR_master.dae', function(collada) {
    collada.scene.scale.set(0.005, 0.005, 0.005);
    scene.add(collada.scene);
    return render();
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3D Building (three.js)</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r69/examples/js/loaders/ColladaLoader.js"></script>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

index.coffee

width = 960
height = 500
aspect = width/height
D = 8

scene = new THREE.Scene()
camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000)

renderer = new THREE.WebGLRenderer
  alpha: true
  antialias: true

renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

# create the light
light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(10, -20, 15)
scene.add(light)

# set the camera
camera.position.set(15, -25, 20)
camera.lookAt(new THREE.Vector3( -5, -5, 0 ))
camera.rotation.z = 1/6*Math.PI

render = () ->
  renderer.render(scene, camera)

# load DAE
loader = new THREE.ColladaLoader()
# loader.options.convertUpAxis = true
loader.load 'CNR_master.dae', (collada) ->  
  collada.scene.scale.set(0.005,0.005,0.005)
      
  scene.add collada.scene
  render()

index.css

html, body {
	margin: 0;
	padding: 0;
}