Skip to content

Instantly share code, notes, and snippets.

@sfpgmr sfpgmr/index.html
Last active May 25, 2016

Embed
What would you like to do?
WebGL 0001 地球と戦闘機を表示する
<!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
You can’t perform that action at this time.