オブジェクトの面を平らにしたり、なめらかにしたり…

Three.jsの例、webgl_morphnormals.htmlを見る。

例をブラウザ上で見ると、フラミンゴが羽ばたく。Three.jsの例:webgl_morphnormals.htmlでshadingというパラメータで表れる効果を見る
しかし左は多面体…CGで作ってます！って感じ。

右のフラミンゴの表面はなめらか…でもゴム膜に見えてくるw
使うところによっては効果的だけど、やりすぎるとゴム膜に…

2つの違いはmaterialで設定するshadingというパラメータの設定にある。

双方ともgeometryに関するJSON形式にまとめられたデータを取得してる。
このデータは色、頂点、面、アニメーションのキーフレームを含む。

左の多面体フラミンゴ： 
material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
右のゴム膜なめらかフラミンゴ： 
material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading, perPixel: false } );
なめらかフラミンゴのmaterialには他のパラメータもついてるけど、光沢を出して表面を艶やかにする効果くらいで、決定的な違いはshadingの設定。

meshAnim.duration の数値を大きくするとゆっくり羽ばたくようになる。
2012/07/31 23:49
タグ