2011年4月27日 星期三

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

沒有留言:

張貼留言