npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@file-viewer/renderer-3d

v3.0.0

Published

Standalone 3D model renderer plugin for File Viewer powered by Three.js loaders and OrbitControls.

Readme

@file-viewer/renderer-3d

Flyfish File Viewer 的独立 3D 模型 renderer。它使用 Three.js、OrbitControls 和按格式异步加载的 loader,在浏览器内预览 GLB / GLTF、OBJ、STL、PLY、FBX、DAE、3DS、3MF、AMF、USD、KMZ、PCD、VRML、XYZ、VTK 等模型;STEP / STP、IGES / IGS 和 BREP 则通过本地 OCCT Worker 完成真实几何解析和渲染。

用法

import FileViewer from '@file-viewer/vue3'
import { modelRenderer } from '@file-viewer/renderer-3d'

const options = {
  rendererMode: 'replace',
  renderers: modelRenderer,
  model: {
    workerUrl: '/viewer-assets/wasm/model/occt-worker.js',
    runtimeUrl: '/viewer-assets/wasm/model/occt-import-js.js',
    wasmUrl: '/viewer-assets/wasm/model/occt-import-js.wasm',
    workerTimeoutMs: 120_000,
  },
}

也可以把 modelRenderer 与 CAD 等 renderer 组合,或直接使用已经聚合它的 @file-viewer/preset-all。full 包和 @file-viewer/vite-plugin 会准备默认离线资产;只安装 renderer 时,需要自行托管 OCCT Worker、runtime、WASM 和两个许可证文件。

默认路径为:

  • wasm/model/occt-worker.js
  • wasm/model/occt-import-js.js
  • wasm/model/occt-import-js.wasm

部署在子路径或独立资产域名时,通过 options.model.workerUrlruntimeUrlwasmUrl 传入最终 URL。不要使用运行时 CDN 回退。严格 CSP 需要在 worker-srcscript-srcconnect-src 中允许对应来源;部分浏览器还需要 script-src 'wasm-unsafe-eval'

能力边界

  • STEP / STP、IGES / IGS、BREP:在 Worker 中使用 occt-import-js / OpenCascade 三角化,保留装配层级、实例、法线和面颜色,再构建 Three.js 场景。
  • 通用模型:支持 WebGL 轨道控制、适配视图、网格、坐标轴、线框和自动旋转。gltf / dae / fbx 的外部贴图或二进制资源继续以原始 url 目录为基准加载。
  • 全局统一缩放:renderer 注册标准缩放 provider,因此外层工具栏的放大、缩小、比例重置和适配视图会直接控制相机;滚轮、触控板和捏合缩放也会同步更新全局比例状态。
  • IFC、3DM:当前只做签名识别和明确的接入提示,仍需分别接入 web-ifc / That Open 与 rhino3dm,不会显示成成功预览。
  • @file-viewer/core 不内置 Three.js 或几何内核。需要模型预览时请显式安装本包、相应 preset,或 full 包。