Last active
May 25, 2016 20:32
-
-
Save sfpgmr/8fce5034554b6266e455 to your computer and use it in GitHub Desktop.
WebGL 0001 地球と戦闘機を表示する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment