基于 HTML5 Canvas 的 3D 模型贴图问题

  •   之前注意到的一个例子,但是一直没有沉下心来看这个例子到底有什么优点,总觉得就是一个 list 列表,也不知道右边的 3d 场景放两个节点是要干嘛,今天突然想起来就仔细地看了一下这个例子的代码,实际操作中应该还是有用处的,就跟大家分享一下。

      实现图如下,看起来略有点简陋,但是可以自己天马心空增加或者更改成你需要的东西:

      首先,创建场景,HT 中有一个 BorderPane 面板组件是拿来页面排布的,可以排布 html 标签,也可以排布 HT 的组件,这里我们将整个页面分为三个部分,顶部工具条 、左侧列表 listView 和中间 3d 场景 g3d,再将这个面板组件添加进 html body 体中:

      addToDOM 函数是 HT 封装好的将 HT 组件添加进 body 体中的一个方法,其实现逻辑如下:

      我们一个部分一个部分来解析,从最上层的 工具条开始,如下:

      工具条也是分为三个部分,一是左侧的搜索框,二是中间的分割线,三是右侧的点击按钮。

      我们首先向工具条 中添加这三个元素,具体添加方法请参考 HT for Web 工具条手册:

      接下来向左侧的 listView 列表中添加数据,这个数据就是 product.js 中的变量 products,通过遍历这个数组变量,将这个数组中的所有值都填充到 listView 列表中:

      然后对 listView 列表进行一系列的样式属性的设置:行高、背景、icon 图标、文字提示等等。代码如下,解释都在代码中了,还有不懂的请查阅 HT for Web 列表手册:

      列表组件中还封装了一个很方便的函数 setSortFunc,用于设置排序函数,用户也可以自定义,目前我们希望对这些”商品“进行排序:

      因为我们要进行数据的搜索,就要对数据以及显示方面进行过滤,因为在数据变化时,HT 无法获知需要更新,这时候就要我们手动对有显示变化的部分调用更新函数 invalidate 简写为 iv。

      我们对文本输入框的键盘弹起事件进行事件的,然后判断我们输入的值在 listView 列表中是否存在等操作对显示界面进行过滤:

      第三个部分,右侧 3d 场景,利用的是 HT 的三维组件 ht.graph3d.Graph3dView,然后在 3d 场景上添加两个节点,作为对照: