light probe box

by grano

HTML

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

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;
let cubeTexture;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
  	camera.position.set( 0, 0, 30 );


    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry();
    material = new THREE.MeshNormalMaterial( { side: THREE.DoubleSide } );
    const mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(-9.5,2,0)
		scene.add( mesh );
    
   
 
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
		
		const controls = new THREE.OrbitControls( camera, renderer.domElement );
///		controls.target.z = 
    
  const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256, {
    encoding: THREE.sRGBEncoding, // since gamma is applied during rendering, the cubeCamera renderTarget texture encoding must be sRGBEncoding
    format: THREE.RGBAFormat
  } );

  cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );

  lightProbe = new THREE.LightProbe();
  scene.add( lightProbe );

//directional ligth
  const dirLight = new THREE.DirectionalLight( 0x00ffff, 1 );
//  dirLight.color.setHSL( 0.1, 1, 0.95 );
  dirLight.position.set( 10, 1.75, -50 );
  dirLight.position.multiplyScalar( 30 );
  scene.add( dirLight );
  const direLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
  scene.add( direLightHelper );



  // envmap
  const genCubeUrls = function ( prefix, postfix ) {

    return [
      prefix + 'px' + postfix, prefix + 'nx' + postfix,
      prefix + 'py' + postfix, prefix + 'ny' + postfix,
      prefix + 'pz' + postfix, prefix + 'nz' + postfix
    ];

  };

  const urls = genCubeUrls( 'https://threejs.org/examples/textures/cube/pisa/', '.png' );
  new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) {
      
    
    geometry1 = new THREE.BoxGeometry();
    material1 = new...