@file-viewer/renderer-3d 2.0.11

package/LICENSE

@@ -0,0 +1,160 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice that is
+included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work by
+the copyright owner or by an individual or Legal Entity authorized to submit on
+behalf of the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent to the
+Licensor or its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue tracking systems
+that are managed by, or on behalf of, the Licensor for the purpose of discussing
+and improving the Work, but excluding communication that is conspicuously marked
+or otherwise designated in writing by the copyright owner as "Not a
+Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work to
+which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work
+constitutes direct or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate as of the date
+such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the Derivative
+Works; within the Source form or documentation, if provided along with the
+Derivative Works; or, within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents of the NOTICE
+file are for informational purposes only and do not modify the License. You may
+add Your own attribution notices within Derivative Works that You distribute,
+alongside or as an addendum to the NOTICE text from the Work, provided that such
+additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties or
+conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any character
+arising as a result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill, work stoppage,
+computer failure or malfunction, or any and all other commercial damages or
+losses), even if such Contributor has been advised of the possibility of such
+damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations and/or
+rights consistent with this License. However, in accepting such obligations, You
+may act only on Your own behalf and on Your sole responsibility, not on behalf of
+any other Contributor, and only if You agree to indemnify, defend, and hold each
+Contributor harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or additional
+liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright 2026 Flyfish Viewer

package/README.en.md

@@ -0,0 +1,34 @@
+# @file-viewer/renderer-3d
+
+Standalone 3D model renderer package for Flyfish File Viewer. It uses Three.js, OrbitControls, and format-specific Three.js loaders to preview GLB/GLTF, OBJ, STL, PLY, FBX, DAE, 3DS, 3MF, AMF, USD, KMZ, PCD, VRML, XYZ, VTK, and related model files directly in the browser.
+
+## Usage
+
+```ts
+import FileViewer from '@file-viewer/vue3'
+import { modelRenderer } from '@file-viewer/renderer-3d'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: modelRenderer,
+}
+```
+
+You can combine it with other renderer packages:
+
+```ts
+import { modelRenderer } from '@file-viewer/renderer-3d'
+import { cadRenderer } from '@file-viewer/renderer-cad'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: [modelRenderer, cadRenderer],
+}
+```
+
+## Capabilities
+
+- Supports WebGL preview, orbit controls, fit-to-view, grid, axes, wireframe, and auto-rotate.
+- For `gltf`, `dae`, and `fbx` files with external textures or binary resources, the original URL directory is used as the resource base.
+- STEP, IGES, IFC, 3DM, and BREP entries use `@file-viewer/geometry-engine` for lightweight signature detection and accurate conversion guidance; full decoding should keep evolving through dedicated OpenCascade / web-ifc / rhino3dm WASM renderer paths.
+- `@file-viewer/core` no longer bundles the 3D renderer and no longer depends directly on `three`. Install this package explicitly for 3D model preview, or use `@file-viewer/preset-all`, which aggregates this renderer automatically.

package/README.md

@@ -0,0 +1,34 @@
+# @file-viewer/renderer-3d
+
+Flyfish File Viewer 的独立 3D 模型 renderer 包。它使用 Three.js、OrbitControls 和按格式异步加载的 Three.js loaders，为 GLB/GLTF、OBJ、STL、PLY、FBX、DAE、3DS、3MF、AMF、USD、KMZ、PCD、VRML、XYZ、VTK 等模型提供浏览器端只读预览。
+
+## 用法
+
+```ts
+import FileViewer from '@file-viewer/vue3'
+import { modelRenderer } from '@file-viewer/renderer-3d'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: modelRenderer,
+}
+```
+
+也可以和其他 renderer 一起组合：
+
+```ts
+import { modelRenderer } from '@file-viewer/renderer-3d'
+import { cadRenderer } from '@file-viewer/renderer-cad'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: [modelRenderer, cadRenderer],
+}
+```
+
+## 能力边界
+
+- 支持 WebGL 交互预览、轨道控制、适配视图、网格、坐标轴、线框和自动旋转。
+- `gltf` / `dae` / `fbx` 等带外部贴图或二进制资源的格式，会以原始 `url` 的目录作为资源基准继续加载。
+- STEP、IGES、IFC、3DM、BREP 等工程 B-Rep / BIM 格式入口会通过 `@file-viewer/geometry-engine` 做轻量签名识别和明确转换说明；完整解析应继续沿 OpenCascade / web-ifc / rhino3dm 独立 WASM renderer 路线演进。
+- `@file-viewer/core` 已不再内置 3D renderer，也不再直接依赖 `three`。需要 3D 模型预览时，请显式安装本包，或使用会自动聚合本包的 `@file-viewer/preset-all`。

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export declare const modelRendererDefinition: RendererDefinition;
+export declare const renderFileViewerModel: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const modelRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export default modelRenderer;

package/dist/index.js

@@ -0,0 +1,17 @@
+import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+const modelDefinition = DEFAULT_RENDERER_DEFINITIONS.find(definition => definition.id === 'model');
+if (!modelDefinition) {
+    throw new Error('@file-viewer/renderer-3d could not locate the core 3D model renderer definition.');
+}
+export const modelRendererDefinition = modelDefinition;
+export const renderFileViewerModel = (buffer, target, type, context) => import('./model.js').then(({ default: renderModel }) => renderModel(buffer, target, type, context));
+export const modelRenderer = {
+    id: 'file-viewer-renderer-3d',
+    label: 'Flyfish File Viewer 3D model renderer',
+    definitions: [modelRendererDefinition],
+    handlers: [{
+            rendererId: modelRendererDefinition.id,
+            handler: renderFileViewerModel,
+        }],
+};
+export default modelRenderer;

package/dist/model.d.ts

@@ -0,0 +1,2 @@
+import type { FileRenderContext, FileViewerRenderedInstance } from '@file-viewer/core';
+export default function renderModel(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/model.js

@@ -0,0 +1,567 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { formatGeometryKernelNotice, inspectGeometryKernelFile, isGeometryKernelFormat, } from '@file-viewer/geometry-engine';
+const modelStyle = `
+.model-viewer{display:flex;height:100%;min-height:100%;flex-direction:column;background:#f8fafc;color:#162333}
+.model-viewer *{box-sizing:border-box}
+.model-toolbar{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;border-bottom:1px solid rgba(15,23,42,.08);background:#fff}
+.model-actions{display:flex;min-width:0;flex-wrap:wrap;gap:6px}
+.model-actions button{min-height:30px;border:0;border-radius:8px;padding:0 10px;background:rgba(15,23,42,.06);color:#475569;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:0;transition:background-color .18s ease,color .18s ease}
+.model-actions button.active,.model-actions button:hover{background:rgba(33,163,102,.14);color:#16804f}
+.model-meta{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#64748b;font-size:12px}
+.model-meta strong{color:#0f766e;font-weight:800}
+.model-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.model-stage{position:relative;flex:1;min-height:0;overflow:hidden}
+.model-stage canvas{display:block;width:100%;height:100%;outline:none}
+.model-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:rgba(248,250,252,.88);color:#64748b;text-align:center;line-height:1.7}
+.model-state[hidden]{display:none!important}
+.model-state.error{color:#b42318}
+.model-state strong{color:#b42318;font-size:18px}
+@media (max-width:720px){.model-toolbar{min-height:64px;align-items:flex-start;flex-direction:column;gap:8px;padding:8px 10px}.model-meta{width:100%;justify-content:flex-start}}
+`;
+class ModelPreviewNotice extends Error {
+}
+const createStyle = () => {
+    const style = document.createElement('style');
+    style.textContent = modelStyle;
+    return style;
+};
+const createElement = (tagName, className, text) => {
+    const element = document.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    if (text !== undefined) {
+        element.textContent = text;
+    }
+    return element;
+};
+const normalizeError = (reason) => {
+    if (reason instanceof Error) {
+        return reason.message;
+    }
+    if (typeof reason === 'string') {
+        return reason;
+    }
+    try {
+        return JSON.stringify(reason);
+    }
+    catch {
+        return String(reason);
+    }
+};
+const getResourcePath = (sourceUrl) => {
+    if (!sourceUrl) {
+        return '';
+    }
+    try {
+        return new URL('.', sourceUrl).href;
+    }
+    catch {
+        const clean = sourceUrl.split(/[?#]/)[0] || sourceUrl;
+        const slashIndex = clean.lastIndexOf('/');
+        return slashIndex >= 0 ? clean.slice(0, slashIndex + 1) : '';
+    }
+};
+const disposeMaterial = (material) => {
+    const materials = Array.isArray(material) ? material : [material];
+    materials.forEach(item => item.dispose());
+};
+const disposeObject = (object) => {
+    object.traverse(child => {
+        const mesh = child;
+        const points = child;
+        if (mesh.geometry) {
+            mesh.geometry.dispose();
+        }
+        if (mesh.material) {
+            disposeMaterial(mesh.material);
+        }
+        if (points.material) {
+            disposeMaterial(points.material);
+        }
+    });
+};
+export default async function renderModel(buffer, target, type = 'glb', context) {
+    const normalizedType = type.toLowerCase();
+    const sourceUrl = context?.url;
+    let status = 'loading';
+    let errorMessage = '';
+    let objectSummary = '正在加载模型';
+    let autoRotate = false;
+    let wireframe = false;
+    let showGrid = true;
+    let showAxes = true;
+    let renderer = null;
+    let scene = null;
+    let camera = null;
+    let controls = null;
+    let modelRoot = null;
+    let gridHelper = null;
+    let axesHelper = null;
+    let resizeObserver = null;
+    let animationFrame = 0;
+    let activeVersion = 0;
+    let mixer = null;
+    const clock = new THREE.Clock();
+    const root = createElement('div', 'model-viewer');
+    const toolbar = createElement('div', 'model-toolbar');
+    const actions = createElement('div', 'model-actions');
+    const fitButton = createElement('button', undefined, '适配');
+    const rotateButton = createElement('button', undefined, '旋转');
+    const wireframeButton = createElement('button', undefined, '线框');
+    const gridButton = createElement('button', undefined, '网格');
+    const axesButton = createElement('button', undefined, '坐标');
+    const meta = createElement('div', 'model-meta');
+    const typeText = createElement('strong', undefined, normalizedType.toUpperCase());
+    const summaryText = createElement('span', undefined, objectSummary);
+    const stage = createElement('div', 'model-stage');
+    const canvas = document.createElement('canvas');
+    const state = createElement('div', 'model-state', '正在解析 3D 模型...');
+    const buttons = [fitButton, rotateButton, wireframeButton, gridButton, axesButton];
+    buttons.forEach(button => {
+        button.type = 'button';
+    });
+    actions.append(fitButton, rotateButton, wireframeButton, gridButton, axesButton);
+    meta.append(typeText, summaryText);
+    toolbar.append(actions, meta);
+    stage.append(canvas, state);
+    root.append(toolbar, stage);
+    target.replaceChildren(createStyle(), root);
+    const readText = () => {
+        if (typeof TextDecoder === 'function') {
+            return new TextDecoder('utf-8').decode(buffer);
+        }
+        const bytes = new Uint8Array(buffer);
+        let text = '';
+        for (let index = 0; index < bytes.length; index += 1) {
+            text += String.fromCharCode(bytes[index]);
+        }
+        return text;
+    };
+    const updateUi = () => {
+        rotateButton.classList.toggle('active', autoRotate);
+        wireframeButton.classList.toggle('active', wireframe);
+        gridButton.classList.toggle('active', showGrid);
+        axesButton.classList.toggle('active', showAxes);
+        summaryText.textContent = objectSummary;
+        state.hidden = status === 'ready';
+        state.classList.toggle('error', status === 'error');
+        if (status === 'loading') {
+            state.textContent = '正在解析 3D 模型...';
+        }
+        else if (status === 'error') {
+            state.replaceChildren(createElement('strong', undefined, '模型解析失败'), createElement('span', undefined, errorMessage));
+        }
+    };
+    const updateHelperVisibility = () => {
+        if (gridHelper) {
+            gridHelper.visible = showGrid;
+        }
+        if (axesHelper) {
+            axesHelper.visible = showAxes;
+        }
+        updateUi();
+    };
+    const resize = () => {
+        if (!renderer || !camera) {
+            return;
+        }
+        const rect = canvas.getBoundingClientRect();
+        const width = Math.max(1, Math.floor(rect.width));
+        const height = Math.max(1, Math.floor(rect.height));
+        renderer.setSize(width, height, false);
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+    };
+    const ensureScene = () => {
+        if (!renderer) {
+            renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                alpha: false,
+                canvas,
+                powerPreference: 'high-performance',
+            });
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+            renderer.outputColorSpace = THREE.SRGBColorSpace;
+            renderer.setClearColor(0xf8fafc, 1);
+        }
+        if (!scene) {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xf8fafc);
+            const hemiLight = new THREE.HemisphereLight(0xffffff, 0xd7dee8, 2.4);
+            scene.add(hemiLight);
+            const keyLight = new THREE.DirectionalLight(0xffffff, 2.2);
+            keyLight.position.set(8, 10, 8);
+            scene.add(keyLight);
+            const fillLight = new THREE.DirectionalLight(0xffffff, 0.9);
+            fillLight.position.set(-7, 5, -4);
+            scene.add(fillLight);
+            gridHelper = new THREE.GridHelper(10, 10, 0xcbd5e1, 0xe2e8f0);
+            scene.add(gridHelper);
+            axesHelper = new THREE.AxesHelper(3);
+            scene.add(axesHelper);
+        }
+        if (!camera) {
+            camera = new THREE.PerspectiveCamera(45, 1, 0.01, 100000);
+            camera.position.set(5, 4, 6);
+        }
+        if (!controls && camera && renderer) {
+            controls = new OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.08;
+            controls.screenSpacePanning = true;
+            controls.autoRotateSpeed = 1.2;
+        }
+        updateHelperVisibility();
+        resize();
+    };
+    const clearModel = () => {
+        if (modelRoot && scene) {
+            scene.remove(modelRoot);
+            disposeObject(modelRoot);
+        }
+        modelRoot = null;
+        mixer = null;
+    };
+    const createSurfaceMaterial = () => new THREE.MeshStandardMaterial({
+        color: 0x4f8fba,
+        metalness: 0.08,
+        roughness: 0.78,
+        side: THREE.DoubleSide,
+        wireframe,
+    });
+    const createPointMaterial = () => new THREE.PointsMaterial({
+        color: 0x1f7a8c,
+        size: 0.035,
+        sizeAttenuation: true,
+    });
+    const applyDefaultMaterials = (object) => {
+        object.traverse(child => {
+            const mesh = child;
+            if (mesh.isMesh && !mesh.material) {
+                mesh.material = createSurfaceMaterial();
+            }
+            if (mesh.isMesh && mesh.material) {
+                const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+                materials.forEach(material => {
+                    if ('wireframe' in material) {
+                        material.wireframe = wireframe;
+                    }
+                    material.needsUpdate = true;
+                });
+            }
+        });
+    };
+    const countMeshes = (object) => {
+        let meshes = 0;
+        let points = 0;
+        object.traverse(child => {
+            if (child.isMesh) {
+                meshes += 1;
+            }
+            if (child.isPoints) {
+                points += 1;
+            }
+        });
+        return { meshes, points };
+    };
+    const summarizeModel = (object) => {
+        const { meshes, points } = countMeshes(object);
+        const parts = [];
+        if (meshes) {
+            parts.push(`${meshes} 个网格`);
+        }
+        if (points) {
+            parts.push(`${points} 个点云`);
+        }
+        objectSummary = parts.length ? parts.join('，') : '模型已加载';
+        updateUi();
+    };
+    const normalizeObject = (object) => {
+        const box = new THREE.Box3().setFromObject(object);
+        if (box.isEmpty()) {
+            return {
+                center: new THREE.Vector3(),
+                size: new THREE.Vector3(4, 4, 4),
+            };
+        }
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+        object.position.sub(center);
+        return {
+            center: new THREE.Vector3(),
+            size,
+        };
+    };
+    const fitToView = () => {
+        if (!modelRoot || !camera || !controls) {
+            return;
+        }
+        const box = new THREE.Box3().setFromObject(modelRoot);
+        const size = box.getSize(new THREE.Vector3());
+        const center = box.getCenter(new THREE.Vector3());
+        const radius = Math.max(size.x, size.y, size.z, 1);
+        const distance = radius / (2 * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2))) * 1.65;
+        camera.near = Math.max(distance / 1000, 0.01);
+        camera.far = Math.max(distance * 1000, 1000);
+        camera.position.copy(center).add(new THREE.Vector3(distance, distance * 0.62, distance));
+        camera.updateProjectionMatrix();
+        controls.target.copy(center);
+        controls.update();
+    };
+    const addModelToScene = async (object) => {
+        if (!scene) {
+            return;
+        }
+        clearModel();
+        applyDefaultMaterials(object);
+        const { size } = normalizeObject(object);
+        modelRoot = object;
+        scene.add(object);
+        fitToView();
+        summarizeModel(object);
+        const maxSize = Math.max(size.x, size.y, size.z, 1);
+        if (gridHelper) {
+            gridHelper.scale.setScalar(Math.max(maxSize / 10, 1));
+        }
+    };
+    const parseGlbOrGltf = async () => {
+        const { GLTFLoader } = await import('three/addons/loaders/GLTFLoader.js');
+        const loader = new GLTFLoader();
+        const resourcePath = getResourcePath(sourceUrl);
+        const input = normalizedType === 'gltf' ? readText() : buffer;
+        return await new Promise((resolve, reject) => {
+            loader.parse(input, resourcePath, gltf => {
+                if (gltf.animations?.length) {
+                    mixer = new THREE.AnimationMixer(gltf.scene);
+                    gltf.animations.forEach(clip => mixer?.clipAction(clip).play());
+                }
+                resolve(gltf.scene);
+            }, reject);
+        });
+    };
+    const parseObj = async () => {
+        const { OBJLoader } = await import('three/addons/loaders/OBJLoader.js');
+        return new OBJLoader().parse(readText());
+    };
+    const parseStl = async () => {
+        const { STLLoader } = await import('three/addons/loaders/STLLoader.js');
+        const geometry = new STLLoader().parse(buffer);
+        geometry.computeVertexNormals();
+        return new THREE.Mesh(geometry, createSurfaceMaterial());
+    };
+    const parsePly = async () => {
+        const { PLYLoader } = await import('three/addons/loaders/PLYLoader.js');
+        const geometry = new PLYLoader().parse(buffer);
+        geometry.computeVertexNormals();
+        return new THREE.Mesh(geometry, createSurfaceMaterial());
+    };
+    const parseFbx = async () => {
+        const { FBXLoader } = await import('three/addons/loaders/FBXLoader.js');
+        const object = new FBXLoader().parse(buffer, getResourcePath(sourceUrl));
+        if (object.animations?.length) {
+            mixer = new THREE.AnimationMixer(object);
+            object.animations.forEach((clip) => mixer?.clipAction(clip).play());
+        }
+        return object;
+    };
+    const parseDae = async () => {
+        const { ColladaLoader } = await import('three/addons/loaders/ColladaLoader.js');
+        const result = new ColladaLoader().parse(readText(), getResourcePath(sourceUrl));
+        if (!result?.scene) {
+            throw new Error('DAE 模型未解析出有效场景');
+        }
+        return result.scene;
+    };
+    const parse3ds = async () => {
+        const { TDSLoader } = await import('three/addons/loaders/TDSLoader.js');
+        return new TDSLoader().parse(buffer, getResourcePath(sourceUrl));
+    };
+    const parse3mf = async () => {
+        const { ThreeMFLoader } = await import('three/addons/loaders/3MFLoader.js');
+        return new ThreeMFLoader().parse(buffer);
+    };
+    const parseAmf = async () => {
+        const { AMFLoader } = await import('three/addons/loaders/AMFLoader.js');
+        return new AMFLoader().parse(buffer);
+    };
+    const parseUsd = async () => {
+        const { USDLoader } = await import('three/addons/loaders/USDLoader.js');
+        return new USDLoader().parse(buffer);
+    };
+    const parseKmz = async () => {
+        const { KMZLoader } = await import('three/addons/loaders/KMZLoader.js');
+        return new KMZLoader().parse(buffer).scene;
+    };
+    const explainEngineeringModel = (modelType) => {
+        const inspection = inspectGeometryKernelFile(buffer, modelType);
+        const notice = formatGeometryKernelNotice(inspection.format || modelType);
+        const signature = inspection.signature ? `检测到文件签名: ${inspection.signature}。` : '';
+        const warnings = inspection.warnings.length ? ` ${inspection.warnings.join(' ')}` : '';
+        throw new ModelPreviewNotice(`${signature}${notice}${warnings}`);
+    };
+    const parsePcd = async () => {
+        const { PCDLoader } = await import('three/addons/loaders/PCDLoader.js');
+        return new PCDLoader().parse(buffer, sourceUrl || 'model.pcd');
+    };
+    const parseVrml = async () => {
+        const { VRMLLoader } = await import('three/addons/loaders/VRMLLoader.js');
+        return new VRMLLoader().parse(readText(), getResourcePath(sourceUrl));
+    };
+    const parseXyz = async () => {
+        const { XYZLoader } = await import('three/addons/loaders/XYZLoader.js');
+        const geometry = new XYZLoader().parse(readText());
+        geometry.computeBoundingSphere();
+        return new THREE.Points(geometry, createPointMaterial());
+    };
+    const parseVtk = async () => {
+        const { VTKLoader } = await import('three/addons/loaders/VTKLoader.js');
+        const geometry = new VTKLoader().parse(buffer);
+        geometry.computeVertexNormals();
+        return new THREE.Mesh(geometry, createSurfaceMaterial());
+    };
+    const parseModel = (modelType) => {
+        switch (modelType) {
+            case 'glb':
+            case 'gltf':
+                return parseGlbOrGltf();
+            case 'obj':
+                return parseObj();
+            case 'stl':
+                return parseStl();
+            case 'ply':
+                return parsePly();
+            case 'fbx':
+                return parseFbx();
+            case 'dae':
+                return parseDae();
+            case '3ds':
+                return parse3ds();
+            case '3mf':
+                return parse3mf();
+            case 'amf':
+                return parseAmf();
+            case 'usd':
+            case 'usda':
+            case 'usdc':
+            case 'usdz':
+                return parseUsd();
+            case 'kmz':
+                return parseKmz();
+            case 'step':
+            case 'stp':
+            case 'iges':
+            case 'igs':
+            case 'ifc':
+            case '3dm':
+            case 'brep':
+                return explainEngineeringModel(modelType);
+            case 'pcd':
+                return parsePcd();
+            case 'wrl':
+            case 'vrml':
+                return parseVrml();
+            case 'xyz':
+                return parseXyz();
+            case 'vtk':
+            case 'vtp':
+                return parseVtk();
+            default:
+                if (isGeometryKernelFormat(modelType)) {
+                    return explainEngineeringModel(modelType);
+                }
+                throw new Error(`暂不支持 .${modelType} 模型格式`);
+        }
+    };
+    const loadModel = async () => {
+        const version = ++activeVersion;
+        status = 'loading';
+        errorMessage = '';
+        objectSummary = '正在加载模型';
+        updateUi();
+        ensureScene();
+        try {
+            const object = await parseModel(normalizedType);
+            if (version !== activeVersion) {
+                disposeObject(object);
+                return;
+            }
+            await addModelToScene(object);
+            status = 'ready';
+            updateUi();
+        }
+        catch (reason) {
+            if (version !== activeVersion) {
+                return;
+            }
+            if (!(reason instanceof ModelPreviewNotice)) {
+                console.error(reason);
+            }
+            status = 'error';
+            errorMessage = normalizeError(reason) || `${normalizedType.toUpperCase()} 模型解析失败`;
+            updateUi();
+        }
+    };
+    const renderFrame = () => {
+        if (!renderer || !scene || !camera || !controls) {
+            return;
+        }
+        controls.autoRotate = autoRotate;
+        controls.update();
+        const delta = clock.getDelta();
+        mixer?.update(delta);
+        renderer.render(scene, camera);
+        animationFrame = window.requestAnimationFrame(renderFrame);
+    };
+    const updateWireframe = () => {
+        if (modelRoot) {
+            applyDefaultMaterials(modelRoot);
+        }
+        updateUi();
+    };
+    fitButton.addEventListener('click', fitToView);
+    rotateButton.addEventListener('click', () => {
+        autoRotate = !autoRotate;
+        updateUi();
+    });
+    wireframeButton.addEventListener('click', () => {
+        wireframe = !wireframe;
+        updateWireframe();
+    });
+    gridButton.addEventListener('click', () => {
+        showGrid = !showGrid;
+        updateHelperVisibility();
+    });
+    axesButton.addEventListener('click', () => {
+        showAxes = !showAxes;
+        updateHelperVisibility();
+    });
+    updateUi();
+    ensureScene();
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(canvas);
+    clock.start();
+    renderFrame();
+    void loadModel();
+    return {
+        $el: root,
+        unmount() {
+            activeVersion += 1;
+            window.cancelAnimationFrame(animationFrame);
+            resizeObserver?.disconnect();
+            resizeObserver = null;
+            clearModel();
+            controls?.dispose();
+            controls = null;
+            renderer?.dispose();
+            renderer = null;
+            clock.stop();
+            scene = null;
+            camera = null;
+            gridHelper = null;
+            axesHelper = null;
+            target.replaceChildren();
+        },
+    };
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@file-viewer/renderer-3d",
+  "version": "2.0.11",
+  "private": false,
+  "type": "module",
+  "description": "Standalone 3D model renderer plugin for Flyfish File Viewer powered by Three.js loaders and OrbitControls.",
+  "keywords": [
+    "file-viewer",
+    "renderer",
+    "3d",
+    "three",
+    "gltf",
+    "glb",
+    "stl",
+    "obj",
+    "document-preview",
+    "document-viewer",
+    "file-preview",
+    "self-hosted"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "Wangyu",
+    "email": "wybaby168@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyfish-dev/file-viewer-renderer-3d.git",
+    "directory": "packages/renderers/3d"
+  },
+  "homepage": "https://doc.file-viewer.app/guide/on-demand-renderers",
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/file-viewer-renderer-3d/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://dev.flyfish.group/shop"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@file-viewer/core": "^2.0.11",
+    "@file-viewer/geometry-engine": "^2.0.11",
+    "three": "^0.184.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.184.1",
+    "typescript": "^6.0.3"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}