Three.jsとは？
* WebGLを利用して、ブラウザ上で3Dを描画することができる
補足:用語
* WebGLとは？ => ウェブブラウザで3Dを表示させるための標準仕様。
注意
* WebGLを対応したブラウザでないと使えない * 以下のサイトで確認した方がいいhttp://caniuse.com/#search=webGl
設定
* 以下の2通り。 方法1) 公式サイトからダウンロードして、「three.min.js」 をインポートする 方法2) 「http://threejs.org/build/three.min.js」をインポートする
動画
* 以下の動画で感じをつかんだ方がいいかも。http://dotinstall.com/lessons/basic_threejs
サンプル
例1
<!DOCTYPE html>
<html>
<head>
<title>For Three.js sample</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="">http://threejs.org/build/three.min.js">
<script>
// [1] Scene
var scene = new THREE.Scene();
// [2] Mesh(部品)
// [2-1] Mesh - Geometry(形状)
var geometry = new THREE.CubeGeometry(50, 200, 50);
// [2-2] Mesh - Material(材質：色など)
var material = new THREE.MeshBasicMaterial({ color: "blue" });
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, 0);
scene.add(cube);
// [3] Light
// 今回省略
// [4] Camera
var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(200, 100, 500);
camera.lookAt(cube.position);
// [5] Renderering
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
</script>
</body>
</html>
例2
* 例1に Light をつけた<!DOCTYPE html>
<html>
<head>
<title>For Three.js sample</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="">http://threejs.org/build/three.min.js">
<script>
// [1] Scene
var scene = new THREE.Scene();
// [2] Mesh(部品)
// [2-1] Mesh - Geometry(形状)
var geometry = new THREE.CubeGeometry(50, 50, 50);
// [2-2] Mesh - Material(材質：色など)
var material = new THREE.MeshLambertMaterial({ color: "red" });
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, 0);
scene.add(cube);
// [3] Light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 100, 30);
scene.add(light);
var ambient = new THREE.AmbientLight(0x550000);
scene.add(ambient);
// [4] Camera
var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(200, 100, 500);
camera.lookAt(cube.position);
// [5] Renderering
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
</script>
</body>
</html>
例3
<html>
<head>
<title>Sample</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="">http://threejs.org/build/three.min.js">
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
参考文献
http://www.atmarkit.co.jp/ait/articles/1210/04/news142.htmlhttp://liginc.co.jp/web/html-css/html/91988
http://www.natural-science.or.jp/article/20120220155529.php
http://qiita.com/katapad/items/1d84a35174a58b7164d4
http://kray.jp/blog/three-js/
