js:wrap_lazy-fbx [Cyanide]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

<CSS>

.wrap_fbx-scenes {

	display: 	flex;
	flex-wrap: 	wrap;
	gap: 		1rem;

	.wrap_fbx-scene {

		inline-size: 320px;
		block-size:  240px;
	}
}

.wrap_fbx-scene:has(.lazy-waiting) {
  background-image:
    radial-gradient(
      transparent,
      hsla(0, 0%, 0%, 0.85)),
    linear-gradient(
      transparent    75%, 
      hsl(0, 0%, 0%) 75%),
    linear-gradient(to left, 
      hsl(  0,   0%, 82%) 14.29%,
      hsl( 54, 100%, 50%) 14.29%,
      hsl( 54, 100%, 50%) 28.57%,
      hsl(184, 100%, 50%) 28.57%,
      hsl(184, 100%, 50%) 42.86%,
      hsl(121,  98%, 42%) 42.86%,
      hsl(121,  98%, 42%) 57.14%,
      hsl(320,  93%, 37%) 57.14%,
      hsl(320,  93%, 37%) 71.43%,
      hsl(349, 100%, 50%) 71.43%,
      hsl(349, 100%, 50%) 85.71%,
      hsl(240, 100%, 38%) 85.71%);
  position: relative;
  overflow:hidden;

  &:before {
    content: '';
    position: absolute;
    display: block;
    background-image:
      linear-gradient(to left, 
        hsl(240, 100%, 38%) 14.29%,
        hsl(  0,   0%,  0%) 14.29%,
        hsl(  0,   0%,  0%) 28.57%,
        hsl(320,  93%, 27%) 28.57%,
        hsl(320,  93%, 27%) 42.86%,
        hsl(  0,   0%,  0%) 42.86%,
        hsl(  0,   0%,  0%) 57.14%,
        hsl(184, 100%, 50%) 57.14%,
        hsl(184, 100%, 50%) 71.43%,
        hsl(  0,   0%,  0%) 71.43%,
        hsl(  0,   0%,  0%) 85.71%,
        hsl(  0,  0%, 82%) 85.71%);
    height: 5%;
    width: 100%;
    bottom: 25%;
  }
}


</CSS>

<html>

<script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.180.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.180.0/examples/jsm/"
      }
    }
</script>
    
<script type="module">
        
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { FBXLoader } from "three/addons/loaders/FBXLoader.js";

function loadViewer(viewers, container) {
  
  var input_path = container.getAttribute("src");
  var src_path   = ("/_media/" + input_path).replaceAll(":", "/");
  var basename   = src_path.split('/').reverse()[0];


  var viewer = {};

  viewer.scene = new THREE.Scene();
  viewer.scene.background = new THREE.Color(0x222222);

  viewer.camera = new THREE.PerspectiveCamera(
      60,
      container.clientWidth / container.clientHeight,
      0.1,
      1000
  );
  viewer.camera.position.set(3, 2, 5);

  viewer.cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial({ color: 0xff0000 })
  );

  viewer.scene.add(viewer.cube);

  viewer.renderer = new THREE.WebGLRenderer({ antialias: true });

  viewer.renderer.setSize(container.clientWidth, container.clientHeight);

  container.innerHTML = ""; 
  container.appendChild(viewer.renderer.domElement);


  // Lights
  viewer.scene.add(new THREE.AmbientLight(0xffffff, 1));

  viewer.dirLight1 = new THREE.DirectionalLight(0xffffff, 2);
  viewer.dirLight1.position.set(5, 10, 7);
  viewer.scene.add(viewer.dirLight1);

  // Controls
  viewer.controls = new OrbitControls(viewer.camera, viewer.renderer.domElement);

  // Load FBX
  viewer.loader = new FBXLoader();



  viewer.scene.add(new THREE.GridHelper(100, 10));
  viewer.scene.add(new THREE.AxesHelper(100));

  viewer.scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 3));

  viewer.dirLight2 = new THREE.DirectionalLight(0xffffff, 3);
  viewer.dirLight2.position.set(10, 10, 10);
  viewer.scene.add(viewer.dirLight2);

  viewer.camera.position.set(5, 5, 5);
  viewer.camera.lookAt(0, 0, 0);

  viewer.fbxObject = null;
  viewer.mixer     = null;

  viewer.loader.load(
      src_path,

      (object) => {

        viewer.fbxObject = object;

      viewer.scene.add(object);


    // optional animation
    if (object.animations.length > 0) {
        viewer.mixer = new THREE.AnimationMixer(object);

        object.animations.forEach((clip) => {
            viewer.mixer.clipAction(clip).play();
        });
    }

      const box  = new THREE.Box3().setFromObject(object);
      const size = box.getSize(new THREE.Vector3());

      if (size.length() > 0) {

          const center = box.getCenter(new THREE.Vector3());

          object.position.sub(center);

          const maxSize = Math.max(size.x, size.y, size.z);

          viewer.camera.position.set(
              maxSize * 2,
              maxSize * 2,
              maxSize * 2
          );

          viewer.camera.lookAt(0,0,0);

          viewer.controls.target.set(0,0,0);
          viewer.controls.update();

      } else {

          console.warn("FBX contains no visible geometry", container.getAttribute("src"));

          // Keep the original camera
          viewer.camera.position.set(5,5,5);
          viewer.camera.lookAt(0,0,0);
      }

  },

      (xhr) => {
          /*console.log(
              "Loading:",
              (xhr.loaded / xhr.total * 100).toFixed(1) + "%"
          );*/
      },
      (error) => {
          console.error("FBX error:", error, container.getAttribute("src"));
      }
  );

  viewer.animationFrame = null;
  viewer.animate = function animate() {
      viewer.animationFrame = requestAnimationFrame(viewer.animate);
      viewer.controls.update();
      viewer.renderer.render(viewer.scene, viewer.camera);
  };

  viewer.animate();

  window.addEventListener('resize', () => {
      viewer.camera.aspect = window.innerWidth / window.innerHeight;
      viewer.camera.updateProjectionMatrix();
      viewer.renderer.setSize(window.innerWidth, window.innerHeight);
  });

  viewers.set(container, viewer);

}
  
  
function disposeObject(object) {

    object.traverse((child) => {

        if (child.isMesh) {

            // Geometry
            if (child.geometry) {
                child.geometry.dispose();
            }

            // Material(s)
            if (child.material) {

                if (Array.isArray(child.material)) {
                    child.material.forEach(material => {
                        disposeMaterial(material);
                    });
                } else {
                    disposeMaterial(child.material);
                }
            }
        }
    });
}


