3d-bim-models-threejs

3d-bim

bim是building information model 意思是建筑信息模型，本开源项目是使用nodejs，html5，threejs 制作而成，服务端及其简单，主要是在前端的展示上面

使用legend 标识

使用颜色来分类让人一目了然，意味着建造过程中优秀，好，一般，问题，差，非常差的情况使用颜色来标识在模型上。

模型的分块详细情况

整体效果

服务代码

使用的express来做httpserver

const express = require('express');
const path = require('path');const app = express();const PORT = process.env.PORT || 5000;// Set static folder
app.use(express.static(path.join(__dirname, 'public')));app.listen(PORT, () => console.log('Server listening on port ' + PORT));

html

使用threejs来展示，模型为obj，带颜色信息

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="HandheldFriendly" content="true"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="style.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.1.min.js"></script><script src="three.js"></script><script src="MTLLoader.js"></script><script src="OBJLoader.js"></script><script src="OrbitControls.js"></script><script src="3dmodel.js"></script><title></title></head><body><div id="grid"><div class="tabs"><div class="openLegend"><i class="material-icons md-24">dvr</i></div><div class="openSwitcher"><i class="material-icons md-24">layers</i></div><div class="openHistory"><i class="material-icons md-24" id="icon1">query_builder</i></div></div><div class="tabLegend"><div class="panel-heading"><h5 class="panel-title"><span class="material-icons">dvr</span>Legend<button class="closeLegend"><span class="material-icons">clear</span></button></h5></div><div id="tab1"><div class="panel-body"><table><tr><td id="color1" style="background: #2FC02F;"></td><td><input type="text" id="status1" value="1 - Excellent condition"></td></tr><tr><td id="color2" style="background: #9ACD32;"></td><td><input type="text" id="status2" value="2 - Good condition"></td></tr><tr><td id="color3" style="background: #FFDF00;"></td><td><input type="text" id="status3" value="3 - Reasonable condition"></td></tr><tr><td id="color4" style="background: #FF8C00;"></td><td><input type="text" id="status4" value="4 - Moderate condition"></td></tr><tr><td id="color5" style="background: #FF0000;"></td><td><input type="text" id="status5" value="5 - Bad condition"></td></tr><tr><td id="color6" style="background: #CC0000;"></td><td><input type="text" id="status6" value="6 - Very bad condition"></td></tr></table></div></div></div><div class="tabSwitcher"><div class="panel-heading"><h5 class="panel-title"><span class="material-icons">layers</span>Switcher<button class="closeSwitcher"><span class="material-icons">clear</span></button></h5></div><div id="tab2"><div class="panel-body"><form><fieldset><div class="accordion-content"><div><label class="elements">Retaining structure<input type="checkbox" class="models" onclick="showObject()" checked><span class="checkmark"></span></label></div><div><label class="elements">Substructure<input type="checkbox" class="models" onclick="showObject()" checked><span class="checkmark"></span></label></div><div><label class="elements">Superstructure<input type="checkbox" class="models" onclick="showObject()" checked><span class="checkmark"></span></label></div><div><label class="elements">Span locks<input type="checkbox" class="models" onclick="showObject()" checked><span class="checkmark"></span></label></div></div></fieldset></form></div></div></div><div class="tabHistory"><div class="panel-heading"><h5 class="panel-title"><span class="material-icons" id="icon1">query_builder</span>History<button class="closeHistory"><span class="material-icons">clear</span></button></h5></div><div id="tab3"><div class="panel-body"><form><fieldset><div class="accordion-content"><div><label class="years">2012<input type="radio" name="condition" onclick="showHistory()" checked><span class="checkmark"></span></label></div><div><label class="years">2007<input type="radio" name="condition" onclick="showHistory()"><span class="checkmark"></span></label></div><div><label class="years">2002<input type="radio" name="condition" onclick="showHistory()"><span class="checkmark"></span></label></div></div></fieldset></form></div></div></div><div><label class="switch"><input type="checkbox" onclick="showGround()" checked><span class="slider round"></span></label></div><div id="info"><table id="table1"><div class="panel-heading"><h5 class="panel-title"><span class="fa fa-info-circle" id="icon3"></span>Details<button class="closeDetails"><span class="material-icons">clear</span></button></h5></div><tr><td class="inputrows">Object</td><td><input type="text" class="inputfields" id="object"/></td></tr><tr><td class="inputrows">Object type</td><td><input type="text" class="inputfields" id="objtype"/></td></tr><tr><td class="inputrows">Element</td><td><input type="text" class="inputfields" id="element"/></td></tr><tr><td class="inputrows">Inspection date</td><td><input type="text" class="inputfields" id="inspdate"/></td></tr><tr><td class="inputrows">Inspector</td><td><input type="text" class="inputfields" id="inspector"/></td></tr><tr><td class="inputrows" id="lastrow">Comments</td><td><textarea rows="4" cols="25" type="text" id="comments"></textarea></td></tr></table><p id="score">Condition<br style="clear: both;"/></p><table id="table2"><tr><td><p class="speech" id="score3"></p></td><td><p class="speech" id="score2"></p></td><td><p class="speech" id="score1"></p></td></tr></table><div id="line"></div><table id="table3"><tr><td>2002</td><td>2007</td><td>2012</td></tr></table></div><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div></div><div id="webgl"></div></div></body>
</html>

下载

代码和模型下载

介绍一个3d bim模型展示开源项目相关推荐

介绍一个关于小米Zigbee的开源项目
AqaraHub 说明:这个是一个开源项目,有兴趣的可以看一下. 项目名称: Frans-Willem/AqaraHub: github连接:https://github.com/Frans-Will ...
打造一个高逼格的android开源项目——小白攻略
小引子在平时的开发过程中,我们经常会查阅很多的资料,最常参考的是 github 的开源项目.通常在项目的主页面能看到项目的简介和基本使用,并且时不时能看到页面汇中有好多的彩色标签,看起来很酷,很专业 ...
如何做一个真正牛X 的开源项目
2019独角兽企业重金招聘Python工程师标准>>> 近年来,越来越多的开发者选择将自己的产品以开源形式发布,有时的结果是--你满怀诚意地开源,却无人问津.尽管你的产品做得相当好, ...
3D全景模型展示可视化技术演示
在疫情的影响下,全国多地实行管控,人员和货物流通受阻,对企业的产品销售带来很大的影响,这就凸显了线上三维(3D)展示的重要性,线上三维展示可以给企业产品宣传给来不少便利,很多企业利用线上三维交互展示把 ...
1个人，3个月业余时间，采用Flutter，居然仿写了一个淘宝电商开源项目
来源 | https://www.jianshu.com/p/194448388ce9 前言 Flutter现在如火如荼,Google也在大力推广,是到了学习Flutter的时候了,今天推荐一款用Fl ...
介绍针对企业级Flex开发的开源项目FlexibleShare
http://code.google.com/p/flexibleshare/ http://integratedsemantics.org/2009/05/19/flexibleshareair-d ...
手把手教大家在自己的Windows电脑上搭建一个视频电话系统（基于开源项目FreeSwitch+Linphone）
目前可以做视频电话的流媒体开源项目有很多,那么今天我就手把手教大家(基于FreeSwitch+Linphone)搭建一个免费的开源的能在局域网中使用的视频电话系统,部署与配置都非常的简单,而且点对点的 ...
分享Silverlight 3D 房屋设计和游戏开源项目
2011-05-03 06:53 by jv9, 2849 阅读, 6 评论, 收藏, 编辑 Silverlight 5 Beta版本中最引人注目的特性是3D功能,Silverlight 5与XNA ...
Unity 3D入门——模型展示
unity版本 unity2018或unity2019 Unity相关网站 1.Unity官方文档,Unity中国官网,有中文文档 https://unity.cn/ 2.Unity的资源商店,有很多 ...

介绍一个3d bim模型展示开源项目