CODEWITHSUNDEEP
javascriptthree.js
Andy Jazz
Andy Jazz

Reputation: 58503

Seeing a refraction effect not only for scene BG but also for 3D models

I'd like to apply a refraction material to sphere object. I need to see through this sphere not only a scene background but also other 3D geometry located in the scene. I can setup envMap parameter using Scene.background.

var scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader().setPath( '/path/to/my/assets/' )
                                                 .load( [ 'pX.png', 'nX.png', 
                                                          'pY.png', 'nY.png', 
                                                          'pZ.png', 'nZ.png' ] );

var geometry = new THREE.SphereBufferGeometry( 50, 25, 15 );

var refractedMaterial = new THREE.MeshBasicMaterial( { color: 0xfffffc, 
                                                      envMap: scene.background, 
                                             refractionRatio: 1.00 } );

var sphereMesh = new THREE.Mesh( geometry, refractedMaterial );

// And here are some 3D text for example...
// I can see this 3D text in my scene 
// but I can't see it thru refractive sphere
var textMesh = new THREE.Mesh( textGeometry, textMaterial );

scene.add( sphereMesh );
scene.add( textMesh );

QUESTION:

What parameter of MeshBasicMaterial( parameters : Object ) is responsible for visibility of scene geometry, not only a scene background?

Upvotes: 2

Views: 82

Answers (1)

Mugen87
Mugen87

Reputation: 31076

This kind of refraction technique does not do what you are looking for. It just works with the given environment map/background but not with other objects in the scene.

You might want to use THREE.Refractor which makes it possible to honor other objects in your scene. Check out the official demo to see its usage in action:

https://threejs.org/examples/#webgl_refraction

However, THREE.Refractor only works with flat surfaces so you can't apply it to a sphere geometry.

Upvotes: 2

Related Questions