前端如何展示bim图

前端展示BIM图的方法包括：使用WebGL、采用三维建模引擎（如Three.js）、使用专门的BIM查看器（如Forge Viewer）。 其中，使用WebGL和三维建模引擎是最常见和灵活的方式。WebGL能够直接在浏览器中渲染三维图形，而Three.js作为WebGL的封装库，简化了BIM模型的加载和渲染过程。 通过Three.js，开发者可以轻松地将复杂的BIM模型展示在网页上，同时还可以添加交互功能，如旋转、缩放和选择等。

一、WebGL的使用

1、什么是WebGL

WebGL（Web Graphics Library）是一个JavaScript API，用于在任何兼容的浏览器中渲染交互式的2D和3D图形。它基于OpenGL ES 2.0，并提供了一个与硬件直接交互的接口，使得开发者可以编写高效的三维图形应用程序。WebGL的优势在于其跨平台性和高性能渲染能力。

2、WebGL的基本使用步骤

a、创建WebGL上下文

要在网页中使用WebGL，首先需要获取一个WebGL上下文。通常，这一步通过在HTML中添加一个

<canvas id="webgl-canvas" width="800" height="600"></canvas>
<script>
  var canvas = document.getElementById('webgl-canvas');
  var gl = canvas.getContext('webgl');
  if (!gl) {
    console.log('WebGL not supported, falling back on experimental-webgl');
    gl = canvas.getContext('experimental-webgl');
  }
  if (!gl) {
    alert('Your browser does not support WebGL');
  }
</script>

b、编写着色器程序

在WebGL中，着色器是用GLSL（OpenGL Shading Language）编写的小程序，用于定义顶点和像素的处理方式。通常需要两个着色器：顶点着色器和片段着色器。

var vertexShaderSource = `
  attribute vec4 a_Position;
  void main() {
    gl_Position = a_Position;
  }
`;
var fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
function createShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (success) {
    return shader;
  }
  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

c、链接着色器程序

将顶点和片段着色器链接到一个WebGL程序中。

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) {
  gl.useProgram(program);
} else {
  console.log(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

d、绘制图形

最后，设置顶点数据并调用绘制函数。

var positionAttributeLocation = gl.getAttribLocation(program, 'a_Position');
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
  0, 0,
  0, 0.5,
  0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var size = 2;
var type = gl.FLOAT;
var normalize = false;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 3;
gl.drawArrays(primitiveType, offset, count);

二、三维建模引擎Three.js

1、Three.js的简介

Three.js是一个基于WebGL的JavaScript库，用于创建和显示复杂的三维图形。它的优势在于简化了WebGL的使用，使得开发者可以更容易地加载和渲染3D模型。

2、基本概念和使用

a、初始化Three.js场景

首先，需要创建一个场景、相机和渲染器。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

b、加载BIM模型

Three.js提供了多种加载器，例如GLTFLoader、OBJLoader等，可以用于加载不同格式的三维模型。

var loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
  scene.add(gltf.scene);
  renderer.render(scene, camera);
});

c、设置相机和渲染循环

为了使模型能够在浏览器中交互展示，还需要设置相机的位置和渲染循环。

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  // Add any animation or interaction logic here
  renderer.render(scene, camera);
}
animate();

三、专门的BIM查看器

1、Forge Viewer

Autodesk提供的Forge Viewer是一个功能强大的BIM查看工具，专门用于在网页上展示和交互BIM模型。它支持多种BIM文件格式，并且提供了丰富的API用于自定义视图和交互功能。

2、使用Forge Viewer的步骤

a、获取Forge Viewer的API Key

使用Forge Viewer需要先注册一个Autodesk Forge账号，并获取API Key。

b、集成Forge Viewer

在HTML文件中引入Forge Viewer的脚本，并初始化查看器。

<!DOCTYPE html>
<html>
<head>
  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
</head>
<body>
  <div id="forgeViewer"></div>
  <script>
    var viewer;
    var options = {
      env: 'AutodeskProduction',
      getAccessToken: function(onGetAccessToken) {
        var token = 'your-access-token';
        var timeInSeconds = 3600;
        onGetAccessToken(token, timeInSeconds);
      }
    };
    Autodesk.Viewing.Initializer(options, function() {
      var htmlDiv = document.getElementById('forgeViewer');
      viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
      var startedCode = viewer.start();
      if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
      }
      console.log('Initialization complete, loading a model next...');
      var documentId = 'urn:your-model-urn';
      Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    });
    function onDocumentLoadSuccess(doc) {
      var viewables = doc.getRoot().getDefaultGeometry();
      viewer.loadDocumentNode(doc, viewables).then(i => {
        console.log('Model loaded successfully!');
      });
    }
    function onDocumentLoadFailure(viewerErrorCode) {
      console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
    }
  </script>
</body>
</html>

四、交互功能的实现

1、旋转和缩放

无论是使用WebGL、Three.js还是Forge Viewer，实现旋转和缩放都是基本的交互功能。在Three.js中，可以通过OrbitControls插件来实现。

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

2、选择和高亮

在BIM模型中，选择和高亮特定的部分是常见需求。例如，在Forge Viewer中，可以通过事件监听器实现这个功能。

viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function(event) {
  var dbIdArray = event.dbIdArray;
  console.log('Selected IDs: ', dbIdArray);
  // Add highlighting logic here
});

五、性能优化

1、减少模型复杂度

BIM模型通常非常复杂，直接加载可能导致性能问题。可以通过简化模型、降低多边形数量来优化性能。

2、使用LOD技术

Level of Detail（LOD）技术可以根据视距动态调整模型的细节层次，从而提高渲染性能。

var lod = new THREE.LOD();
var highDetailMesh = new THREE.Mesh(highDetailGeometry, material);
var lowDetailMesh = new THREE.Mesh(lowDetailGeometry, material);
lod.addLevel(highDetailMesh, 0);
lod.addLevel(lowDetailMesh, 50);
scene.add(lod);

六、项目管理和协作

在开发前端展示BIM图的项目中，团队协作和管理是关键。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提升团队效率。

1、PingCode

PingCode是一款专业的研发项目管理系统，提供从需求管理到代码托管、测试管理的一站式解决方案。它支持敏捷开发流程，能够帮助团队更好地管理BIM项目的开发进度。

2、Worktile

Worktile是一款通用的项目协作软件，支持任务管理、文件共享和团队沟通。它的灵活性和易用性使其成为BIM项目协作的理想选择。

通过以上步骤和工具，前端开发者可以有效地展示BIM图，并实现丰富的交互功能，从而提升用户体验。