sfpgmr/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>WebGL Test</title>
<meta name="keywords" content="WebGL,HTML5,three.js" />
<meta name="description" content="WebGL,HTML5,three.js" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.sfpgmr.net/scripts/three/three.js"></script>
    <script src="//www.sfpgmr.net/scripts/three/Detector.js"></script>
    <script src="//www.sfpgmr.net/scripts/three/stats.min.js"></script>
<script type="text/javascript" id="code">
    $(window).ready(function () {

        // WebGLのサポートチェック
        if (!Detector.webgl) {
            //Detector.addGetWebGLMessage({ parent: $("#content")[0] });
            $('#content').text('お使いのブラウザではWebGLはサポートしていないようです。');
            return;
        }

        $('#source-code').text($('html').html());

        // レンダラーの作成
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(640, 480);
        renderer.setClearColorHex(0x000000, 1);
        renderer.domElement.id = "console";
        renderer.domElement.className = "console";
        $("#content").append(renderer.domElement);

        // Stats オブジェクト(FPS表示)の作成表示
        var stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';

        $("#content").append(stats.domElement);
        stats.domElement.style.left = renderer.domElement.clientWidth - stats.domElement.clientWidth + 'px';

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

        // カメラの作成
        var camera = new THREE.PerspectiveCamera(15, 640 / 480);
        camera.position = new THREE.Vector3(0, 0, 8);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        // ライトの作成
        var light = new THREE.DirectionalLight(0xeeeeee);
        light.position = new THREE.Vector3(0.577, 0.577, 0.577);
        scene.add(light);

        var ambient = new THREE.AmbientLight(0x777777);
        scene.add(ambient);

        // 表示する物体の作成

        // 飛行機
        var myship_mesh;
        var loader = new THREE.JSONLoader();
        loader.load("//www.sfpgmr.net/test/webgl/data/myship.js", createScene, "//www.sfpgmr.net/test/webgl/data");
        function createScene(geometry,materials) {
           for (var i = 0; i < materials.length; i++) {
               materials[i].shading = THREE.SmoothShading;
           };
           var material = new THREE.MeshFaceMaterial(materials);

           myship_mesh = new THREE.Mesh(geometry, material);
           myship_mesh.scale.x = myship_mesh.scale.y = myship_mesh.scale.z = 0.5;

           scene.add(myship_mesh);

        }

        // 地球
        var earth_geometry = new THREE.SphereGeometry(1, 32, 16);
        var earth_material = new THREE.MeshPhongMaterial({
            color: 0xffffff, ambient: 0xffffff,
            specular: 0xcccccc, shininess: 50, metal: true,
            map: THREE.ImageUtils.loadTexture('//www.sfpgmr.net/test/webgl/data/earth.jpg')
        });


        var earth_mesh = new THREE.Mesh(earth_geometry, earth_material);
        earth_mesh.position.z = -1000.0;
        earth_mesh.scale = new THREE.Vector3(100.0, 100.0, 100.0);
        scene.add(earth_mesh);

        // レンダリング
        var baseTime = +new Date;
        var d = -0.2;
        var start = false;
        function render() {
            if (start) {
                requestAnimationFrame(render);
            }
            var t = (+new Date - baseTime) / 1000;
            earth_mesh.rotation.y = 0.3 * t;
            myship_mesh.rotation.x = myship_mesh.rotation.y = 1.5 * t;
            myship_mesh.position.z += d;
            if (myship_mesh.position.z < -300.0 || myship_mesh.position.z > 0) d = -d;

            renderer.render(scene, camera);
            stats.update();
        };

        renderer.clear();


        // 開始・停止ボタンの設定
        $('#Start').click(function () {
            if (!start) {
                start = true;
                $('#Start').text('Stop');
                render();
            } else {
                start = false;
                $('#Start').text('Start');
            }
        });


        // ソースコード表示ボタンの設定

        $('#Show-Code').click(function () {
            var code = $('#source-code');
            if (code.css('display') == 'none') {
                code.css('display', 'block');
                $('#Show-Code').text('ソース非表示');
            } else {
                code.css('display', 'none');
                $('#Show-Code').text('ソース表示');
            }

        });

        // 表示エリアの調整
        $('#content').height($('#console').height());
        $('#source-code').width($('#content').width());
        $('#source-code').height($('#content').height() - $('#navigation').height());
        $('#source-code').css('top', $('#navigation').height() + 'px');


    });

</script>
<style type="text/css">
    .content {
        width: 640px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        border: 0;
    }

    .navigation {
        position:absolute;
        display:block;
        vertical-align:top;
        margin-top:2px;
    }

    body {
        padding: 0;
        border: 0;
        margin:0;
    }

    nav > button {
        width:100px;
        height:40px;
        border:2px solid white;
        padding:2px;
        margin:2px;
        color:white;
        background:rgba(0,0,0,0);
    }

    nav > button:hover {
        background: rgba(128,128,128,0.5);
    }

    .source-code {
        position:absolute;
        display:none;
        left:0;
        padding-top:0px;
        margin:0px;
        border:0px;
        overflow-y:auto;
        overflow-wrap:break-word;
        background:rgba(0,0,0,0.5);
        color:white;
        font-size:10px;
    }
    .console {
        margin:0;
        padding:0;
        border:0;
    }
