THREE.jsの影の奇妙な振る舞い

私は3次元空間に配置された複数の写真セットをレンダリングしようとしています。私は2つの矩形で始まります。ここに私のコードがあります

function loadScene() {
    var WIDTH = 1200,
        HEIGHT = 500,
        VIEW_ANGLE = 45,
        ASPECT = WIDTH/HEIGHT,
        NEAR = 0.1,
        FAR = 10000,

        world = document.getElementById('world'),
        renderer = new THREE.WebGLRenderer(),
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
        scene = new THREE.Scene(),
        texture = THREE.ImageUtils.loadTexture('image.jpg', {}, function() {
            renderer.render(scene, camera);
        }),
        material = new THREE.MeshLambertMaterial({map: texture}),
        solidMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000}),
        rectangle = new THREE.PlaneGeometry(200, 120),
        mesh = new THREE.Mesh(rectangle, material),
        mesh1 = new THREE.Mesh(rectangle, material),
        spotLight = new THREE.SpotLight(0xFFFFFF, 1.3);

    camera.position.set(0, 0, 200);
    mesh.translateX(140);
    mesh.translateZ(-70);
    mesh.receiveShadow = true;
    mesh1.castShadow = true;
    spotLight.position.x = -100;
    spotLight.position.y = 230;
    spotLight.position.z = 230;
    spotLight.castShadow = true;

    scene.add(spotLight);
    scene.add(mesh);
    scene.add(mesh1);
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMapEnabled = true;
    renderer.render(scene, camera);
    world.appendChild(renderer.domElement);
}

ここで solidMaterial は赤色で、 material はテクスチャ付きの素材です。私が得ることは次のとおりです:

  • 両方のメッシュにマテリアルを使用すると、四角形は予想通りに表示されますが、影はありません。両方に solidMaterial を使用する場合も同じです。
  • mesh mesh )の material solidMaterial テクスチャ付きのシャドウに影を投げる赤い四角形です。これは私が期待するように動作する唯一のケースです。
  • mesh1 meshModel (もっと遠くにあるもの)と material solidMaterial その上に影を付けた赤い四角形ですが、正面のテクスチャ付き矩形はまったく描画されません。

シャドウの正しい使い方は?

2

1 答え

2つの矩形が同じ素材を持つ場合、影が現れないことが分かります。私はこれがTHREE.jsのバグかどうか疑問に思います。

一方、2つの異なる素材を使用すると、同じテクスチャを持っていても、影が期待どおりに表示されます。

2
追加された
私はThree.jsの内部を知らないのですが、1回の呼び出しで材料を共有するすべてのジオメトリが描画されると思われます。残念ながら、シャドーイングは非常に困難ですが、他の場所ではるかに優れたパフォーマンスのためにはおそらく妥当なトレードオフです。また、あなたのケースでこのような簡単な回避策を見つけたので、この動作を "修正"する必要があるとは思っていません。
追加された 著者 Toji,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript