three.js - render trees

by mmalex

HTML

<script src="http://mbnsay.com/rayys/assets/js/three.js/three.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/OrbitControls.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/inflate.min.js"></script>
<script src="http://mbnsay.com/rayys/assets/js/three.js/loaders/RGBELoader.js"></script>
<script src="http://mbnsay.com/rayys/assets/js/three.js/loaders/FBXLoader.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/Detector.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/stats.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

			var isMobile = (navigator.userAgent.match(/Android/i) ||
			    navigator.userAgent.match(/webOS/i) ||
			    navigator.userAgent.match(/iPhone/i) ||
			    navigator.userAgent.match(/iPad/i) ||
			    navigator.userAgent.match(/iPod/i) ||
			    navigator.userAgent.match(/BlackBerry/i) ||
			    navigator.userAgent.match(/Windows Phone/i)
			);

			var container, stats;

			var camera, scene, renderer, controls, objects = [];

			init();
			animate();

			function init() {

			    container = document.createElement('div');
			    document.body.appendChild(container);

			    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 5, 5000);
			    camera.position.set(220, 100, 100);

			    scene = new THREE.Scene();
			    scene.background = new THREE.Color(0xf9f9f9);

			    var ambient = new THREE.AmbientLight(0x101010);
			    scene.add(ambient);

			    var hemi = new THREE.HemisphereLight(0xffffff, 0x080880, 0.25);
			    scene.add(hemi);

			    var omni1 = new THREE.PointLight(0x90c9ff, 0.45, 100);
			    omni1.position.set(-10, 15, 20);
			    scene.add(omni1);

			    var omni2 = new THREE.PointLight(0xffc990, 0.45, 100);
			    omni2.position.set(20, 15, -10);
			    scene.add(omni2);

          var size = 500;
          var divisions = 20;

          var gridHelper = new THREE.GridHelper( size, divisions );
          scene.add( gridHelper );

			    renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio(window.devicePixelRatio);

			    var manager = new THREE.LoadingManager();
			    manager.onStart = function(url, itemsLoaded, itemsTotal) {
			        console.log('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
			    };
			    manager.onLoad = function(p) {
			        console.log('Loading complete!');
			    };
			    manager.onProgress = function(url, itemsLoaded, itemsTotal) {
			       ...