Threejs Object example

by Umair Rafiq

HTML

<script src="https://dl.dropboxusercontent.com/s/qooungyrgltucai/three.js"></script>
<script src="https://dl.dropboxusercontent.com/s/ddt89ncslm4o7ie/Detector.js"></script>
<script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script>
<div id='label' style='position:relative;top:10px;left:20px'>
<p style='color:blue;'>Label</p>
</div>

JavaScript

var container;

var camera, controls, scene, renderer, model;

var mouseX = 0,
    mouseY = 0;

var test = true;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var projector, INTERSECTED,SELECTED;
//var mouse = { x: 0, y: 0 };
var mouse = new THREE.Vector3();
var raycaster = new THREE.Raycaster();

var sprite1;
var canvas1, context1, texture1;


init();
animate();

function webglAvailable() {
    try {
        var canvas = document.createElement('canvas');
        return !!(window.WebGLRenderingContext && (
        canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
    } catch (e) {
        return false;
    }
}

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

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 255;
    camera.position.y = 150;

    controls = new THREE.OrbitControls(camera);

    // scene
    scene = new THREE.Scene();

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

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Loading manager
    var manager = new THREE.LoadingManager();
    manager.onProgress = function (item, loaded, total) {
        console.log(item, loaded, total);
    };

    var onProgress = function (xhr) {
        if (xhr.lengthComputable) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
    };

    var onError = function (xhr) {
        console.log('Error: ' + xhr);
    };

    // Model
    model = new THREE.Object3D();
    scene.add(model);


		var objectLoaded;
    var mtlLoader = new THREE.MTLLoader();
	  //mtlLoader.setPath(this.modelsPath);
	 ...