THREE.jsで多面体をSpotlightで照らす

demo

★inspire
https://threejsdoc.appspot.com/doc/three.js/examples/webgl_geometry_colors.html

正二十面体のジオメトリーを作成

var ICOSAHEDRON_RADIUS = 1;//正20面体の半径
    var ICOSAHEDRON_DETAIL = 2;//分割回数
    var color,f,f2,f3,p,n,vertexIndex,
        //正20面体のジオメトリー
        geometry = new THREE.IcosahedronGeometry(ICOSAHEDRON_RADIUS,ICOSAHEDRON_DETAIL),
        geometry2 = new THREE.IcosahedronGeometry(ICOSAHEDRON_RADIUS,ICOSAHEDRON_DETAIL),
        geometry3 = new THREE.IcosahedronGeometry(ICOSAHEDRON_RADIUS,ICOSAHEDRON_DETAIL);

正二十面体を使用するときは、IcosahedronGeometryというメソッドが用意されている。

THREE.IcosahedronGeometry

名前	内容
ICOSAHEDRON_RADIUS	半径
ICOSAHEDRON_DETAIL	分割回数

IcosahedronGeometry - three.js wiki - atwiki（アットウィキ）

・分割回数の説明
立体の外接球を考える。各頂点を球面上で結び、その中点を取る。その中点と各頂点を結ぶと新しい立体ができる。分割回数を増やすと球に近づく。
TetrahedronGeometry - three.js wiki - atwiki（アットウィキ）

面オブジェクト

THREE.jsにおいて、面を作成するときは2つのパターンがある。

点の数	図形の種類
3つ	四角面以外
4つ	四角面

・参考
http://penq.co.jp/blog/engineer/threejs/1614
2012-07-18

//オブジェクトがクラスのインスタンスか判定
n = (f instanceof THREE.Face3) ? 3 : 4;

instanceof演算子で2つのパターンを判定している。

・instanceof演算子
 instanceof演算子 - うなの日記

HSLで色を設定

ドキュメントを見ると、setHSLというメソッドが用意されている。

.setHSL( h, s, l ) this
h — hue value between 0.0 and 1.0
s — saturation value between 0.0 and 1.0
l — lightness value between 0.0 and 1.0
Sets color from hsl

color = new THREE.Color(0xffffff);
color.setHSL(Math.random()*0.5, 1, 0.5);

名前	内容
色相(hue)	色味を0～360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。
彩度(saturation)	HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
輝度(lightness)	明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間（50%）を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすい。

・参考
HLS色空間 - Wikipedia

複数のマテリアルを使用する

 //立体のマテリアル
    var materials = [
        new THREE.MeshLambertMaterial({color:0xffffff,shading:THREE.FlatShading,vertexColors:THREE.VertexColors}),
        new THREE.MeshBasicMaterial({color:0x000000,shading:THREE.FlatShading,wireframe:true,transparent:true})
    ];
    
    //複数のマテリアルを使用する
    group1 = THREE.SceneUtils.createMultiMaterialObject(geometry,materials);

複数のマテリアルを用いるときは、マテリアルを配列に入れて、createMultiMaterialObjectメソッドを使用する。
・THREE.SceneUtils.createMultiMaterialObject
マテリアル - three.js wiki - atwiki（アットウィキ）

アンチエイリアス

//レンダラーを生成
    renderer = new THREE.WebGLRenderer({antialias:true});

アンチエイリアス処理をして輪郭を滑らかにする。

アンチエイリアスとは
アンチエイリアスとは、物体の輪郭を描画するときに輪郭と背景の色との混ぜ合わせることでエッジをなめらかにすることです。アンチエイリアスを有効にすることで、物体の輪郭がギザギザになることを抑えます。 Three.js はデフォルトでは無効になっているので、利用したければ明示的に有効にする必要があります。

HTML5による物理シミュレーション環境の構築～WebGLライブラリThree.js 入門（１／３）～

Spotlightの作成

//光源を作成
    var LIGHT_HEX = 0xffffff;//光の色
    var LIGHT_INTENSITY = 7;//光の強さ
    var LIGHT_DISTANCE = 700;//光の届く距離
    var LIGHT_ANGLE = Math.PI / 2;//照らす範囲角
    var LIGHT_EXPONENT = 1;//光の減衰度合い
    
    var light = new THREE.SpotLight(LIGHT_HEX,LIGHT_INTENSITY,LIGHT_DISTANCE,LIGHT_ANGLE,LIGHT_EXPONENT);
    light.target.position = new THREE.Vector3(200,0,0);
    light.position.set(0,100,500);
    scene.add( light );