最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 基于 HTML5 Canvas 的 3D 渲染引擎界面以及吸附等效果的运用_html5教程


    本文给大家介绍基于 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]);

    这里给大家说一下,可参考 3D 手册( http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html )。

    1.jpg

    然后我们再给它加上一些选中效果。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图文教程

    HTML5在线手册

    html5特效代码大全

    以上就是基于 HTML5 Canvas 的 3D 渲染引擎界面以及吸附等效果的运用的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 969会员总数(位)
    • 111831资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 202稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