Javascript 三立方体折射

我正试图按照李·斯特姆科斯基先生的方法，在a帧中设置一个折射球体。我已经设法得到了一个反射球，它基本上是一条很酷的带子

创建立方体立方体，并在初始化时将其渲染目标提取为envMap纹理：
Init:

this.refractionCamera = new THREE.CubeCamera( 0.5, 3000, 128);
this.el.object3D.add( this.refractionCamera );
this.refractionMaterial = new THREE.MeshBasicMaterial({ 
        color: 0xffffff, 
        refractionRatio: 0.4, 
        envMap: this.refractionCamera.renderTarget.texture });

this.refractionCamera.updateCubeMap( AFRAME.scenes[0].renderer,                         
this.el.sceneEl.object3D );
this.mesh.material = this.refractionMaterial;

在勾选时更新立方体贴图：
勾选：

this.refractionCamera = new THREE.CubeCamera( 0.5, 3000, 128);
this.el.object3D.add( this.refractionCamera );
this.refractionMaterial = new THREE.MeshBasicMaterial({ 
        color: 0xffffff, 
        refractionRatio: 0.4, 
        envMap: this.refractionCamera.renderTarget.texture });

this.refractionCamera.updateCubeMap( AFRAME.scenes[0].renderer,                         
this.el.sceneEl.object3D );
this.mesh.material = this.refractionMaterial;

当然，图像是镜像的，因为Three.CubeCamera是如何工作的，所以我尝试旋转纹理或以某种方式翻转它，所以我没有镜像

正如我所见，Lee Stemkoski仅使用：

refractSphereCamera.renderTarget.mapping = new THREE.CubeRefractionMapping();

• 我试着在init上这样做，但没有任何改变。看看这本书

• 此外，我尝试偏移纹理，或垂直翻转，但没有

---

你知道我的方法有什么问题吗？

Lee Stemkoski的例子是四年前为旧版本的Three.js构建的。他的源代码声明日期：2013年7月（three.js v59dev），但您的小提琴使用的是v84

您应该看看哪个与最新版本的Three.js兼容。如果您查看源代码，现在的实现要简单得多：

// Load textureCube, change mapping from reflection to refraction
var textureCube = new THREE.CubeTextureLoader().load( urls );
textureCube.mapping = THREE.CubeRefractionMapping;

// Assign textureCube to background
scene = new THREE.Scene();
scene.background = textureCube;

// Use textureCube as environment map, which will use refraction mapping.
var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity: 0.9 } );

是吗

如果你想要折射，最好这样做

refractSphereCamera.renderTarget.texture.mapping = THREE.CubeRefractionMapping;

---

示例

您可能希望更新示例代码，以使用CubeCamera的渲染作为textureCube的图像，而不是URL，因为这是OP特别要求帮助的内容。另外，示例是three.js的r60，如控制台中所示。我确实意识到，Lee Stemkoski的示例使用的是旧版本，因此我使用了（..）.mapping=Three.CubeRefractonMapping，而不是“new Three.CubeRefractionMapping（）”，（第一部分）2。我还知道，我可以在envMap纹理上进行折射，这比更新6个摄影机并用其创建envMap纹理要高效得多。3.因此，如果您将textureCube替换为my CubeCamera.renderTarget，并放弃背景指定，如果您想要折射，它似乎与我的第一次尝试（first fiddle）相同，那么为什么不尝试

this.refractionCamera.renderTarget.texture.mapping=THREE.CuberRefractionMapping？@prisoner849我有点想在第一把小提琴上实现它：，或者你是指其他东西吗？你是对的，我试图在renderTarget上进行映射，而不是在renderTarget.texture上！非常感谢。@Piotradamilewski不客气。感谢您指向
新的
关键字）我在答案中忽略了它）没问题，只是想避免将来的混淆：），再次感谢！