viewer3d.js

import * as THREE from "three";
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";

const stageRegistry = new WeakMap();

function createViewer(stage) {
  if (!stage || stageRegistry.has(stage)) {
    return stageRegistry.get(stage);
  }

  const fallback = stage.querySelector("[data-model-fallback]");
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.setClearColor(0x0f1115, 1);
  renderer.domElement.setAttribute("aria-label", stage.dataset.modelAlt || "3D model preview");
  renderer.domElement.style.touchAction = "none";
  stage.appendChild(renderer.domElement);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0f1115);

  const camera = new THREE.PerspectiveCamera(38, 1, 0.1, 2000);
  camera.position.set(0, 1.1, 4.8);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.enablePan = false;
  controls.enableZoom = true;
  controls.rotateSpeed = 0.9;
  controls.zoomSpeed = 0.9;
  controls.autoRotate = true;
  controls.autoRotateSpeed = 0.9;
  controls.minDistance = 1.2;
  controls.maxDistance = 18;
  controls.addEventListener("start", () => {
    renderer.domElement.style.cursor = "grabbing";
  });
  controls.addEventListener("end", () => {
    renderer.domElement.style.cursor = "grab";
  });
  renderer.domElement.style.cursor = "grab";

  const ambientLight = new THREE.HemisphereLight(0xe8edf7, 0x0f1115, 1.55);
  scene.add(ambientLight);

  const keyLight = new THREE.DirectionalLight(0xffffff, 2.35);
  keyLight.position.set(4, 6, 5);
  scene.add(keyLight);

  const rimLight = new THREE.DirectionalLight(0x8cb3ff, 1.2);
  rimLight.position.set(-5, 3, -4);
  scene.add(rimLight);

  const floor = new THREE.Mesh(
    new THREE.CircleGeometry(3.8, 64),
    new THREE.ShadowMaterial({ color: 0x000000, opacity: 0.22 })
  );
  floor.rotation.x = -Math.PI / 2;
  floor.position.y = -0.9;
  scene.add(floor);

  let modelRoot = null;

  const fitCameraToObject = (object) => {
    const box = new THREE.Box3().setFromObject(object);
    const size = box.getSize(new THREE.Vector3());
    const center = box.getCenter(new THREE.Vector3());
    const maxSize = Math.max(size.x, size.y, size.z) || 1;
    const distance = maxSize * 2.15;

    controls.target.copy(center);
    camera.position.set(center.x + distance * 0.9, center.y + maxSize * 0.35, center.z + distance);
    camera.near = Math.max(maxSize / 100, 0.01);
    camera.far = Math.max(maxSize * 20, 100);
    camera.updateProjectionMatrix();
    controls.update();
  };

  const setFallback = (title, detail) => {
    if (!fallback) {
      return;
    }

    fallback.hidden = false;
    const titleNode = fallback.querySelector("p");
    const detailNode = fallback.querySelector("span");

    if (titleNode) {
      titleNode.textContent = title;
    }

    if (detailNode) {
      detailNode.textContent = detail;
    }
  };

  const hideFallback = () => {
    if (fallback) {
      fallback.hidden = true;
    }
  };

  const loadModel = async () => {
    const src = stage.dataset.modelSrc;
    const modelName = stage.dataset.modelName || "OBJ Preview";
    if (!src) {
      setFallback("OBJ preview", "Falta data-model-src.");
      return;
    }

    const objLoader = new OBJLoader();
    const mtlLoader = new MTLLoader();
    const lastSlashIndex = src.lastIndexOf("/");
    const assetPath = lastSlashIndex >= 0 ? src.slice(0, lastSlashIndex + 1) : "";
    const fileName = lastSlashIndex >= 0 ? src.slice(lastSlashIndex + 1) : src;
    const mtlSrc = `${assetPath}${fileName.replace(/\.obj$/i, ".mtl")}`;

    objLoader.setPath(assetPath);
    mtlLoader.setPath(assetPath);
    mtlLoader.setResourcePath(assetPath);

    try {
      const materials = await mtlLoader.loadAsync(mtlSrc);
      materials.preload();
      objLoader.setMaterials(materials);
    } catch (error) {
      // Fallback to plain OBJ materials when no matching MTL exists.
    }

    try {
      const object = await objLoader.loadAsync(fileName);
      object.traverse((child) => {
        if (!child.isMesh) {
          return;
        }

        child.castShadow = false;
        child.receiveShadow = false;
        child.material.side = THREE.FrontSide;

        if (!child.material) {
          child.material = new THREE.MeshStandardMaterial({
            color: 0xdbe8f7,
            metalness: 0.5,
            roughness: 0.42
          });
        }
      });

      modelRoot = object;
      scene.add(object);
      fitCameraToObject(object);
      hideFallback();
    } catch (error) {
      setFallback(modelName, `No pude cargar ${src}.`);
    }
  };

  const resize = () => {
    const width = Math.max(stage.clientWidth, 1);
    const height = Math.max(stage.clientHeight, 1);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height, false);
  };

  const observer = new ResizeObserver(resize);
  observer.observe(stage);
  resize();
  loadModel();

  const state = { renderer, scene, camera, controls, observer, get modelRoot() { return modelRoot; } };
  stageRegistry.set(stage, state);
  return state;
}

function initializeModelStages(root = document) {
  const stages = root.matches?.("[data-model-stage]")
    ? [root]
    : Array.from(root.querySelectorAll("[data-model-stage]"));

  stages.forEach((stage) => {
    createViewer(stage);
  });
}

function animate() {
  document.querySelectorAll("[data-model-stage]").forEach((stage) => {
    const state = stageRegistry.get(stage);
    if (!state) {
      return;
    }

    state.controls.update();
    state.renderer.render(state.scene, state.camera);
  });

  requestAnimationFrame(animate);
}

window.initializeModelStages = initializeModelStages;

initializeModelStages();
requestAnimationFrame(animate);