CODEWITHSUNDEEP
javascriptthree.jsaframe
Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

Refraction using Three.CubeCamera

I'm trying to set up a refraction sphere in a-frame, following Mr. Lee Stemkoski's example. I've managed to get a reflection sphere, which is basically a strip of the cool a-frame mirror component.

The CubeCamera is created, and its renderTarget is extracted as envMap texture upon initialize:
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 });

Update the cubemap on tick:
tick:

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

Of course, the image is mirrored, because of how the Three.CubeCamera works, so I tried to rotate the texture or flip it somehow, so I won't have a mirror.

As I see Lee Stemkoski is only using: 

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

Any ideas what's wrong in my approaches?

Upvotes: 1

Views: 1317

Answers (2)

prisoner849
prisoner849

Reputation: 17596

You do

refractSphereCamera.renderTarget.mapping = THREE.CubeRefractionMapping;

If you want refraction, it's better to do

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

jsfiddle example

Upvotes: 1

M -
M -

Reputation: 28502

Lee Stemkoski's example was built four years ago for an older version of Three.js. His source code states Date: July 2013 (three.js v59dev), but your fiddle is using v84.

You should look at this example which is compatible with the latest version of Three.js. If you look at the source code, the implementation is much simpler now:

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

Upvotes: 1

Related Questions