立方体(Cube)を生成する

説明

立方体(Cube)を生成するにはTHREE.BoxGeometry()を使います。パラメーターにはX,Y,Z方向の立方体のサイズを指定します。なお、CubeGeometry()メソッドを使っても同じ結果になります。(CubeGeometryはBoxGeometryの別名として割り当てられているだけです)

サンプル [サンプルを実行する] [サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>three.jsサンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="../../../js/three.min.js" charset="utf-8"></script>
</head>
<body>
<h1>three.jsサンプル</h1>
<div id="result"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

// 描画領域、カメラ、ライトの設定
var renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize( 800, 600 );	// サイズを指定
renderer.setClearColor( 0xcfcfff );	// 背景色を指定
document.body.appendChild( renderer.domElement );	// ページ末尾に追加
var camera = new THREE.PerspectiveCamera( 70, 1.0, 1, 1000 );	// カメラ画角などの設定
camera.position.set(0, 0, 40);	// カメラ位置の設定
var scene = new THREE.Scene();	// シーンの生成
var light = new THREE.DirectionalLight(0xffffff, 1.25);	// ライトを生成
light.position.set(70, 120, 2000);	// ライトの位置を設定
scene.add(light);	// ライトを追加
// 立方体(Cube)を生成してシーンに追加
var cube = new THREE.Mesh(
	new THREE.BoxGeometry( 5, 10, 15 ),	// 立方体のサイズ
	new THREE.MeshLambertMaterial( { color : 0x00ff00 } )	// Lambertで色を指定
);
cube.rotation.x = 35;	// X軸の回転角度を指定
cube.rotation.y = 45;	// Y軸の回転角度を指定
scene.add(cube);	// シーンに立方体を追加
renderer.render( scene, camera );	// シーンを描画