1

CubeCamera を使用して単純な反射モデルを作成します。セットアップは下の写真で見ることができます。

ここに画像の説明を入力

カメラが立方体に十分近い場合、反射はきれいに見えます。ただし、オブジェクトから離れると、反射が大きくなります。下の図を参照してください。

ここに画像の説明を入力

これは私が望む方法ではありません。反射が比例して小さくなるようにしたいと思います。さまざまな設定で遊んでみましたが、これは適切なシェーダー プログラム (立方体のテクスチャをつぶすだけ) を使用して実現できると考えたので、既存の PhongShader をいじってみましたが、うまくいきませんでした。私はこれにあまりにも初心者です。

また、の幅と高さを変更するとcubeCamera.renderTarget、つまり

cubeCamera.renderTarget.width = cubeCamera.renderTarget.height = 150;

反射の適切な寸法を取得できますが、表面上の位置が間違っています。下の写真の角度から見ると見えますが、カメラをまっすぐにすると見えません。テクスチャを中央に配置する必要があるようです。

ここに画像の説明を入力

ここに画像の説明を入力

実際のコードは非常に単純です。

var cubeCamera = new THREE.CubeCamera(1, 520, 512);

cubeCamera.position.set(0, 1, 0);
cubeCamera.renderTarget.format = THREE.RGBAFormat;
scene.add(cubeCamera);

var reflectorObj = new THREE.Mesh(
    new THREE.CubeGeometry(20, 20, 20),
    new THREE.MeshPhongMaterial({
        envMap: cubeCamera.renderTarget,
        reflectivity: 0.3
    })
);

reflectorObj.position.set(0, 0, 0);
scene.add(reflectorObj);

var reflectionObj = new THREE.Mesh(
    new THREE.SphereGeometry(5),
    new THREE.MeshBasicMaterial({
        color: 0x00ff00
    })
);

reflectionObj.position.set(0, -5, 20);
scene.add(reflectionObj);

function animate () {
    reflectorObj.visible = false;
    cubeCamera.updateCubeMap(renderer, scene);
    reflectorObj.visible = true;

    renderer.render(scene, camera);  

    requestAnimationFrame(animate);
}

どんな助けにも感謝します！

4

1 に答える 1

1

three.js の環境マッピングは、反射されるオブジェクトが反射面から「無限に」離れているという前提に基づいています。

環境マップのルックアップで使用される反射レイは、反射マテリアルの表面からではなく、CubeCameraの中心から発せられます。反射されたオブジェクトが十分に離れている限り、この近似は問題ありません。あなたの場合はそうではありません。

このトピックの詳細については、このチュートリアルを参照してください。

three.js r.58

于 2013-06-29T22:06:48.550 に答える