web-dev-qa-db-ja.com

THREE.jsの反射素材

シーンの他の形状を反映するマテリアルを作成するにはどうすればよいですか？ reflectivityプロパティを試しましたが、何も反映されませんでした。

この効果があると思われる例があります： http://threejs.org/examples/#webgl_shading_physical

これを作成するために標準的な材料が使用されたようには見えません。

javascript3dthree.jswebgl
12
MCSharp

少し理論を説明すると、反射は基本的に特定の位置から撮影されたシーンの画像です。したがって、平面メッシュをミラーとして機能させる場合は、その位置にカメラを追加し、アニメーションループでシーンをテクスチャにレンダリングしてから、平面メッシュのマテリアルでそのテクスチャを使用する必要があります。 。 WestLangleyが言及した例に加えて、 http://stemkoski.github.io/Three.js/Reflection.html も参照することをお勧めします。

また、設定をいじってみてください。たとえば、反射の少ない効果を得るには、次のことを試してください。

var mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: mirrorCamera.renderTarget } );

または

var mirrorMaterial = new THREE.MeshPhongMaterial( { emissive: 0x111111, envMap: mirrorCamera.renderTarget } );
8
Lee Stemkoski

https://threejs.org/examples/#webgl_materials_cubemap
上記の例でそれを行いました：

new THREE.MeshLambertMaterial ({
    map: texture,    
    envMap: scene.background,      
    combine: THREE.MixOperation,     
    reflectivity: .5     
})

私が理解しているように、重要な変数はTHREE.MixOperationです。

0
Hoxz