Testing Materials

Testing Materials with Three.js

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://www.rockonflash.com/webGL/three/JSFiddleLoadImage.js"></script>
<script src="http://www.rockonflash.com/webGL/three/neo.js"></script>
<script src="http://www.rockonflash.com/webGL/three/MouseHandler.js"></script>
<script src="http://www.rockonflash.com/webGL/three/RotationCamera.js"></script>

<!--<div id='image1'>&nbsp;</div>-->

CSS

html, canvas, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #ff0000;
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;

Neo.JackIntoThree();

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));		        

scene = new THREE.Scene();

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(-10, 10, 10);
scene.add(light);

$.loadImage("http://www.rockonflash.com/webGL/three/checkerboard.jpg").done( $.proxy(createObject, this) );
                                         
function createObject(img)
{
    console.log("image loaded: " + (img == null));

    //var image1= $("#image1");
    //img.appendTo(img1);

    var geo = new THREE.TorusGeometry(1, .4, 8, 16);
    var map = new THREE.Texture(img); //THREE.ImageUtils.loadTexture( "" );
    mat = new THREE.MeshPhongMaterial( 
    { 
            map: map, 
            /*//side: THREE.DoubleSide, 
            //blending: THREE.AdditiveBlending, 
            depthTest: true, 
            transparent: true, 
            opacity: 0.5,
            ambient: 0xffffff, 
            color: 0xFFFFFF, 
            specular: 0xcccccc, 
            shininess: 20, 
            emissive: 0xFFFFFF, */
            shading:THREE.SmoothShading 
    } );
    var obj = new THREE.Mesh(geo, mat);
    obj.DrawAllAxis(3);
    scene.add(obj);
}

renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
    
var mouseHandler = new Neo.MouseHandler(renderer.domElement);
mouseHandler.addEventListener("wheel", handleWheelEvent);
mouseHandler.addEventListener("move", handleMoveEvent);

var controller = new Neo.RotationCamera(Neo.Vector3Zero.clone(), scene, camera);
controller.distance = 5;
controller.yMaxLimit = 90*Neo.toRADIANS;
controller.yMinLimit = -90*Neo.toRADIANS;

animate();

function...