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

再延續上次的立體方塊
將影片貼到方塊上
實作範例教學：
HTML部分

<video id="video0" autoplay>
    <source src="video/1.mp4">
</video>
<video id="video1" autoplay>
    <source src="video/2.mp4">

</video>
<video id="video2" autoplay>
    <source src="video/3.mp4">
</video>
<video id="video3" autoplay>
    <source src="video/4.mp4">
</video>
<video id="video4" autoplay>
    <source src="video/5.mp4">
</video>
<video id="video5" autoplay>
    <source src="video/6.mp4">
</video> 

Javascript部分

var container, camera, scene, projector, renderer,particleMaterial;
var image = new Array();
var imageContext = new Array();
var texture = new Array();
var video = new Array();
var theta = 0;
var radius = 600;
$('body').append(
    $('<div id="main"/>').attr(
        {width:($(window).width()),height:($(window).height())}
    )
);
var aVideoCount = new Array();
var VideoCount = new Array();
var LoadingText = 'Loading';

//preLoad();
init();

function preLoad(){
    $('#main').html('<p style="text-align:center;">'+LoadingText+'</p>');
    if( VideoCount < 6 ){
        LoadingText = LoadingText + '.';
        loadVideo();
        setTimeout('preLoad();',1000);
    }else{
        $('#main').html('');
        init();
    }
}

function loadVideo(){
    for( var i = 0 ; i < 6 ; i++ ){
        video[i] = $('#video'+i).get(0);
        video[i].style.display = 'none';
        if( video[i].readyState === video[i].HAVE_ENOUGH_DATA ) {
            if(aVideoCount[i] < 1 ){
                VideoCount++;
                aVideoCount[i] = 1;
            }
        }
    }
}


function init(){
    container = $('#main').get(0);
    camera = new THREE.Camera( 70, ($(window).width()) / ($(window).height()), 1, 10000 );
    camera.position.y = 300;
    camera.position.z = 500;
    scene = new THREE.Scene();
    var materials = [];
    for(var i = 0; i < 6; i++){
        $('#main').append($('<canvas id="canvas'+i+'"/>').css(
                {width:'100px',height:'100px',display:'none'}
            )
        );
        video[i] = $('#video'+i).get(0);
        video[i].style.display = 'none';
        image[i] = $('#canvas'+i).get(0);
        imageContext[i] = image[i].getContext( '2d' );
        imageContext[i].fillStyle = '#000000';
        imageContext[i].fillRect( 0, 0, 100, 100 );
        texture[i] = new THREE.Texture( image[i] );
        texture[i].minFilter = THREE.LinearFilter;
        texture[i].magFilter = THREE.LinearFilter;
        materials.push( [ new THREE.MeshBasicMaterial({map: texture[i]}) ] );
    }
    var object = new THREE.Mesh( new THREE.Cube( 100, 100, 100, 1, 1, 1, materials ), new THREE.MeshFaceMaterial());
    object.position.x = 100;
    object.position.y = 100;
    object.position.z = 500;
    object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
    object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
    object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
    scene.addObject( object );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( $(window).width(), $(window).height() );
    container.appendChild( renderer.domElement );

    animate();
}

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

function render() {
    theta += 0.2;
    camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
    camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
    camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
    for(var i = 0 ; i < 6 ; i++ ){
        if( video[i].readyState === video[i].HAVE_ENOUGH_DATA ) {
            if( video[i].pause == true ){
                video[i].play();
            }
            imageContext[i].drawImage( video[i], 0, 0 );
            if ( texture[i] ) texture[i].needsUpdate = true;
        }
        if( video[i].ended == true ){
            video[i].currentTime = 0;
            video[i].play();
        }
    }
    renderer.render( scene, camera );
}

實作 : http://excite.978.tw/html5/3d_cube_video.php