Three.jsでPointLightをPlaneGeometryに使う場合はsegmentsを大きめに指定してあげる


このエントリーをはてなブックマークに追加

初めてのThree.js 第2版をやってみてる

Three.jsのリビジョンは r85 を使用している

第三章 3.2.2 THREE.PointLightのところ

最初、自前のPlaneGeometryにPointLightを照射していたのだがどうもうまく光ってくれなかった

結論から言うと、THREE.PlaneGeometryする時に width と height だけでなくて widthSegments と heightSegments も大きめの値を指定してあげないとうまく照射されないっぽい



うまくいかない場合はsegmentsを指定してあげよう


Three.js公式のPlaneGeometryのdocumentをみてみると

1
2
3
4
5
6
PlaneGeometry(width, height, widthSegments, heightSegments)
width — Width along the X axis.
height — Height along the Y axis.
widthSegments — Optional. Default is 1.
heightSegments — Optional. Default is 1.

となっている

自分でPlaneGeometryを作成する時は widthSegments と heightSegments(横と縦をいくつのセグメントに分割するか)は

オプションだったので気にせず何も設定しない(デフォルトで1)だったが

PointLightを照射してみるとうまく光が照射されなくて

segments部分の数値を増やしたら下記のようにうまくいったのでメモ


dat.guiからplaneGeometryのsegmentsをいじってやるとわかるけど、PointLightが当たる光は

分割数によって変わってくるみたい(セグメントで分けた頂点に当たらないと反射しない?)

詳しくは不明だがちょっと躓いたのでメモっておく

上記のソースコードは下記

websitetest/docs/threejs_pointlight_planegeometry at master · YoheiKoga/websitetest


このエントリーをはてなブックマークに追加