Three.js 01 Introduction - yoshiweb/labs GitHub Wiki
- シーンに物体（メッシュ）を配置して、カメラで撮影したものをレンダリング
- メッシュ（物体）はジオメトリー（形）とマテリアル（素材）から生成される
http://threejs.org/docs/#Manual/Introduction/Creating_a_scene
<html>
<head>
<title>test</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<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.01;
cube.rotation.y += 0.01;
// シーンをカメラで撮影して、レンダリング
renderer.render(scene, camera);
};
// レンダリング
render();
</script>
</body>
</html>