Equirectangular CubeTexture refraction background

by JohannesDeml

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'https://rawgit.com/mrdoob/three.js/dev/build/three.module.js'
import { RGBELoader } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/loaders/RGBELoader.js'
import { TrackballControls } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/TrackballControls.js';

var camera, scene, renderer, controls;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 2;

    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    controls = new TrackballControls( camera, renderer.domElement );
  	controls.rotateSpeed = 4;
    
		var envmapurl = 'https://threejs.org/examples/textures/equirectangular/pedestrian_overpass_1k.hdr';
    var pmremGenerator = new THREE.PMREMGenerator( renderer );
    pmremGenerator.compileEquirectangularShader();
     new RGBELoader()
       .setDataType(THREE.UnsignedByteType)
       .load(envmapurl, (texture) => {
       var cubeTex = pmremGenerator.fromEquirectangular(texture).texture;
       cubeTex.mapping = THREE.CubeUVRefractionMapping;
       pmremGenerator.dispose();
       
       scene.background = cubeTex;
       
       geometry = new THREE.SphereBufferGeometry( 0.5, 32, 16 );
       material = new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: cubeTex, refractionRatio: 0.97, roughness: 0.0 } );

       mesh = new THREE.Mesh( geometry, material );
       scene.add( mesh );
     });
  
}

function animate() {

    requestAnimationFrame( animate );

		if(mesh !== undefined) {
    	mesh.rotation.x += 0.01;
    	mesh.rotation.y += 0.02;
    }
    
		controls.update();
    renderer.render( scene, camera );

}