html中添加3dmax建模,HT for Web自定义3D模型的WebGL应用
有不少朋友询问《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建模手册的如下例子:
该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
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);
}
}
html中添加3dmax建模,HT for Web自定义3D模型的WebGL应用相关推荐
- html中添加3dmax建模,3DSMAX制作逼真的欧式沙发建模教程
继续上步操作,连接边,输入分段数.(图34) 图34 再次选择顶点,依然遵循隔一选一的原则.(图35.36) 图35 图36 重复靠背的操作,将软包坐垫做出.(图37.38.39) 图37 图38 图 ...
- 用HT for Web实现3D列车行进动画
HT for Web有一套强大的基于WebGL技术的图形引擎,可以用js代码实现3D图像的建模和动画.现在用HT for Web来实现一个3D列车行进的动画来带大家了解一下如何使用这套框架. < ...
- 基于HT for Web的3D拓扑树的实现
在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...
- 「建模学习」游戏中的场景建模,原来是靠3D扫描建模技术完成?
在AAA游戏和大型影视项目中,需要大量的.建筑.场景.道具乃至角色模型,依靠传统建模流程制作周期长,费时费力.如何提高效率,降低成本,优化工作流程? 国际模型新趋势-一3D扫描建模技术,正在为游戏.影 ...
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...
- 做游戏建模,想知道免费3D模型哪里找?这8个网站不可少
想必各位旁友总有些时候想找一个现成的模型来节省时间,或者找一个模型来学习一下制作方法,具体参数等等.但网上的模型几乎都要收费,最近有很多粉丝在后台问,能不能介绍一些免费下载模型的网站呢?今天来了.拿好 ...
- 深圳3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
深圳3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.纸箱机械生产工艺流程三维建模可视化,能清楚的展示出瓦楞纸板的生产,纸板印刷工艺和纸箱成型工艺的各个环节及运行原理.造纸厂生产的卷 ...
- 南京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
南京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.伴随我国工业转型数字化的不断推进,企业厂区以智能制造为核心的智慧厂房计划正不断加速落地实施,越来越多的制造企业逐步加入工业数字化 ...
- 北京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
北京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.无论是工业4.0还是中国制造2025,智能工厂是实现以上目标的载体,更是中国制造业企业未来的发展方向.面对许多智能制造设备.生产 ...
- 兰州3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
兰州3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.兰州在3D智慧工厂数字化建模的基础上,得出一套符合生产领域发展的定向数字化工厂建设路径.3D工厂数字化建模的基础,工厂数字化的发 ...
最新文章
- 【C++】C++11 STL算法(五):设置操作(Set operations)、堆操作(Heap operations)
- Android开发精要1--Android系统架构
- boost::units模块实现绝对温度和温差的华氏和开尔文之间的转换的测试程序
- cron表达式详解 Elastic-Job名次解释
- linux下汇编语言开发总结
- 手机内部零件名称图解_旧手机回收后都干嘛了?
- python--批量下载豆瓣图片
- 2021年度移动广告流量观察白皮书
- abb机器人开通选项_ABB机器人623-1Multitasking选项 ABB机器人多任务使用方法教程...
- 集群虚拟服务器,Nginx集群
-LVS(Linux虚拟服务器)简介
- iOS app启动图片及icon图片及应用名设置
- strcmp函数使用中的一些细节问题
- mac java开发如何_Macbook适合Java开发吗?
- 雅可比矩阵(Jacobian)、海森矩阵(Hessian)
- winhex万能恢复磁盘数据
- 万年历(Java版)完整代码
- 「 神器 」极简网速监控悬浮窗软件
- Flutter 2.8 更新详解
- html 边框终点 圆点,CSS设置虚线或虚边框dashed border
- 天正坐标标注显示不全_CAD命令栏坐标显示不全
热门文章
- gpasswd 附属组管理,添加用户到附属组中
- csv可以保存特殊字符_浅谈CSV注入漏洞
- python输入一系列的值_python中的input()和print()输入输出函数应用实例笔记
- r语言html帮助是什么东西,R语言帮助的使用
- 高德地拖缩放怎么保证中心点不变_出国学习,价值何在?听听留学生们怎么说...
- springboot 初始化一个常量map_C++ 惯用法: const 常量和字面量
- hive循环语句_Hive 如何方便地实现存储过程?
- php7 aop,php之aop实践
- 解决:关于启动Kafka一段时间后,进程自己停止运行的问题
- IDEA中对Git的常规操作