Three.jsでブラウザ上で3D空間の描画が簡単にできるみたいだ。
threejs.org
簡単に立方体を書いてみる。
以下、
ここのまねをして書いてみる。
まずはダウンロード。
ここのbuildディレクトリの中にあるthree.min.jsを使う。
git clone https://github.com/mrdoob/three.js.git
次にhtmlファイルを書く。
どうやらcanvasはthree.jsが作ってくれるみたいですね。
<!DOCTYPE html>
<html>
<head>
<title>Cube</title>
<!-- three.js library -->
<script src="./three.min.js" type="text/javascript"></script>
<!-- main processing part -->
<script src="./main.js" type="text/javascript"></script>
</head>
<body>
<!-- Cube will be drawn here -->
<div id="canvas"></div>
</body>
</html>
次はメインのJSを書く。
window.onload = function() {
// Canvas size
var width = 640;
var height = 480;
// Cube Size
var geometry = new THREE.CubeGeometry(100, 100, 100);
// Cube Material Info(not metal)
var material = new THREE.MeshLambertMaterial({color: 0x0000aa});
// Create Cube
var mesh = new THREE.Mesh(geometry, material);
// Rotate Cube
mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};
// Setting Camera
var camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000);
// Camera Position
camera.position.z = -400;
// Camera Angle
camera.lookAt(mesh.position);
// Create Space
var scene = new THREE.Scene();
// Add cube to Space
scene.add(mesh);
// Create Light element
var light = new THREE.DirectionalLight(0xffffff, 1.5);
// Light element position
light.position = {x: 0, y: 0.2, z: -1};
// Add light element to the space
scene.add(light);
// Create renderer
var renderer = new THREE.WebGLRenderer();
// Set canvas size
renderer.setSize(width, height);
// Set canvas to div element
document.getElementById('canvas').appendChild(renderer.domElement);
renderer.render(scene, camera);
}
結果はこんな感じ。
結構簡単に書ける♪