<div>
	<div id="webgl" onclick="startWebGLAnimation();"></div>
</div>
<script>
	(function(){

        // グローバル関数
        window.startWebGLAnimation = startAnimate;
        var isStartedAnime = false;
        var currentLeft = -30;

        // シーン
        var scene = new THREE.Scene();

        // カメラ
        var camera = new THREE.PerspectiveCamera(10, 720 / 100, 1, 1000);
        camera.position.set(0, 0, 70);
        camera.lookAt({x:0, y:0, z:0});

        // 環境光
        var light = new THREE.AmbientLight(0xaaaaaa);
        scene.add(light);

        // ライティング
        var directionalLight = new THREE.DirectionalLight(0xaaaaaa);
        directionalLight.shadow.mapSize.height = 5000;
        directionalLight.shadow.mapSize.width = 5000;
        directionalLight.position.set(0, 50, 50);
        scene.add(directionalLight);
        directionalLight.castShadow = true;

        // 物体
        var geometry = new THREE.CubeGeometry(10, 10, 10);
        var material = new THREE.MeshPhongMaterial({color: 0xcc3333});
        var cube = new THREE.Mesh(geometry, material);
        cube.castShadow = true;
        cube.position.set(-30, 0, 0);
        scene.add(cube);

        // レンダリング
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(720, 100);
        renderer.setClearColor(0xfafafa, 1.0);
        renderer.shadowMapEnabled = true;
        function render() {
            requestAnimationFrame(render);
            if (isStartedAnime) {
                currentLeft += 1;
                if (30 < currentLeft) {
                    completeAnimate();
                }
                cube.position.x = currentLeft;
            }
            renderer.render(scene, camera);
        }
        render();

        // アニメーション開始
        function startAnimate() {
            isStartedAnime = true;
            currentLeft = -30;
        };

        // アニメーション終了
        function completeAnimate() {
            isStartedAnime = false;
            currentLeft = -30;
        };

        document.getElementById("webgl").appendChild(renderer.domElement);

    })();
</script>