Three.js　学習(2)

by seijitakagi

HTML

<script src="http://pyro.jp/dev/lib/js/RequestAnimationFrame.js"></script>
<script src="http://pyro.jp/dev/lib/js/Three.js"></script>
<script src="http://pyro.jp/dev/lib/js/Detector.js"></script>
<div style="margin:0 auto; text-align:center;">
    <div id="container" style="background:#fff100; width:400px; height:400px;margin:0 auto;"></div>
</div>

JavaScript

if ( ! Detector.webgl ) {
    Detector.addGetWebGLMessage();
}

var camera, 
    scene, 
    renderer, 
    cube, 
    xhr,
    targetRotation = 2,
    targetRotationOnMouseDown = 0,
    mouseX = 0,
    mouseXOnMouseDown = 0,
    centerX = 0;


xhr = new XMLHttpRequest();
xhr.open( 'GET', 'http://pyro.jp/dev/lib/image.php', true );
xhr.onreadystatechange = function(e) { 
    if ( this.readyState == 4 && this.status == 200 ) {
        var img = new Image();
        img.src = this.responseText;
        img.onload = function () {
            init( img );
            animate();
        };
    }
};
xhr.send();

function init( img ) {
    var container, 
        materials, 
        texture;
    
    container = document.getElementById( 'container' );
    centerX = container.clientWidth * 0.5;
    camera = new THREE.PerspectiveCamera( 50, 1, 1, 1000 );
    camera.position.z = 500;
    
    scene = new THREE.Scene();

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, 1 );
    light.position.normalize();
    scene.add( light );
    
    texture = new THREE.Texture( img );
    texture.needsUpdate = true;
    materials = [
        new THREE.MeshLambertMaterial( { map:texture } )
    ];
            
    cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1 ), materials );
    cube.position.y = 0;
    cube.overdraw = true;
    scene.add( cube );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 400, 400 );

    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}

function onDocumentMouseDown( event ) {
    event.preventDefault();
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
   ...