ThreeCubeCameraを使用した屈折

Question

Lee Stemkoskiさんのexampleに続いて、フレームに屈折球を設定しようとしています。私は反射球を得ることに成功しました。これは、基本的には冷たいもののストリップですa-frame mirror component。

CubeCameraが作成され、そのレンダーターゲットが初期化時に環境マップテクスチャとして抽出されます
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; 

もちろん、画像はどのようにThree.CubeCameraを使用するかによってミラーリングされます私は鏡を持っていないので、テクスチャを回転させるか、何とかそれを反転しようとしました。

私はリーStemkoskiのみを使用している見ての通り：

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

• 私はinitのことをやってみましたが、何も変わりません。 fiddleをご覧ください。

• また、テクスチャのオフセット、または垂直反転を試しましたが、何もないhappens。

私のアプローチで何が間違っていますか？

Answer 1

あなたが屈折したい場合は、それが

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

jsfiddle例を実行するために、より良い

refractSphereCamera.renderTarget.mapping = THREE.CubeRefractionMapping; 

だん

Answer 2

Lee Stemkoskiの例は、古いバージョンのThree.jsで4年前に作成されたものです。彼のソースコードはDate: July 2013 (three.js v59dev)ですが、あなたのフィドルはv84を使っています。

this exampleは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 });