function disposeMaterial(material) {

    // Textures
    Object.keys(material).forEach((key) => {

        const value = material[key];

        if (value && value.isTexture) {
            value.dispose();
        }
    });

    material.dispose();
}
  
  
  
function destroyViewer(viewers, container) {

    var viewer = viewers.get(container);
   

    // Stop controls events
    if (viewer.controls) {
        viewer.controls.dispose();
    }

    // Stop animations
  
  cancelAnimationFrame(viewer.animationFrame);
  viewer.animate = null;
  
    if (viewer.mixer && viewer.fbxObject) {
        viewer.mixer.stopAllAction();
        viewer.mixer.uncacheRoot(viewer.fbxObject);
    }

    // Dispose FBX resources
    if (viewer.fbxObject) {
        disposeObject(viewer.fbxObject);
        viewer.scene.remove(viewer.fbxObject);
        viewer.fbxObject = null;
    }

    // Remove all scene objects
    viewer.scene.clear();

    // Release renderer resources
    viewer.renderer.dispose();

    // Force WebGL context release
    viewer.renderer.forceContextLoss();

    // Remove canvas from div
    if (viewer.renderer.domElement) {
        viewer.renderer.domElement.remove();
    }

    // Empty the div completely
    container.innerHTML = "";

    // Remove references
    viewer.scene    = null;
    viewer.camera   = null;
    viewer.renderer = null;
    viewer.controls = null;
    viewer.mixer    = null;

    viewer = null;

    viewers.delete(container);
}


document.addEventListener("DOMContentLoaded", () => {
  
  
  document.querySelectorAll(".wrap_fbx-scenes .wrap_fbx-scene").forEach(function(wrap_scene) {
  
    wrap_scene.setAttribute("src", wrap_scene.textContent);
    wrap_scene.innerHTML = "";
    
  });
  

  const viewers = new WeakMap();

  const wrap_scenes = document.querySelectorAll(".wrap_fbx-scenes .wrap_fbx-scene");

  // Track state to avoid repeated work
  const state = new WeakMap();

  // Batch updates per frame
  let pending   = new Set();
  let scheduled = false;

  const schedule = (fbx, isVisible) => {
    pending.add({ fbx, isVisible });

    if (!scheduled) {
      scheduled = true;

      requestAnimationFrame(() => {
        for (const item of pending) {
          if (item.isVisible) {
            loadFBX(item.fbx);
          } else {
            unloadFBX(item.fbx);
          }
        }

        pending.clear();
        scheduled = false;
      });
    }
  };

  const loadFBX = (fbx) => {
    const s = state.get(fbx);
    if (s === "loaded") return;

    loadViewer(viewers, fbx);

    state.set(fbx, "loaded");
    fbx.classList.remove("lazy-waiting");
  };

  const unloadFBX = (fbx) => {
    const s = state.get(fbx);
    if (s === "unloaded") return;

    destroyViewer(viewers, fbx);

    state.set(fbx, "unloaded");
    fbx.classList.add("lazy-waiting");
  };

  // Visibility debounce per element
  const visibilityTimers = new WeakMap();

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        const fbx = entry.target;

        // Clear previous debounce
        if (visibilityTimers.has(fbx)) {
          clearTimeout(visibilityTimers.get(fbx));
        }

        // Debounce visibility changes
        const t = setTimeout(() => {
          const isVisible = entry.isIntersecting;

          // Optional buffer: avoid unload too aggressively
          schedule(fbx, isVisible);
        }, 120); // 100–150ms is typical

        visibilityTimers.set(fbx, t);
      }
    },
    {
      root: null,
      threshold: 0.25,
      rootMargin: "300px 0px" // preload slightly before visible
    }
  );

  wrap_scenes.forEach((v) => {
    state.set(v, "unloaded");
    observer.observe(v);
  });
});

  
</script></html>