Inspire

//Imports for standard Threejs
import * as THREE from "three";

//Imports for pmndrs post processing library
import { WebGLRenderer } from "three";
import {
  SelectiveBloomEffect,
  BlendFunction,
  EffectComposer,
  EffectPass,
  RenderPass,
  SMAAEffect,
  SMAAPreset,
  EdgeDetectionMode,
  PredicationMode,
  TextureEffect,
} from "postprocessing";

// Create scene
const scene = new THREE.Scene();

// Create red GLOWING cube BASIC
const redGeometry = new THREE.BoxGeometry();
const redMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color().setRGB(1, 0, 0),
});
// color is set to 10 in order to go out of glow threshold
const redCube = new THREE.Mesh(redGeometry, redMaterial);
redCube.position.x = -2; // Position to the left
scene.add(redCube);
console.log(redCube);

// Create green cube (NON-GLOWING)
const greenGeometry = new THREE.BoxGeometry();
const greenMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const greenCube = new THREE.Mesh(greenGeometry, greenMaterial);
greenCube.position.x = 2; // Position to the right
scene.add(greenCube);

// Create camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
camera.position.z = 5;

// Create renderer
const renderer = new WebGLRenderer({
  powerPreference: "high-performance",
  antialias: false,
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//Create Effects
const bloomEffect = new SelectiveBloomEffect(scene, camera, {
  intensity: 5,
  mipmapBlur: true,
  luminanceThreshold: 0,
  luminanceSmoothing: 0.2,
  radius: 0.618,
  resolutionScale: 4,
});

bloomEffect.selection.add(redCube);

const AAeffect = new SMAAEffect({
  blendFunction: BlendFunction.NORMAL,
  preset: SMAAPreset.MEDIUM,
  edgeDetectionMode: EdgeDetectionMode.COLOR,
  predicationMode: PredicationMode.DEPTH,
});

const edgeDetectionMaterial = AAeffect.edgeDetectionMaterial;
edgeDetectionMaterial.edgeDetectionThreshold = 0.02;
edgeDetectionMaterial.predicationThreshold = 0.002;
edgeDetectionMaterial.predicationScale = 1;

const AAeffectPass = new EffectPass(camera, AAeffect);

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, bloomEffect));
composer.addPass(AAeffectPass);

// Animation function
const animate = () => {
  requestAnimationFrame(animate);

  // Rotate cubes
  redCube.rotation.x += 0.01;
  redCube.rotation.y += 0.01;
  greenCube.rotation.x += 0.01;
  greenCube.rotation.y += 0.01;

  composer.render(scene, camera);
};

// Handle window resize
window.addEventListener("resize", () => {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;

  camera.aspect = newWidth / newHeight;
  camera.updateProjectionMatrix();

  composer.setSize(newWidth, newHeight);
});

// Start animation
animate();