html5自动吸附,基于HTML5Canvas的3D渲染引擎界面以及吸附等效果的运用-
本文给大家介绍基于 HTML5 Canvas 的 3D 渲染引擎界面以及吸附等效果的运用 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
效果图
代码实现
HT 提供了基于 WebGL 的 3D 技术的图形组件 ht.graph3d.Graph3dView,WebGL 基于 OpenGL ES 2.0 图形接口,因此 WebGL 属于底层的图形 API 接口,二次开发还是有很高的门槛,HT 的 Graph3dView 组件通过对 WebGL 底层技术的封装,与 HT 其他组件一样,基于 HT 统一的 DataModel 数据模型来驱动图形显示,极大降低了 3D 图形技术开发的门槛。同时 HT 提供了强大的完全基于 HTML5 技术 3D 图形建模设计器,用户无需编码即可快速可视化搭建各种 3D 场景,可以说 HT 的 3D 开发模式完全打破了传统 3D 开发模式,绝大部分应用不再需要依赖精通 3ds Max 或 Maya 的专业 3D 设计师来建模,也不需要整合 Unity3d 等引擎做图形渲染,HT 一站式的提供了从建模到渲染,包括和 2D 组件呈现和数据融合的一站式解决方案。
本次讲解的就是这个 3D 的界面,所以我们首先要创建 3D 渲染引擎组件,可视化呈现数据模型的三维环境场景。dataModel = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.addToDOM();
window.addEventListener('resize', function (e) {
g3d.invalidate();
}, false);
我们还要设置眼睛(或Camera)所在位置,默认值为 [0, 300, 1000] ,格式为 [x, y, z] 。g3d.setEye([0, 300, 600]);
然后我们再给它加上一些选中效果。Graph3dView 中被选中的图元会显示为较暗的状态,变暗系数是由图元 style 的 brightness 和 select.brightness 属性决定,select.brightness 属性默认值为 0.7,最终返回值大于 1 变亮,小于 1 变暗,等于 1 或为空则不变化。Graph3dView#getBrightness 函数控制最终图元亮度,因此也可以通过重载覆盖该函数自定义选中图元亮度。g3d.getBrightness = function (data) {
if (data.s('isFocused')) {
return 0.7;
}
return null;
};lastFocusData = null;g3d.getView().addEventListener('mousemove', function (e) {
// 传入逻辑坐标点或者交互 event 事件参数,返回当前点下的图元
var data = g3d.getDataAt(e); if (data !== lastFocusData) {
if (lastFocusData) {
astFocusData.s('isFocused', false);
} if (data) {
data.s('isFocused', true);
}
astFocusData = data;
}
});
接下来我们写个函数来方便绘制每个部分的模型:function createNode (p3, s3, host) {
// 拓扑图元类型 var node = new ht.Node(); // 获取或设置图元中心点的三维坐标 有三个参数时相当于 setPosition3d 没有相当于 get node.p3(p3); // 获取或设置图元的尺寸 有三个参数时相当于 setSize3d 没有相当于 get node.s3(s3); // 设置宿主图元,当图元吸附上宿主图元(host)时,宿主移动或旋转时会带动所有吸附者 node.setHost(host);
dataModel.add(node); return node;
}
讲到了这,我们来说说吸附,吸附功能对于设计有层次关系的模型非常方便,例如设备面板吸附上设备机框,设备端口吸附上设备面板,这样从机框 - 面板 - 端口的层次关系吸附,使得用户拖动整体机框时所有这个层次下的图元都会跟随移动。对于 3D 的场景下,吸附的概念更进一步延伸,当机框在三维空间进行任意位置偏移以及任意角度旋转时,所有吸附的相关图元都会正确的跟随平移,并做出相应位置对应的旋转,以达到整体设备各个图形部分保持物理相对位置一致。
下面我们来一起创建模型吧!分别是地板 floor,桌面 table,四个桌腿以及盒子:// 地板
floor = createNode([0, 0, 0], [600, 5, 400]).s({
'all.color': '#A0A0A0',// 六面颜色
'label': '地板',// 图元文字内容
'label.face': 'top',// 文字在3d下的朝向,可取值(left|right|top|bottom|front|back|center)
'label.background': 'yellow',// 图元文字背景
'label.position': 22,// 图元文字位置
'label.t3': [10, 0, -10],// 文字在3d下的偏移,格式为 [x,y,z]
'label.font': '28px arial, sans-serif'// 图元文字字体
});
// 桌面
table = createNode([0, 120, 0], [400, 10, 280], floor).s({
'shape3d': 'cylinder',// 为空时显示为六面立方体,cylinder 圆柱
'shape3d.side': 60,// 决定 3d 图形显示为几边型,为 0 时显示为平滑的曲面效果
'shape3d.color': '#E5BB77',// 3d 图形整体颜色
'label': '桌子',
'label.face': 'top',
'label.background': 'yellow',
'label.position': 23,
'label.t3': [0, 0, -10],
'label.font': '20px arial, sans-serif'
});
// 四个桌腿
foot1 = createNode([100, 60, 80], [20, 110, 20], table).s({
'shape3d': 'cylinder',
'shape3d.color': '#E5BB77',
});
foot2 = createNode([-100, 60, 80], [20, 110, 20], table).s({
'shape3d': 'cylinder',
'shape3d.color': '#E5BB77',
});
foot3 = createNode([100, 60, -80], [20, 110, 20], table).s({
'shape3d': 'cylinder',
'shape3d.color': '#E5BB77',
});
foot4 = createNode([-100, 60, -80], [20, 110, 20], table).s({
'shape3d': 'cylinder',
'shape3d.color': '#E5BB77',
});
// 盒子
box = createNode([0, 150, 0], [100, 50, 60], table).s({
'all.color': '#2e2f32',
'front.color': '#BDC3C7',// 前面颜色
'note': '盯着你看', // 图元冒泡标注
'note.face': 'top',
'note.position': 7,
'note.t3': [0, 0, 10],
'note.autorotate': true// 图标在 3D 下是否自动朝向眼睛的方向
});
代码中有一些属性,我已经帮大家写好了详细的注释。在此献上各种关于 'shape3d' 的图形的值,方便大家玩耍:
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程!
html5自动吸附,基于HTML5Canvas的3D渲染引擎界面以及吸附等效果的运用-相关推荐
- 基于 HTML5 的 2D/3D 渲染引擎,实现智慧隧道监控可视化系统
前言 随着当代经济的发展,交通环境日益紧张,加上山区地区的交通运输的需求,隧道的交通建设开发方兴未艾.隧道交通的规划越来越完备,而对于隧道内监控管理维护却显得有些不足.而工业4.0的崛起,逐步进入了智 ...
- Horde3D——基于C++编写的3D渲染引擎
Horde3D是一个用C++编写的3D渲染引擎,致力于成为一款轻量型.概念清晰的软件.项目托管在GitHub上,项目许可证基于EPL. Horde3D是一个用C++编写的3D渲染引擎,致力于成为一款轻 ...
- 基于多核平台优化的OGRE 3D渲染引擎
基于多核平台优化的OGRE 3D渲染引擎 陈天洲1+,陈学亮1, 施青松1 1(浙江大学计算机学院,浙江杭州,310027) 摘 要:近年来,随着计算机体系结构的发展,多核平台的应用越来越广泛.多核平 ...
- 3D绘图 WebGl引擎----ThreeJS 3D渲染引擎
3D绘图 WebGl引擎---->ThreeJS 3D渲染引擎 是将OpenGl ES2.0d原来C语言的API和配置项迁移到了JavaScript中 壹.基本图形语法 1.ThreeJs将原本 ...
- 自研3D渲染引擎 置身游戏世界般的3D大屏体验 还不快来看看
知道大家在制作可视化大屏的时候会不会遇到这样的问题,不是找不到心仪的模板就是好不容易在网上找到一个喜欢的模板结果得付费才能使用,最后只能妥协用那些万年不变的模板,现在市面上各种各样的可视化大屏制作软件 ...
- 了解3D世界的黑魔法 - 纯Java构造一个简单的3D渲染引擎
前言 当今用于游戏和多媒体的3D渲染引擎在数学和编程的复杂性上足以令大多数人望而生畏,从编程接口的OpenGL再到逼真到令人叹为观止的UE5(虚幻五)引擎,后者单单引擎本身(不含调试)的大小就达到了将 ...
- 基于 Flutter 的 Web 渲染引擎「北海」正式开源!
简介: 阿里巴巴历时 3 年自研开发的 Web 渲染引擎北海(英文名:Kraken)正式开源,致力打造易扩展,跨平台,高性能的渲染引擎,并已在优酷.大麦.天猫等业务场景中使用. 作者 | 染陌 来源 ...
- 3D可视化:自研3D渲染引擎,园区可视化呈现
运用人工智能.云计算.物联网等新一代信息技术,整合园区的所有信息资源,将园区运行管理可视化,全面提升整体工作效率,是数据可视化在园区建设中发挥的重要作用. 今天给分享了几个不同场景的园区可视化大屏,都 ...
- 关于 Vulkan 简介 —— Android N 引入新的 3D 渲染引擎
关于 Vulkan Vulkan 被视作是 OpenGL 的后续产品. 它是一种多平台 API,可支持开发人员准备游戏.CAD 工具.性能基准测试等高性能图形应用. 它可在不同的操作系统(比如 Win ...
最新文章
- Provisioning profile XXXX can't be found
- dojo使用query dojo/query
- github怎么隐藏自己的pr记录_记便签的软件哪个好?怎么及时记录自己的想法
- oracle视图不能创建,ORACLEsoctt不能创建视图
- 封条格式用word怎么打_汽车密封条保养膏怎么用?大师来教你正确方法
- 漫话:如何给女票解释华为鸿蒙OS是怎样牛逼实现跨平台的?
- linux系统奔溃之vmcore:kdump 的亲密战友 crash
- 常见脱壳与反编译工具
- 课程作业记录10:63位PN码序列扩频通信Matlab仿真
- 玩转Kinetis之教你将K60主频超到200MHz以上
- 大一计算机题库百度云,大一计算机考试题库.pdf
- 【无标题】人工智能--大数据介绍
- excel整列动态联动下拉_在Excel下拉列表中显示多列
- Canvas百战成神-圆(1)
- 2021最新版本Python的下载安装及使用入门教程
- 风口的猪(小米实习生招聘)
- Unknown custom element:xxxx- did you register the component correctly? For recursive compo
- Elyse Alexander - Unplanned Song WA47电子管麦克风
- 微型计算机的特点及其主板构成,第1章 计算机基础知识教案
- Android牌子p40pro的手机,华为P40Pro手机使用深度对比实用评测