Glass ball

by Anton Bagayev

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 300);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMappingExposure = 5.0;
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin("");
loader.setPath('https://threejs.org/examples/textures/cube/SwedishRoyalCastle/');

var cubeTexture1 = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);

var cubeTexture2 = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);

scene.background = cubeTexture1;

var baseObj = new THREE.Group();

var sphereGeometry = new THREE.BoxGeometry(50, 64, 64);

var first = new THREE.Mesh( sphereGeometry, new THREE.MeshPhysicalMaterial({
  color: "white",
  envMap: cubeTexture1,
  refractionRatio: 0.8,
  opacity: 0.8,
  transparent: true,
  premultipliedAlpha: false,
  roughness: 0,
  metalness: 1.0,
  side: 0
}));
first.material.envMap.mapping = THREE.CubeRefractionMapping;
baseObj.add(first);

var second = new THREE.Mesh(sphereGeometry, new THREE.MeshPhysicalMaterial({
  color: "white",
  envMap: cubeTexture2,
  transparent: true,
  premultipliedAlpha: true,
  opacity: 0,
  roughness: 0,
  metalness: 1.0
}));
second.material.envMap.mapping = THREE.CubeReflectionMapping;
baseObj.add(second);

scene.add(baseObj);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}