body{
  overflow: hidden;
  margin: 0;
}

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";

import { EffectComposer } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/UnrealBloomPass.js";

console.clear();
//THREE.ColorManagement.legacyMode = false;

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(-0.75, 0.375, 1).setLength(6);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", (event) => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  composer.setSize(innerWidth, innerHeight);
});

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

let light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let glowMagenta = new THREE.MeshBasicMaterial({
  color: new THREE.Color(10, 0.1, 10), // zen with color components
  toneMapped: false
});
let glowAqua = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0, 10, 10),
  toneMapped: false,
  wireframe: true
});

let glowingSphere = new THREE.Mesh(
  new THREE.SphereGeometry(1),
  glowMagenta
);
scene.add(glowingSphere);

let glowingSphere2 = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1, 2),
  glowAqua
);
scene.add(glowingSphere2);

let sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1),
  new THREE.MeshLambertMaterial({ color: new THREE.Color(1, 0.5, 0.1) })
);
scene.add(sphere);

[sphere, glowingSphere, glowingSphere2].forEach((s, i) => {
  let a = (i * Math.PI * 2) / 3;
  s.position
    .set(Math.cos(a), 0, Math.sin(-a))
    .setLength(2);
});

const params = {
  bloomStrength: 1,
  bloomRadius: 1,
  bloomThreshold: 1
};
const renderScene = new RenderPass(scene, camera);

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  params.bloomStrength,
  params.bloomRadius,
  params.bloomThreshold
);

let rt = new THREE.WebGLRenderTarget(innerWidth, innerHeight, {
  type: THREE.FloatType,
  encoding: THREE.sRGBEncoding,
  minFilter: THREE.NearestFilter,
  magFilter: THREE.NearestFilter,
  samples: 4
});
let composer = new EffectComposer(renderer, rt);
composer.addPass(renderScene);
composer.addPass(bloomPass);

renderer.setAnimationLoop(() => {
  //renderer.render(scene, camera);
  composer.render();
});