Bruce's Blog: html5 - Javascript 3D Engine three.js 實作範例教學

three.js 一套 Javascript 3D Engine https://github.com/mrdoob/three.js/
實作將facebook的朋友個人照，在3D的空間裡漂浮

實作範例教學：
PHP & HTML部分



$facebook = new Facebook(array(

             'appId'  => $facebook_app_key,

             'secret' => $facebook_app_secret,

             'cookie' => true

            )); 

if( !$facebook->getSession() ){

    $auth_url = $facebook->getLoginUrl();

    header('Location: '.$auth_url);

    exit;

}else{

    $fb_id = $facebook->getUser();

    try{

        $aFriendList = $facebook->api(array(

            'method' => 'fql.query',

            'query' => 'select pic_square from user where uid in (select uid2 from friend where uid1 = '.$fb_id.') order by name limit 1000'

        )); 

        shuffle($aFriendList);

        foreach( $aFriendList as $k => $v ){

            if( $k > 100 ){

                unset($aFriendList[$k]);

            }   

        }   

    }catch(Exception $e){ $aFriendList = array(); }

}



<html>

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- 載入 Three.js -->

<script type="text/javascript" src="three/build/Three.js"></script>

<style>

body{

    background-color: #000000;

    margin: 0px;

    overflow: hidden;

}

ul { position:absolute;top:-1000;left:-1000} /* 把圖丟到可視範圍外 */

</style>

</head>

<body>

<ul>

    <?php



    foreach( $aFriendList as $k => $v ){

    ?>

        <li><img class="img" src="img_proxy.php?i=<?php echo urlencode($v['pic_square']); ?>"></li>

    <?php

    }



    ?>

</ul>

Javascript部分



var container,camera, scene, renderer, particle;
var mouseX = 0, mouseY = 0;
var windowHalfX = ($(window).width()) / 2;
var windowHalfY = ($(window).height()) / 2;
var count = 0;
var total = ($('ul li').length) - 1;
var aImgData = new Array();

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

});

function gogo(gogo_count){
    if( gogo_count == $('.img').length ){
        init();
        animate();
    }
}

function init(){
    $('body').append(
        $('<div id="main"/>')
    );
    container = $('#main').get(0);
    camera = new THREE.Camera( 75, ($(window).width()) / ($(window).height()), 1, 3000 );
 camera.position.z = 1000;
 scene = new THREE.Scene();

 var program = function ( context , color) {
        var t1 = color.__styleString.split(/,/);
        var t2 = t1[2].replace(')','');
        if( aImgData[t2] != undefined ){
            if( aImgData[t2].complete == true ){
                context.save();
                context.translate(12,12);
                context.rotate(180 * Math.PI / 180)
                context.drawImage(aImgData[t2],0,0,12,12);
                context.restore();
                context.rotate(180 * Math.PI / 180)
            }
        }
 }

 for ( var i = 0; i < total; i++ ) {
        count = i;
  particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( 
                                            { color: count, program: program } 
                                        ) 
                                     );
  particle.position.x = Math.random() * 2000 - 1000;
  particle.position.y = Math.random() * 2000 - 1000;
  particle.position.z = Math.random() * 2000 - 1000;
  particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
  scene.addObject( particle );
 }

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

    $('body').mousemove(function(e){
  mouseX = e.pageX - windowHalfX;
  mouseY = e.pageY - windowHalfY;
    });

}

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

function render() {
 camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 renderer.render( scene, camera );
}

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