import {
  Color, PerspectiveCamera, Quaternion, Scene, Vector3, WebGLRenderer
} from 'three';
import Raymarcher from 'three-raymarcher';

const aspect = window.innerWidth / window.innerHeight;
const camera = new PerspectiveCamera(70, aspect, 0.01, 1000);
const renderer = new WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new Scene();
const raymarcher = new Raymarcher({
  layers: [
    [
      {
        color: new Color(0xFF0000),
        operation: Raymarcher.operations.union,
        position: new Vector3(-1.5, 0, -4),
        rotation: new Quaternion(0, 0, 0, 1),
        scale: new Vector3(1, 1, 1),
        shape: Raymarcher.shapes.box,
      },
    ],
    [
      {
        color: new Color(0x00FF00),
        operation: Raymarcher.operations.union,
        position: new Vector3(0, 0, -4),
        rotation: new Quaternion(0, 0, 0, 1),
        scale: new Vector3(0.5, 1, 0.5),
        shape: Raymarcher.shapes.capsule,
      },
    ],
    [
      {
        color: new Color(0x0000FF),
        operation: Raymarcher.operations.union,
        position: new Vector3(1.5, 0, -4),
        rotation: new Quaternion(0, 0, 0, 1),
        scale: new Vector3(1, 1, 1),
        shape: Raymarcher.shapes.sphere,
      }
    ],
  ],
});
scene.add(raymarcher);

renderer.setAnimationLoop(() => (
  renderer.render(scene, camera)
));

(new RGBELoader()).load('environment.hdr', (texture) => {
  raymarcher.userData.envMap = (new PMREMGenerator(renderer)).fromEquirectangular(texture).texture;
  raymarcher.userData.envMapIntensity = 0.7;
});

const [hit] = raycaster.intersectObject(raymarcher);
if (hit) {
  console.log(
    hit.entityId, // The index of the intersected entity
    hit.entity, // A reference to the intersected entity
    hit.layerId, // The index of the intersected entity layer
    hit.layer, // A reference to the intersected entity layer
  );
}