three.jsでライティング - ひよっこ blog

ライティング

THREE.PointLightとTHREE.MeshPhongMaterialで、
なんかいい感じのライティングにしたいなと色々してみた。

f:id:hiyohiyokko:20160101164423p:plain
THREE.SphereGeometryで球のオブジェクトを出し、ライティング。

モデルへのライティングは、複数のポイントライトをいい感じに設置すると、
良く見えるらしいので、複数色も変えて設置。
（今回は、右上に黄色、左下に青、真上に白の3つ）

左の球：近距離に設置し、ライトの影響を受けない。
中の球：3つのライトが程よくあたる。
右の球：遠距離に設置し、右上と上のライトがあたる。

光のあて方で見え方はかなり変わるので、
ちょっとこだわってみると、リッチに見えそうですね。

サンプルコード

※日本語フォントは下記からとってきました。
http://www56.atwiki.jp/threejs/pages/67.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8">
	<style>
		body {
			background:#777;
			padding:0;
			margin:0;
			font-weight: bold;
			overflow:hidden;
		}


		a {
			color: #ffffff;
		}

		#oldie a { color:#da0 }
	</style>
</head>

<script src="three/three.js"></script>
<script src="three/three.min.js"></script>
<script src="three/examples/js/geometries/TextGeometry.js"></script>
<script src="three/examples/js/utils/FontUtils.js"></script>

<script src="three/examples/fonts/nomifont0.js"></script>

<body>
<div id="canvas-wrapper"></div>

<script>
var sw = window.innerWidth;
var sh = window.innerHeight;

var camera, scene, renderer;

//シーン
scene = new THREE.Scene();

// 光を用意
pointLight = new THREE.PointLight(0xffffff, 2, 1500);
//pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 1000, -100);
pointLightHelper = new THREE.PointLightHelper(pointLight, 1);

pointLight2 = new THREE.PointLight(0xffff00, 2, 1000);
pointLight2.position.set(300, 300, 300);

pointLight3 = new THREE.PointLight(0xff00ff, 2, 1000);
pointLight3.position.set(-300, -300, 300);

ambientLight = new THREE.AmbientLight(0x111111);

scene.add(pointLight);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(ambientLight);

//カメラを作る
camera = new THREE.PerspectiveCamera( 75, sw / sh, 0.01, 10000 );
camera.position.set(0, 0, 2000);
scene.add( camera );

//レンダー
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(sw, sh);
//document.getElementById('canvas-wrapper').appendChild(renderer.domElement);
document.body.appendChild(renderer.domElement);


//球
var geometry = new THREE.SphereGeometry(200, 20, 20);
var geometry2 = new THREE.SphereGeometry(50, 20, 20);
var geometry3 = new THREE.SphereGeometry(250, 20, 20);
var material = new THREE.MeshPhongMaterial({
	color: 'rgb(255, 150, 150)',
	side: THREE.DoubleSide,
	shininess: 2500,
	emissive: new THREE.Color('rgb(255, 0, 0)'),
	metal: false
});


var mesh = new THREE.Mesh( geometry, material );
var mesh2 = new THREE.Mesh( geometry2, material );
var mesh3 = new THREE.Mesh( geometry3, material );
mesh.position.set( 0, 0, 0 );
mesh2.position.set( -200, 0, 1500 );
mesh3.position.set( 1050, 0, -500 );
scene.add( mesh );
scene.add( mesh2 );
scene.add( mesh3 );

//テキスト表示

var textGeo = new THREE.TextGeometry( 'ライドなし　　　ライトあり　　　ライトあり', {
	size: 100,                 // サイズ
	curveSegments: 3,         // 字曲線分割数。
	//height:10,                // 厚さ
	extrudeMaterial:1, //側面のマテリアルのインデックス。
	font : "nomifont", // フォント指定しないとhelvetikerの非ボールド、非イタリックに
	weight: "normal", style: "normal",
	bevelEnabled: true, bevelSize: 3, bevelThickness: 5, bevelSegments: 10
	                          // ベベル有効、3太らせる、5伸ばす、ベベル分割数2
});
var materialFront = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var materialSide = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var materialArray = [ materialFront, materialSide ];

var textMaterial = new THREE.MeshFaceMaterial(materialArray);

var text = new THREE.Mesh( textGeo, textMaterial );
text.position.set(-1000, 400, 0);
scene.add( text );

renderer.render(scene, camera);

</script>

</body>
</html>