円柱(Cylinder)を生成する

説明

円柱(Cylinder)を生成するにはTHREE.CylinderGeometry()を使います。パラメーターには円柱の上側の半径、下側の半径、高さ、分割数、高さの分割数、円柱に蓋をするかどうかを指定できます。

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

HTMLソース

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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コード

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 描画領域、カメラ、ライトの設定
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);   // ライトを追加
// 円柱（Cylinder）を生成してシーンに追加
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 5, 5, 20, 50, 10, false ),  // 円柱のサイズと分割数
new THREE.MeshLambertMaterial( { color : 0xff0000 } )   // Lambertで色を指定
);
cylinder.rotation.x = Math.PI/5;    // 円柱を回転
scene.add(cylinder);    // シーンに円柱を追加
renderer.render( scene, camera );   // シーンを描画