説明
平面を生成するにはTHREE.PlaneGeometry()を使います。パラメーターには平面の横幅と縦幅、横の分割数と縦の分割数を指定します。分割数は初期値は1になっています。
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(900, 1120, 2000); // ライトの位置を設定
scene.add(light); // ライトを追加
// 平面を生成してシーンに追加
var plane = new THREE.Mesh(
new THREE.PlaneGeometry( 30, 40 ), // 平面
new THREE.MeshLambertMaterial( { color : 0xff0000 } ) // Lambertで色を指定
);
plane.rotation.x = 15 * Math.PI/180; // X軸の回転角度を指定
plane.rotation.y = 25 * Math.PI/180; // Y軸の回転角度を指定
scene.add(plane); // シーンに平面を追加
renderer.render( scene, camera ); // シーンを描画