Question

我正试图在Lee Stemkoski先生的example之后在一个框架中建立一个折射球体。我设法得到了一个反射球体，它基本上是一个很酷的a-frame mirror component。

创建CubeCamera，初始化时将其renderTarget提取为envMap纹理：
的初始化：

bar

在刻度线上更新立方体贴图：
的剔

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

当然，由于Three.CubeCamera的工作方式，图像是镜像的，所以我尝试旋转纹理或以某种方式翻转它，所以我不会有镜子。

我认为Lee Stemkoski只使用：

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

我尝试在init上执行此操作，但没有任何更改。查看fiddle。
此外，我尝试抵消纹理或垂直翻转，但没有happens。

任何想法我的方法有什么问题？

Answer 1

Lee Stemkoski的例子是四年前为旧版本的Three.js建造的。他的源代码陈述Date: July 2013 (three.js v59dev)，但你的小提琴正在使用v84。

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

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

Answer 2

你做

refractSphereCamera.renderTarget.mapping = THREE.CubeRefractionMapping;

如果你想要折射，最好做

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

jsfiddle示例

折射使用Three.CubeCamera

2 个答案: