web-ifc-viewer

<p align="center"> <a href="https://ifcjs.github.io/info/">ifc.js</a> | <a href="https://ifcjs.github.io/info/docs/Guide/web-ifc-viewer/Introduction">文档</a> | <a href="https://ifcjs.github.io/web-ifc-viewer/example/index">演示</a> | <a href="https://discord.gg/FXfyR4XrKT">Discord</a> | <a href="https://github.com/IFCjs/web-ifc-viewer/tree/master/example">使用示例</a> | <a href="https://www.npmjs.com/package/web-ifc-viewer">npm包</a> </p> <img src="https://yellow-cdn.veclightyear.com/2b54e442/213f65a1-81ea-4fb8-9480-cd589b5b8b67.png"> <h1>此库已弃用。请改用<a href="https://github.com/ifcjs/components">COMPONENTS</a></h1> <h1>web-ifc-viewer <img src="https://ifcjs.github.io/info/img/logo.svg" width="32"></h1>

npm opencollective

这个库是web-ifc-three的扩展，它是THREE.js的官方IFCLoader。它不仅能在JavaScript中解析和生成IFC模型的Three.js几何体，还提供了多种工具来轻松构建BIM工具，如3D尺寸、剪裁平面、2D平面导航和生成等。

状态

web-ifc-viewer提供了多种工具，可以快速创建出色的BIM工具。虽然这些工具相当稳定，但该仓库的状态与web-ifc-three和web-ifc的状态紧密相关。

查看它们的README文件以更好地了解项目当前的状态。

演示

在我们的在线演示中测试IFC.js Web IFCviewer和您的IFC模型

文档

查看我们的官方文档获取API参考、指南和教程。

安装

npm install web-ifc-viewer 或 yarn add web-ifc-viewer

快速设置

首先，创建一个导入库并创建场景的JavaScript文件：

import { IfcViewerAPI } from 'web-ifc-viewer';

const container = document.getElementById('viewer-container');
const viewer = new IfcViewerAPI({ container });
viewer.axes.setAxes();
viewer.grid.setGrid();

const input = document.getElementById("file-input");

input.addEventListener("change",

  async (changed) => {
   
    const file = changed.target.files[0];
    const ifcURL = URL.createObjectURL(file);
    viewer.IFC.loadIfcUrl(ifcURL);
  },

  false
);

您可以使用任何打包工具来打包这个文件。这是使用rollup的示例配置文件：

import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'index.js',
  output: {
    file: "bundle.js",
    format: 'esm'
  },
  plugins: [ resolve() ]
};

现在您可以在HTML页面中这样显示它：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" type="image/png" href="./favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IFC.js</title>
  </head>
  <body>
    <input type="file" id="file-input" accept=".ifc, .ifcXML, .ifcZIP">
    <div id="viewer-container"></div>
    <script src="./bundle.js"></script>
  </body>
</html>