有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型,然后通过obj格式导入到HT for Web系统中进行控制,这种方式特别适合复杂模型的应用场景,但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具,完全通过HT for Web预定义的和内置自定义3D模型API就能满足很多应用,这里介绍几种场景的自定义3D模型应用。
上图是采用HT提供的createRingModel函数,通过编辑2D的多边形生成对应的环状的3D模型,对于花瓶碗杯等环形对称的物体很适合采用该函数构建。除了createRingModel外,HT的建模手册中的custommodel自定义模型例子,还采用了createExtrusionModel等更多的自定义模型API构建了一个餐桌椅和墙面的场景,其效果如下:
HT内置的基础模型也有很多参数可调节设置出多种模型效果,参见HT建模手册的如下例子:
自定义模型还可用于构建如机房、机框、板卡和端口的常见电信网管监控模型:
http://v.youku.com/v_show/id_XODY2ODc0ODY0.html
该EMS设备管理系统例子3D模型和Tree组件通过HT强大灵活的模型与图形的数据绑定功能,从而实现树上自定义图标和3D自定义模型的数据共享,实时一致刷新效果,以下为该EMS例子的全部JavaScript代码:
function init(){ dm = new ht.DataModel(); treeView = new ht.widget.TreeView(dm); g3d = new ht.graph3d.Graph3dView(dm); mainSplit = new ht.widget.SplitView(treeView, g3d, 'h', 0.2); view = mainSplit.getView(); view.className = 'main'; document.body.appendChild(view); window.addEventListener('resize', function (e) { mainSplit.invalidate(); }, false); register2DImage(); register3DModel(); addModel(); g3d.setGridVisible(true); g3d.setGridSize(30); g3d.setGridGap(50); g3d.setEye([200, 200, 600]); g3d.setCenter([0, 200, 0]); g3d.getView().style.background = '#F9F9F9'; g3d.getLabel = function(data){ return data.s('label'); }; dm.sm().setFilterFunc(function(data){ return data !== wall; }); treeView.setVisibleFunc(function(data){ return data !== wall; }); treeView.expandAll(); } function register2DImage(){ ht.Default.setImage('ems-frame', { width: 18, height: 18, comps: [ { type: 'rect', rect: [5, 4, 8, 11], borderWidth: 2, borderColor: '#34495E' } ]}); ht.Default.setImage('ems-pane', { width: 18, height: 18, comps: [ { type: 'rect', rect: [0, 4, 18, 10], background: {func: 'style@shape3d.color'} } ]}); ht.Default.setImage('ems-block', { width: 18, height: 18, comps: [ { type: 'circle', rect: [0, 2, 18, 10], background: { func: 'attr@circleColor', value: '#3498DB' } }, { type: 'rect', rect: [4, 14, 10, 3], background: { func: 'attr@rectColor', value: '#3498DB' } } ]}); } function register3DModel(){ ht.Default.setShape3dModel('ems-frame', ht.Default.createFrameModel(0.1, 0, 0.1, {top: true, bottom: true, back: true})); ht.Default.setShape3dModel('ems-block', [ { shape3d: ht.Default.createCylinderModel(32, 0, 32, false, false, true, true), r3: [Math.PI/2, 0, 0], color: { func: 'attr@circleColor', value: '#3498DB' } }, { shape3d: 'box', s3: [1, 0.2, 1], t3: [0, -0.7, 0], color: { func: 'attr@rectColor', value: '#3498DB' } } ]); } function addModel(){ wall = new ht.Shape(); wall.setName('Wall'); wall.setPoints(new ht.List([ {x: -750, y: 750}, {x: -750, y: -750}, {x: 750, y: -750}, {x: 750, y: 750} ])); wall.setTall(400); wall.setElevation(200); wall.s({ 'shape.border.width': 5, 'shape.border.color': 'rgba(20, 20, 20, 0.8)', 'shape.background': null, 'all.color': 'rgba(102, 192, 218, 0.95)', 'all.transparent': true, 'all.reverse.cull': true }); dm.add(wall); var frame = new ht.Node(); frame.setName('Main Frame'); frame.setIcon('ems-frame'); frame.s3(120, 300, 120); frame.p3(0, 152, 0); frame.s({ 'shape3d': 'ems-frame', 'shape3d.color': '#34495E', 'label': 'www.hightopo.com', 'label.color': 'white', 'label.background': '#3498DB', 'label.position': 6, 'label.t3': [-6, -54, 6], 'label.r3': [0, Math.PI/4, Math.PI/2] }); dm.add(frame); var colors = ['#9C8CE7', '#00C59D', '#A741B6', '#F5C700', '#31485F', '#F81F25', '#00B862', '#3B7DA7']; for(var i=0; i<6; i++){ var pane = new ht.Node(); pane.setIcon('ems-pane'); pane.setName('Pane' + (i+1)); pane.s3(108, 16, 8); pane.s({ 'shape3d': 'box', 'shape3d.color': '#ECF0F1' }); pane.setHost(frame); pane.setParent(frame); dm.add(pane); if(i < 2){ for(var j=0; j<8; j++){ var block = new ht.Node(); block.setName('block ' + i + '*' + j); block.s3(8, 8, 12); block.p3(-39+j*11, 1, 0); block.setHost(pane); block.setParent(pane); block.setIcon('ems-block'); block.s({ 'shape3d': 'ems-block' }); if(i === 1){ block.a({ 'circleColor': colors[j], 'rectColor': '#00F2CF' }); } dm.add(block); } }else{ pane.setName('Pane' + (i+1) + ' [ Empty ]'); pane.s({ 'shape3d.color': '#BDC3C7' }); } pane.p3(0, 265-i*27, 54); } }
相关推荐
HT FOR WEB 一套强大的基于 WebGL 技术的 3D 图形引擎,编辑器下,左边菜单可自定义控制多个不同的菜单操作。
web端3d渲染插件,可以直接在web端调用webgl显示3d模型
很牛的web动态3D人体模型,根据人体走路的特征进行数据分析。官方网址:http://www.biomotionlab.ca/Demos/webgl_walker/
webgl载入模型webgl载入模型webgl载入模型 webgl载入模型webgl载入模型webgl载入模型
作为Mapbox自定义图层的WebGL风粒子模拟___下载.zip
Web端的网页内嵌,可以在web实现视频的播放,网页的通讯交互
课程分享——地图Web3D可视化-WebGL、Three.js,附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可,如果了解three.js更好 适用人群 有前端基础,想基于Web实现地图数据的3D...
吊机模型文件 .gltf 文件 ,超图 - SuperMap iClient3D for WebGL 及常用方法案例相关模型文件
HT for Web,通常简称为 HT,这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发,其核心文件只有一个,就是 ”ht.js”。在 index.html 中使用 script 标签进入后便可使用。 完全版本效果:...
3D-webgl-shader-editor.zip,用于创建WebGL着色器的实时编辑器,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
Unity通用WebGL模板Universal WebGL Template 1.2.1 仅供学习,请勿商用。
企业内部Web3D开发技术分享,Web3D是一种利用Web技术创建和展示3D场景和模型的技术。 Web3D技术让用户可以通过Web浏览器直接访问和浏览3D内容,无需安装任何额外的插件或软件。 Web3D技术通常使用HTML、CSS、...
声音文件被解析,然后在时间和频率域可视化,以及使用Web音频API呈现-这是一个练习,我教自己如何显示一个正在进行的项目的数据在声音合成…,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个...
Unity3D如何导出为webGL--教程.zip
Web Worker 使用起来非常简单,在“主线程”中执如下操作即可创建一个 Worker 实,通过监听onmessage 事件获取消息,通过 postMess
HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip
模型,FBX,J20
效果超棒的Webgl模型-
一个基于webGL的3D机房demo,实现了烟雾、巡检、漏水、机柜容量等功能