Threejs Object example

by bhupendra negi

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://dl.dropboxusercontent.com/s/mrhumrr2bxwt9nt/OBJLoader.js"></script>
<script src="https://dl.dropboxusercontent.com/s/n5sjyymajykna51/TGALoader.js"></script>
<script src="https://dl.dropboxusercontent.com/s/y4r5bmq2037jacg/OrbitControls.js"></script>

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;

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 = 5;

    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);

    THREE.ImageUtils.crossOrigin = '';

    // Material
    var map = THREE.ImageUtils.loadTexture('https://dl.dropbox.com/s/19ksb14mroehc8v/mount_boar_02_Color.png');
    map.wrapS = THREE.RepeatWrapping;

    var normalMap = THREE.ImageUtils.loadTexture('https://dl.dropbox.com/s/t4whg61ge2w0jui/mount_boar_02_Normal.png');
    normalMap.wrapS = THREE.RepeatWrapping;
    
 ...