Three.js　学習(3)

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 id="container" ></div>

CSS

#container {
    background: #fff100;
    height: 600px;
    margin:0 auto;
}

JavaScript

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

var container, 
     camera, 
     scene, 
     renderer, 
     mesh, 
     light,
     windowHalfX,
     targetRotation = 2,
     targetRotationOnMouseDown = 0,
     mouseX = 0,
     mouseXOnMouseDown = 0;

init();
animate();

function init() {

    container = document.getElementById( 'container' );
    windowHalfX = container.clientWidth * 0.5;

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 3000;

    scene = new THREE.Scene();

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, 1 ).normalize();
    scene.add( light );

    var loader = new THREE.JSONLoader();
    loader.load( "http://pyro.jp/dev/resources/dragon.js", createScene );

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

    container.appendChild( renderer.domElement );

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

function createScene( geometry ) {
    var material = new THREE.MeshFaceMaterial();
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.y = -container.clientHeight;
    mesh.scale.x = mesh.scale.y = mesh.scale.z = 4;
    scene.add( mesh );
}

function onDocumentMouseDown( event ) {
    event.preventDefault();
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;
}
 
function onDocumentMouseMove( event ) {
    mouseX = event.clientX - windowHalfX;
    targetRotation =...