從對象移動時製作環境貼圖縮放比例

我使用CubeCamera構建簡單的反射模型。該設置可以在下面的圖片中看到。從對象移動時製作環境貼圖縮放比例

enter image description here

如果相機是足夠接近立方體 - 反射看起來很好。但是，如果我遠離物體 - 反射會變得更大。看下面的圖片。

enter image description here

這不是我想要的方式。我希望反射比例變小。我試着玩不同的設置，然後我認爲這可以通過使用合適的着色器程序來實現（只是擠壓立方體紋理，類型），所以我試圖弄亂現有的PhongShader，但沒有運氣，太新手了。

另外，我注意到，如果我改變寬度和cubeCamera.renderTarget的高度，即

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

我能得到反射的適當尺寸，但它的表面上的位置是錯誤的。從下圖所示的角度可以看到，但如果我將攝像機放置在直線上，則不可見。看起來紋理需要居中。

enter image description here

實際的代碼是非常簡單的：

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); 
}

感謝任何幫助！

來源

2013-06-29 angryobject

three.js中的環境映射基於以下假設：被反射的對象遠離反射表面是「無限」的。

用於環境地圖查找的反射光線不是從反射材料表面發出的，而是從CubeCamera的中心發出的。只要反射物體足夠遠，這種近似就可以了。在你的情況下，它不是。

您可以在tutorial中閱讀關於此主題的更多信息。

three.js r.58

來源

2013-06-29 22:06:48 WestLangley

感謝您的鏈接！這很有用。是的，我瞭解基本的假設，但是沒有任何巧妙的方法來改變默認行爲？例如，將凸輪位置作爲統一傳遞給着色器，並根據物體和凸輪之間的距離來縮放紋理？然後用什麼技術來實現鏡像反射模型？ – angryobject

在three.js框架內，您可以[複製幾何圖形]（http://threejs.org/examples/webgl_geometry_text.html），或者您可以[愚弄眼睛]（http://threejs.org/examples/） webgl_materials_cubemap_dynamic2.html），希望沒有人注意到。 – WestLangley

好吧，我明白了。感謝您的解釋！將嘗試從這個演示文稿中挑選一些技術http://29a.ch/slides/2012/webglwater/#title，看起來像作者用着色器反思水面。將看到它是如何去。 – angryobject

從對象移動時製作環境貼圖縮放比例

回答

相關問題