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>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;
let cubeTexture;
const params = {
	lightPosX: 2,
  lightPosY: 1.75,
  lightPosZ: -10,
  pLightPosX: 2,
  pLightPosY: 1.75,
  pLightPosZ: -10,
}

init();
animate();

function init() {

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


    scene = new THREE.Scene();
    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 );

// ambient light
			const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
			scene.add( ambientLight );


//directional light
  const dirLight = new THREE.DirectionalLight( 0x00ffff, 1 );
//  dirLight.color.setHSL( 0.1, 1, 0.95 );
  dirLight.position.set( params.lightPosX, params.lightPosY, params.lightPosZ );
  dirLight.position.multiplyScalar( 30 );
//  scene.add( dirLight );
  const direLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
//  scene.add( direLightHelper );

  const pointLight = new THREE.PointLight( 0x00ffff, 1 );
    const pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
  pointLight.position.set( params.pLightPosX, params.pLightPosY, params.pLightPosZ );
    scene.add( pointLight );
    scene.add( pointLightHelper );


  
  // box
    geometry1 = new THREE.BoxGeometry();
    material1 = new THREE.MeshStandardMaterial( { 
	    side: THREE.DoubleSide,
    } );
    const mesh1 = new THREE.Mesh( geometry1, material1 );
    mesh1.position.set(-20,0,0)
//    mesh1.scale.set(2, 2,2)
    mesh1.scale.set(6, 6,6)
    scene.add( mesh1 );
    
    //plane
    geometry2 = new THREE.PlaneGeometry(1,1);
    material2 = new THREE.MeshStandardMaterial( { 
//    material2 = new THREE.MeshBasicMaterial( { 
	    side: THREE.DoubleSide,
    } );
    const plane = new THREE.Mesh( geometry2, material2...