javascript - How to fix camera vibrations and unreadable pixels in IFC.js viewer with Three.js and React - Stack Overflow

admin管理员组

文章数量:1345469

I'm developing a React application using IFC.js and Three.js to visualize complex BIM models. However, I'm facing two major issues:

• Camera vibrations during transitions/selections

  When clicking on an element or transitioning through the model, the camera experiences unpleasant vibrations.

• A Unreadable pixels on some elements

  Some elements appear with pixelation artifacts, making text and fine details difficult to read.

Here is the useEffect hook that initializes the IFC.js viewer:

useEffect(() => {
  const initViewer = async () => {
    if (!containerRef.current || initializedRef.current) return;
    
    try {
      initializedRef.current = true;

      // Initialize IFC.js Viewer
      const viewer = new IfcViewerAPI({
        container: containerRef.current,
        backgroundColor: new THREE.Color(0xeeeeee),
      });

      // Ensure renderer is ready
      await new Promise<void>((resolve) => {
        const checkReady = () => {
          if (viewer.context?.getRenderer()) {
            const renderer = viewer.context.getRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.logarithmicDepthBuffer = true;
            renderer.sortObjects = true;
            resolve();
          } else {
            setTimeout(checkReady, 50);
          }
        };
        checkReady();
      });

      // Set IFC.js configurations
      await viewer.IFC.setWasmPath("wasm/");
      viewer.clipper.active = true;
      viewerRef.current = viewer;
      
      // Handle element selection (causing vibrations)
      containerRef.current.ondblclick = async () => {
         const result = await viewer.IFC.selector.pickIfcItem(false);
         if (!result) {
           viewer.IFC.selector.unpickIfcItems();
         }
      };

      // Handle resizing
      const resizeObserver = new ResizeObserver(() => {
        if (containerRef.current && viewer.context?.getRenderer()) {
          viewer.context.getRenderer().setSize(
            containerRef.current.clientWidth,
            containerRef.current.clientHeight
          );
          viewer.context.ifcCamera?.cameraControls?.update();
        }
      });
      resizeObserver.observe(containerRef.current);

      // Loading IFC models...
    } catch (error) {
      console.error("Initialization error:", error);
    }
  };

  initViewer();
}, [searchParams]);

What I've already tried

• Adjusting pixelRatio (renderer.setPixelRatio(window.devicePixelRatio))
• Enabling logarithmicDepthBuffer and sortObjects
• Dynamically resizing the renderer

Questions

• How can I eliminate vibrations during transitions and element selections?

• How can I improve the display quality to make unreadable elements sharper?

• Are there specific Three.js or IFC.js parameters that could solve these issues?

Technical environment

• React 18

• Three.js (latest version)

• IFC.js

• Tested browsers: Chrome & Firefox (latest versions)

本文标签：