Add support fullscreen for online 3D Viewer for CAD files preview #14622

New Issue

GiteaMirror · 2025-11-02T11:17:57-06:00

GiteaMirror commented

2025-11-02 11:17:57 -06:00

Originally created by @gitlog on GitHub (Jun 18, 2025).

Feature Description

Added support for full-screen viewing and fixed the script paths based on the settings.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Supported 3D file types
    const fileTypes = ['3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb', 'gltf', 'ifc', 'igs', 'iges', 'stp', 'step', 'stl', 'obj', 'off', 'ply', 'wrl'];

    // Select matching link
    const links = Array.from(document.querySelectorAll('a.ui.mini.basic.button'));
    const link3D = links.find(link => {
      const href = link.href.toLowerCase();
      return href.includes('/raw/') && fileTypes.some(ext => href.endsWith(`.${ext}`));
    });

    if (link3D) {
      const script = document.createElement('script');
      script.onload = () => {
        const fileUrl = link3D.getAttribute('href');

        // Prepare the container for the viewer
        const fileView = document.querySelector('.file-view');
        if (fileView) {
          fileView.setAttribute('id', 'view-3d');
          fileView.style.padding = '0';
          fileView.style.margin = '0';
          fileView.style.height = '400px';
          fileView.style.width = '100%';
          fileView.style.background = 'var(--color-box-body)';
          fileView.innerHTML = '';
        }

        // Initialize viewer
        const parentDiv = document.getElementById('view-3d');
        if (parentDiv) {

          const viewer = new OV.EmbeddedViewer(parentDiv, {
            backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // Transparent
            defaultColor: new OV.RGBColor(65,131, 196),
            edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
          });

          // fullscreen
          const fullScreenHandler = function() {

            if(document.fullscreenElement === fileView) {
              document.exitFullscreen();
            } else {
              fileView.requestFullscreen = fileView.requestFullscreen || 
                  fileView.mozRequestFullScreen || 
                  fileView.webkitRequestFullscreen || 
                  fileView.msRequestFullscreen;
              fileView.requestFullscreen();
            }
          }

          buttonFullScreen = document.createElement('button');
          buttonFullScreen.setAttribute('class', 'ui mini basic button');
          buttonFullScreen.setAttribute('id', 'modelFullScreen');
          buttonFullScreen.innerHTML = 'FullScreen'; // This replace icon
          buttonFullScreen.addEventListener('click', function() {
            fullScreenHandler();
          });

          const buttons = document.querySelector('.ui .buttons');
          buttons.after(buttonFullScreen);

          fileView.addEventListener('contextmenu', function() {
            fullScreenHandler();
          });

          // Load the model
          viewer.LoadModelFromUrlList([fileUrl]);
        }
      };

      script.src = window.config.appSubUrl + '/assets/o3dv/o3dv.min.js';
      document.head.appendChild(script);
    }
  });
</script>

https://github.com/go-gitea/gitea/issues/34135

Screenshots

No response

Originally created by @gitlog on GitHub (Jun 18, 2025). ### Feature Description Added support for full-screen viewing and fixed the script paths based on the settings. ```html <script> document.addEventListener('DOMContentLoaded', () => { // Supported 3D file types const fileTypes = ['3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb', 'gltf', 'ifc', 'igs', 'iges', 'stp', 'step', 'stl', 'obj', 'off', 'ply', 'wrl']; // Select matching link const links = Array.from(document.querySelectorAll('a.ui.mini.basic.button')); const link3D = links.find(link => { const href = link.href.toLowerCase(); return href.includes('/raw/') && fileTypes.some(ext => href.endsWith(`.${ext}`)); }); if (link3D) { const script = document.createElement('script'); script.onload = () => { const fileUrl = link3D.getAttribute('href'); // Prepare the container for the viewer const fileView = document.querySelector('.file-view'); if (fileView) { fileView.setAttribute('id', 'view-3d'); fileView.style.padding = '0'; fileView.style.margin = '0'; fileView.style.height = '400px'; fileView.style.width = '100%'; fileView.style.background = 'var(--color-box-body)'; fileView.innerHTML = ''; } // Initialize viewer const parentDiv = document.getElementById('view-3d'); if (parentDiv) { const viewer = new OV.EmbeddedViewer(parentDiv, { backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // Transparent defaultColor: new OV.RGBColor(65,131, 196), edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1), }); // fullscreen const fullScreenHandler = function() { if(document.fullscreenElement === fileView) { document.exitFullscreen(); } else { fileView.requestFullscreen = fileView.requestFullscreen || fileView.mozRequestFullScreen || fileView.webkitRequestFullscreen || fileView.msRequestFullscreen; fileView.requestFullscreen(); } } buttonFullScreen = document.createElement('button'); buttonFullScreen.setAttribute('class', 'ui mini basic button'); buttonFullScreen.setAttribute('id', 'modelFullScreen'); buttonFullScreen.innerHTML = 'FullScreen'; // This replace icon buttonFullScreen.addEventListener('click', function() { fullScreenHandler(); }); const buttons = document.querySelector('.ui .buttons'); buttons.after(buttonFullScreen); fileView.addEventListener('contextmenu', function() { fullScreenHandler(); }); // Load the model viewer.LoadModelFromUrlList([fileUrl]); } }; script.src = window.config.appSubUrl + '/assets/o3dv/o3dv.min.js'; document.head.appendChild(script); } }); </script> ``` https://github.com/go-gitea/gitea/issues/34135 ### Screenshots _No response_

GiteaMirror added the type/proposal label 2025-11-02 11:17:57 -06:00

GiteaMirror closed this issue

2025-11-02 11:17:57 -06:00

GiteaMirror commented

2025-11-02 11:17:58 -06:00

@lunny commented on GitHub (Jun 18, 2025):

Looks like this will use https://github.com/kovacsv/Online3DViewer project? Maybe someone could send a pull request.

@lunny commented on GitHub (Jun 18, 2025): Looks like this will use https://github.com/kovacsv/Online3DViewer project? Maybe someone could send a pull request.

GiteaMirror commented

2025-11-02 11:17:58 -06:00

@gitlog commented on GitHub (Jun 19, 2025):

This is just a refinement of this proposal.

https://github.com/go-gitea/gitea/issues/34135#issuecomment-2783941374

@gitlog commented on GitHub (Jun 19, 2025): This is just a refinement of this proposal. https://github.com/go-gitea/gitea/issues/34135#issuecomment-2783941374

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#14622