0

PlaneGeometry があり、ランダムなスパイクを作成するために頂点をランダムにアニメーション化しています。私はこの FragmentShader を使用します:

void main() {
       vec3 light = vec3(cos(time),sin(time),1.0);
       light = normalize(light);
       float dProd = max(0.0, dot(vNormal, light));
        gl_FragColor = vec4(dProd,dProd,dProd,1.0);
        }

各スパイクのいくつかの面を黒で着色することを期待していましたが、代わりに単色になりました。平面に Sphere を配置し、同じシェーダーを適用しました。 ここに画像の説明を入力

ワイヤーフレームをオフにすると:ここに画像の説明を入力

飛行機で何が起こっているのかよくわからない!? スパイクごとに法線が異なるため、ライティングも異なるものにする必要があると考えました。

ライブデモ

4

1 に答える 1

2

頂点法線を変更しなかったため、「スパイク」には異なる頂点法線がありません。それらはすべて ( 0, 1, 0 ) です。これは、コンソールで自分で確認できたものです。

また、四角形 (平面の面) の頂点を変更すると、4 つの頂点が平面ではなくなる可能性があります。これにより、あらゆる種類の問題が発生します。(グーグル非平面クワッド。)

PlaneGeometry最初のものを三角測量することで、これらの問題を回避できます。

THREE.GeometryUtils.triangulateQuads( geometry );

この関数は頂点法線を再計算することに注意してください。ソースを見て、それが何をしているのかを理解してください。

three.js r.58

于 2013-06-21T22:06:35.720 に答える