Three.js - About storage of geometries and materials

Three.js - About storage of geometries and materials

by Adam Kamiński

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="webGL-container"></div>

CSS

body {
    margin:0;
    overflow: hidden;
}

JavaScript

$(function(){
/*Work on v73  */
    
    /*global variables*/
    var scene, camera, renderer;
    var controls;
    var spotLight, Box, hemi ;
    var SCREEN_WIDTH, SCREEN_HEIGHT;
    var loader, model;


    function init(){
        /*creates empty scene object and renderer*/
        scene = new THREE.Scene();
        camera =  new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
        renderer = new THREE.WebGLRenderer({antialias:true});

        renderer.setClearColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMapSoft = true;

        /*add controls*/
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', render );

        /*adds helpers*/
        axis =  new THREE.AxisHelper(10);
        scene.add (axis);

        grid = new THREE.GridHelper(50, 5);
        color = new THREE.Color("rgb(255,0,0)");
        grid.setColors(color, 0x000000);
        scene.add(grid);

        /*Camera*/
        camera.position.x = 15;
        camera.position.y = 12;
        camera.position.z = 10;
        camera.lookAt(scene.position);

		/*Lights*/
        var ambient = new THREE.AmbientLight( 0x404040 );
        scene.add( ambient );

        spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( 10, 10, 15 );
        spotLight.castShadow = true;
        spotLight.shadowCameraNear = 8;
        spotLight.shadowCameraFar = 30;
        spotLight.shadowDarkness = 0.5;
        spotLight.shadowMapWidth = 4096*2;
        spotLight.shadowMapHeight = 4096*2;
        spotLight.shadowBias = 0;
        spotLight.name = 'Spot Light';
        scene.add( spotLight );
        
		/*Ground*/
        var Ground_geometry = new THREE.BoxGeometry( 20, 0.1, 20 );
        var Ground_material = new THREE.MeshPhongMaterial( {
            color: 0x06B200,
            shininess: 150,
         ...