function setupScene()

in depth-anything/main.js [79:153]


function setupScene(url, w, h) {
  // Create new scene
  const canvas = document.createElement("canvas");
  const width = (canvas.width = imageContainer.offsetWidth);
  const height = (canvas.height = imageContainer.offsetHeight);

  const scene = new THREE.Scene();

  // Create camera and add it to the scene
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.01, 10);
  camera.position.z = 2;
  scene.add(camera);

  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(width, height);
  renderer.setPixelRatio(window.devicePixelRatio);

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

  // Load depth texture
  const image = new THREE.TextureLoader().load(url);
  image.colorSpace = THREE.SRGBColorSpace;
  const material = new THREE.MeshStandardMaterial({
    map: image,
    side: THREE.DoubleSide,
  });
  material.displacementScale = DEFAULT_SCALE;

  const setDisplacementMap = (canvas) => {
    material.displacementMap = new THREE.CanvasTexture(canvas);
    material.needsUpdate = true;
  };

  const setDisplacementScale = (scale) => {
    material.displacementScale = scale;
    material.needsUpdate = true;
  };
  onSliderChange = setDisplacementScale;

  // Create plane and rescale it so that max(w, h) = 1
  const [pw, ph] = w > h ? [1, h / w] : [w / h, 1];
  const geometry = new THREE.PlaneGeometry(pw, ph, w, h);
  const plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

  // Add orbit controls
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  renderer.setAnimationLoop(() => {
    renderer.render(scene, camera);
    controls.update();
  });

  window.addEventListener(
    "resize",
    () => {
      const width = imageContainer.offsetWidth;
      const height = imageContainer.offsetHeight;

      camera.aspect = width / height;
      camera.updateProjectionMatrix();

      renderer.setSize(width, height);
    },
    false,
  );

  return {
    canvas: renderer.domElement,
    setDisplacementMap,
  };
}