html5 - Javascript 3D Engine three.js 實作範例教學 (二)

繼上一篇在空間裡飛行的朋友照
現在將朋友照貼到立體的方塊上
變更Javascript部分
實作範例教學：

var container = new Array();
var camera = new Array();
var scene = new Array();
var renderer = new Array();
var cube = new Array();
var plane = new Array();
var targetRotation = new Array();
var targetRotationOnMouseDown = new Array();
var mouseX = new Array();
var mouseXOnMouseDown = new Array();
var windowHalfX = ($(window).width()) / 2;
var windowHalfY = ($(window).height()) / 2;
var cubeSize = Math.floor(($(window).width())/5);
var aImgData = new Array();
var imgStart = 0;
var total = 5;

$('body').append(
    $('<div id="main"/>').attr(
        {align:'center',width:(cubeSize*3),height:(cubeSize*3)}
    )
);

$(window).load(function() {
    var count = 0;
    $('.img').each(function(index,value){
        aImgData[index] = new Image();
        aImgData[index].src = value.src;
        aImgData[index].onload = function(){
            count++;
            loadImg(count);
        }
    });

});

function loadImg(count){
    if( count == $('.img').length ){
        init();
    }
}

function init(){
    for(var i=0; i<= total; i++ ){
        newCube(i);
    }
    animate();
}

function newCube(num){
    var domId = 'cube'+num;
    var cubeTop = cubeSize*Math.floor(num/3);
    var cubeLeft = (cubeSize)+cubeSize*(num%3);
    cubeTop = cubeTop + 'px';
    cubeLeft = cubeLeft + 'px';
    $('#main').append(
        $('<div id="'+domId+'"/>').css(
                {width:cubeSize+'px',height:cubeSize+'px',position:'absolute',top:cubeTop,left:cubeLeft}
            )
    );
    container[num] = $('#'+domId).get(0);
 camera[num] = new THREE.Camera( 70, ($(window).width()) / ($(window).width()), 1, 1000 );
 camera[num].position.y = 150;
 camera[num].position.z = 500;
 camera[num].target.position.y = 150;

    scene[num] = new THREE.Scene();
    //cube
    var materials = [];
 for ( var i = 0; i < 6; i ++ ) {
     materials.push( [ new THREE.MeshBasicMaterial({map: ImageUtils.loadTexture(aImgData[imgStart].src)}) ] );
        imgStart++;
 }
 cube[num] = new THREE.Mesh( new Cube( cubeSize, cubeSize, cubeSize, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
 cube[num].position.y = 180;
 cube[num].overdraw = true;
 scene[num].addObject( cube[num] );

    //plane
 plane[num] = new THREE.Mesh( new Plane( (cubeSize*0.95), (cubeSize*0.95) ), new THREE.MeshBasicMaterial( { color: 0x222222 } ) );
 plane[num].rotation.x = - 90 * ( Math.PI / 180 );
 plane[num].overdraw = true;
 scene[num].addObject( plane[num] );

 renderer[num] = new THREE.CanvasRenderer();
 renderer[num].setSize( cubeSize, cubeSize );

 container[num].appendChild( renderer[num].domElement );
    targetRotation[num] = 0;
    targetRotationOnMouseDown[num] = 0;
    mouseX[num] = 0;
    mouseXOnMouseDown[num] = 0;
    $('#'+domId).mouseover(function(e){
        mouseX[num] = e.clientX - windowHalfX;
        targetRotation[num] = targetRotationOnMouseDown[num] + ( mouseX[num] - mouseXOnMouseDown[num] ) * 0.02;
    });
}

function animate() {
    setTimeout( 'animate();', 1000 / 60 );
 render();
}

function render() {
    for(var i =0; i <= total; i++ ){
        plane[i].rotation.z = cube[i].rotation.y += ( targetRotation[i] - cube[i].rotation.y ) * 0.05;
        renderer[i].render( scene[i], camera[i] );
    }
}

實作範例 : http://excite.978.tw/html5/3d_cube.php