앰비언트 오클루전

<span class="ao-cap">ambient occlusion · contact darkening</span>

.ao-cap{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-size:clamp(9px,2.4vmin,12px);color:#dfe3ffcc}

import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d0d14);
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(0, 1.5, 5.6);

const floor = new THREE.Mesh(new THREE.PlaneGeometry(8, 8), new THREE.MeshStandardMaterial({ color: 0x2a2a3a, roughness: 0.9 }));
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
const wall = new THREE.Mesh(new THREE.PlaneGeometry(8, 4), new THREE.MeshStandardMaterial({ color: 0x232332, roughness: 0.9 }));
wall.position.set(0, 2, -2); scene.add(wall);

const sphere = new THREE.Mesh(new THREE.SphereGeometry(1.1, 48, 48), new THREE.MeshStandardMaterial({ color: 0xffb648, roughness: 0.6 }));
sphere.position.set(-0.2, 1.1, -0.8);
scene.add(sphere);
scene.add(new THREE.HemisphereLight(0xffffff, 0x1a1a22, 1.1));

function makeAoTex() {
  const c = document.createElement('canvas'); c.width = c.height = 128;
  const g = c.getContext('2d');
  const rad = g.createRadialGradient(64, 64, 4, 64, 64, 64);
  rad.addColorStop(0, 'rgba(0,0,0,0.75)'); rad.addColorStop(1, 'rgba(0,0,0,0)');
  g.fillStyle = rad; g.fillRect(0, 0, 128, 128);
  return new THREE.CanvasTexture(c);
}
const aoTex = makeAoTex();
const aoFloor = new THREE.Mesh(new THREE.CircleGeometry(1.6, 32), new THREE.MeshBasicMaterial({ map: aoTex, transparent: true, depthWrite: false }));
aoFloor.rotation.x = -Math.PI / 2;
aoFloor.position.set(-0.2, 0.01, -0.6);
scene.add(aoFloor);
const aoWall = aoFloor.clone();
aoWall.rotation.x = 0;
aoWall.position.set(-0.2, 1.6, -1.98);
scene.add(aoWall);

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const cycle = (Math.sin(t * 0.0007) + 1) / 2;
  aoFloor.material.opacity = cycle;
  aoWall.material.opacity = cycle;
  sphere.rotation.y = t * 0.0003;
  camera.lookAt(-0.1, 0.9, -0.6);
  renderer.render(scene, camera);
});