如何使用基于HTML5Canvas的3D渲染引擎界面以及吸附等效果-创新互联
这篇文章主要为大家展示了如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果”这篇文章吧。
创新互联是一家集网站建设,远安企业网站建设,远安品牌网站建设,网站定制,远安网站建设报价,网络营销,网络优化,远安网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。html有什么特点
1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
效果图
代码实现
HT 提供了基于 WebGL 的 3D 技术的图形组件 ht.graph4d.Graph4dView,WebGL 基于 OpenGL ES 2.0 图形接口,因此 WebGL 属于底层的图形 API 接口,二次开发还是有很高的门槛,HT 的 Graph4dView 组件通过对 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.graph4d.Graph4dView(dataModel); g3d.addToDOM(); window.addEventListener('resize', function (e) { g3d.invalidate(); }, false);
我们还要设置眼睛(或Camera)所在位置,默认值为 [0, 300, 1000] ,格式为 [x, y, z] 。
g3d.setEye([0, 300, 600]);
这里给大家说一下,可参考 3D 手册( http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html )。
然后我们再给它加上一些选中效果。Graph4dView 中被选中的图元会显示为较暗的状态,变暗系数是由图元 style 的 brightness 和 select.brightness 属性决定,select.brightness 属性默认值为 0.7,最终返回值大于 1 变亮,小于 1 变暗,等于 1 或为空则不变化。Graph4dView#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 Canvas的3D渲染引擎界面以及吸附等效果”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:如何使用基于HTML5Canvas的3D渲染引擎界面以及吸附等效果-创新互联
URL链接:http://scyanting.com/article/dcjsej.html