</style>
</head>
<body>
    <div id="content" class="content">
    <nav id="navigation" class="navigation">
        <button id="Start" title="クリックすると描画開始・停止">Start</button>
        <button id="Show-Code" title="ソースコードの表示">ソース表示</button>
    </nav>
    <pre id="source-code" class="source-code">
    </pre>
    </div>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebGL Test</title>
	<meta name="keywords" content="WebGL,HTML5,three.js" />
	<meta name="description" content="WebGL,HTML5,three.js" />
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//www.sfpgmr.net/scripts/three/three.js"></script>
	<script src="//www.sfpgmr.net/scripts/three/Detector.js"></script>
	<script src="//www.sfpgmr.net/scripts/three/stats.min.js"></script>
	<script type="text/javascript" id="code">
	$(window).ready(function () {

	// WebGLのサポートチェック
	if (!Detector.webgl) {
	//Detector.addGetWebGLMessage({ parent: $("#content")[0] });
	$('#content').text('お使いのブラウザではWebGLはサポートしていないようです。');
	return;
	}

	$('#source-code').text($('html').html());

	// レンダラーの作成
	var renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(640, 480);
	renderer.setClearColorHex(0x000000, 1);
	renderer.domElement.id = "console";
	renderer.domElement.className = "console";
	$("#content").append(renderer.domElement);

	// Stats オブジェクト(FPS表示)の作成表示
	var stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';

	$("#content").append(stats.domElement);
	stats.domElement.style.left = renderer.domElement.clientWidth - stats.domElement.clientWidth + 'px';

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

	// カメラの作成
	var camera = new THREE.PerspectiveCamera(15, 640 / 480);
	camera.position = new THREE.Vector3(0, 0, 8);
	camera.lookAt(new THREE.Vector3(0, 0, 0));
	scene.add(camera);

	// ライトの作成
	var light = new THREE.DirectionalLight(0xeeeeee);
	light.position = new THREE.Vector3(0.577, 0.577, 0.577);
	scene.add(light);

	var ambient = new THREE.AmbientLight(0x777777);
	scene.add(ambient);

	// 表示する物体の作成

	// 飛行機
	var myship_mesh;
	var loader = new THREE.JSONLoader();
	loader.load("//www.sfpgmr.net/test/webgl/data/myship.js", createScene, "//www.sfpgmr.net/test/webgl/data");
	function createScene(geometry,materials) {
	for (var i = 0; i < materials.length; i++) {
	materials[i].shading = THREE.SmoothShading;
	};
	var material = new THREE.MeshFaceMaterial(materials);

	myship_mesh = new THREE.Mesh(geometry, material);
	myship_mesh.scale.x = myship_mesh.scale.y = myship_mesh.scale.z = 0.5;

	scene.add(myship_mesh);

	}

	// 地球
	var earth_geometry = new THREE.SphereGeometry(1, 32, 16);
	var earth_material = new THREE.MeshPhongMaterial({
	color: 0xffffff, ambient: 0xffffff,
	specular: 0xcccccc, shininess: 50, metal: true,
	map: THREE.ImageUtils.loadTexture('//www.sfpgmr.net/test/webgl/data/earth.jpg')
	});


	var earth_mesh = new THREE.Mesh(earth_geometry, earth_material);
	earth_mesh.position.z = -1000.0;
	earth_mesh.scale = new THREE.Vector3(100.0, 100.0, 100.0);
	scene.add(earth_mesh);

	// レンダリング
	var baseTime = +new Date;
	var d = -0.2;
	var start = false;
	function render() {
	if (start) {
	requestAnimationFrame(render);
	}
	var t = (+new Date - baseTime) / 1000;
	earth_mesh.rotation.y = 0.3 * t;
	myship_mesh.rotation.x = myship_mesh.rotation.y = 1.5 * t;
	myship_mesh.position.z += d;
	if (myship_mesh.position.z < -300.0 \|\| myship_mesh.position.z > 0) d = -d;

	renderer.render(scene, camera);
	stats.update();
	};

	renderer.clear();


	// 開始・停止ボタンの設定
	$('#Start').click(function () {
	if (!start) {
	start = true;
	$('#Start').text('Stop');
	render();
	} else {
	start = false;
	$('#Start').text('Start');
	}
	});


	// ソースコード表示ボタンの設定

	$('#Show-Code').click(function () {
	var code = $('#source-code');
	if (code.css('display') == 'none') {
	code.css('display', 'block');
	$('#Show-Code').text('ソース非表示');
	} else {
	code.css('display', 'none');
	$('#Show-Code').text('ソース表示');
	}

	});

	// 表示エリアの調整
	$('#content').height($('#console').height());
	$('#source-code').width($('#content').width());
	$('#source-code').height($('#content').height() - $('#navigation').height());
	$('#source-code').css('top', $('#navigation').height() + 'px');


	});

	</script>
	<style type="text/css">
	.content {
	width: 640px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	border: 0;
	}

	.navigation {
	position:absolute;
	display:block;
	vertical-align:top;
	margin-top:2px;
	}

	body {
	padding: 0;
	border: 0;
	margin:0;
	}

	nav > button {
	width:100px;
	height:40px;
	border:2px solid white;
	padding:2px;
	margin:2px;
	color:white;
	background:rgba(0,0,0,0);
	}

	nav > button:hover {
	background: rgba(128,128,128,0.5);
	}

	.source-code {
	position:absolute;
	display:none;
	left:0;
	padding-top:0px;
	margin:0px;
	border:0px;
	overflow-y:auto;
	overflow-wrap:break-word;
	background:rgba(0,0,0,0.5);
	color:white;
	font-size:10px;
	}
	.console {
	margin:0;
	padding:0;
	border:0;
	}
	</style>
	</head>
	<body>
	<div id="content" class="content">
	<nav id="navigation" class="navigation">
	<button id="Start" title="クリックすると描画開始・停止">Start</button>
	<button id="Show-Code" title="ソースコードの表示">ソース表示</button>
	</nav>
	<pre id="source-code" class="source-code">
	</pre>
	</div>
	</body>
	</html>