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

2024-08-30 11:32

本文主要是介绍基于 HTML5 Canvas 的 3D 模型贴图问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

本例地址: http://hightopo.com/guide/guide/core/listview/examples/example_custom.html

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

图片描述

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

borderPane = new ht.widget.BorderPane();//面板组件                
toolbar = new ht.widget.Toolbar(); //工具条                    listView = new ht.widget.ListView(); //列表组件
g3d = new ht.graph3d.Graph3dView();// 3d 组件borderPane.setTopView(toolbar);//将 toolbar 放置到面板中的顶部
borderPane.setLeftView(listView, 350); //将 listView 放置到面板中的左侧
borderPane.setCenterView(g3d); //将 g3d 放置到面板中的中间borderPane.addToDOM(); //将面板组件添加进 body 中

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

addToDOM = function(){   var self = this,view = self.getView(),//通过 getView 函数获取组件的底层 divstyle = view.style;document.body.appendChild(view); //body 添加孩子 view           style.left = '0';style.right = '0';style.top = '0';style.bottom = '0';      window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小变化时,立即刷新组件            
}

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

图片描述

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

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

toolbar.setItems([//设置工具条元素数组              {id: 'text',label: 'Search',icon: 'images/search.png',textField: {width: 120}},'separator',{label: 'Sort by price',type: 'toggle',//toggle表示开关按钮selected: true,action: function(){listView.setSortFunc(this.selected ? sortFunc : null);}}
]);

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

图片描述

products.forEach(function(product){//products 是在product.js 文件中定义的var data = new ht.Data();data.a(product);//设置数据 data 的 attr 属性、listView.dm().add(data);//将 data 添加进 listView 的数据容器中
}); 

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

listView.setRowHeight(50);//设置行高
listView.drawRowBackground = function(g, data, selected, x, y, width, height){//绘制行背景色,默认仅在选中该行时填充选中背景色,可重载自定义if(this.isSelected(data)){//选中时g.fillStyle = '#87A6CB';}else if(this.getRowIndex(data) % 2 === 0){//偶数行时g.fillStyle = '#F1F4F7';}else{g.fillStyle = '#FAFAFA';}g.beginPath();g.rect(x, y, width, height);g.fill();
};
// HT 通过 ht.Default.setImage('name', json) 函数来注册图片
ht.Default.setImage('productIcon', {width: 50,height: 50,clip: function(g, width, height) {//clip 用于裁剪绘制区域//利用canvas画笔绘制,实现自定义裁剪任意形状的效果//这里是将图片裁剪成圆形g.beginPath();//x, y, radius, startAngle, endAngle, anticlockwiseg.arc(width/2, height/2, Math.min(width, height)/2-3, 0, Math.PI * 2, true);g.clip();},comps: [//矢量图形的组件Array数组,每个数组对象为一个独立的组件类型,数组的顺序为组件绘制先后顺序{type: 'image',stretch: 'uniform',//图片始终保持原始宽高比例不变化,并尽量填充满矩形区域rect: [0, 0, 50, 50],//指定组件绘制在矢量中的矩形边界 [x, y, width, height]四个参数方式,分别代表左上角坐标x和y,以及宽高width和heightname: {func: function(data){return data.a('ProductId');}}//图片的名字为 data.a('ProductId') 返回的值}]
});
listView.setIndent(60);//设置indent缩进,该参数一般用于指定图标的宽度                 
listView.getIcon = function(data){//返回data对象对应的icon图标,可重载自定义return 'productIcon';//这个是前面 ht.Default.setImage 函数注册过的矢量图形
};  listView.enableToolTip();//开启文字提示
listView.getLabel = function(data){//返回data对象显示的文字,默认返回data.toLabel(),可重载自定义return data.a('ProductName') + ' - $' + data.a('UnitPrice').toFixed(2);
};                
listView.getToolTip = function(e){//根据传入的交互事件,返回文本提示信息,可重载自定义var data = this.getDataAt(e);//传入逻辑坐标点或者交互event事件参数,返回当前点下的数据元素if(data){return '<span style="color:#3D97D0">ProductId:&nbsp;</span>' + data.a('ProductId') + '<br>' +  '<span style="color:#3D97D0">ProductName:&nbsp;</span>' + data.a('ProductName') + '<br>' +  '<span style="color:#3D97D0">QuantityPerUnit:&nbsp;</span>' + data.a('QuantityPerUnit') + '<br>' + '<span style="color:#3D97D0">Description:&nbsp;</span>' + data.a('Description');                        }return null;
};

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

sortFunc = function(d1, d2){//自定义排序函数return d1.a('UnitPrice') - d2.a('UnitPrice');
};
listView.setSortFunc(sortFunc);//HT 定义的 设置排序函数

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

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

// 对text文本框进行键盘按键弹起事件监听 toolbar.getItemById('text').element.getElement().onkeyup = function(e){listView.invalidateModel();//无效模型,最彻底的刷新方式 “完全刷新”
};
//如果文本框输入的值在
listView.setVisibleFunc(function(data){//设置可见过滤器                    var text = toolbar.v('text');//getValue(id)根据id获取对应item元素值,简写函数为v(id)if(text){              return data.a('ProductName').toLowerCase().indexOf(text.toLowerCase()) >= 0;//indexOf()方法返回在类型数组中可以找到给定元素的第一个索引,如果不存在,则返回-1}return true;
});

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

//创建两个节点放到 3d 场景中
var node = new ht.Node();
node.s3(30, 30, 30);//设置三维大小
node.p3(-30, 15, 0);//设置三维坐标
node.s('all.color', '#87A6CB');//设置 node 的六个面颜色                
g3d.dm().add(node);//将新建的 node 添加进 3d 场景的数据容器中var node = new ht.Node();
node.s3(30, 30, 30);
node.p3(30, 15, 0);
node.s('all.color', '#87A6CB');
node.setElevation(15);
g3d.dm().add(node);g3d.setEye(-100, 100, 80);//设置 3d 场景的眼睛(或Camera)所在位置,默认值为[0, 300, 1000]
g3d.setGridVisible(true);//设置是否显示网格
g3d.setGridColor('#F1F4F7');//设置网格线颜色
整个场景创建完毕,接下来就是将 listView 中显示的 icon 图标拖拽到 3d 中的节点上,作为贴图。列表组件中封装了一个拖拽的功能 handleDragAndDrop,这个函数有两个参数,event 交互事件和 state 当前状态,我们对拖拽事件的不同状态进行不同的处理:listView.handleDragAndDrop = function(e, state){//该函数默认为空,若该函数被重载,则pan平移组件功能将被关闭if(state === 'prepare'){//state当前状态,先后会有prepare-begin-between-end四种过程var data = listView.getDataAt(e);//传入逻辑坐标点或者交互event事件参数,返回当前点下的数据元素listView.sm().ss(data);//设置选中当前事件所在的数据元素if(dragImage && dragImage.parentNode){document.body.removeChild(dragImage);}dragImage = ht.Default.toCanvas('productIcon', 30, 30, 'uniform', data);// toCanvas(image, width, height, stretch, data, view, color)将图片转换成Canvas对象productId = data.a('ProductId');}else if(state === 'begin'){if(dragImage){var pagePoint = ht.Default.getPagePoint(e);//返回page属性坐标dragImage.style.left = pagePoint.x - dragImage.width/2 + 'px';//实时更新拖拽时的图标的位置dragImage.style.top = pagePoint.y - dragImage.height/2 + 'px';document.body.appendChild(dragImage);//在 html body 体中添加这个拖拽的图片}}else if(state === 'between'){if(dragImage){var pagePoint = ht.Default.getPagePoint(e);//返回page属性坐标dragImage.style.left = pagePoint.x - dragImage.width/2 + 'px';dragImage.style.top = pagePoint.y - dragImage.height/2 + 'px';   if(ht.Default.containedInView(e, g3d)){//判断交互事件所处位置是否在View组件之上,一般用于Drog And Drop的拖拽操作判断//这边做了两个判断,一个是鼠标在拖拽的时候未松开,一个是鼠标拖拽的时候松开了。if(lastFaceInfo){//鼠标未松开的情况下,贴图显示旧值//data.face 默认值为front,图标在3D下的朝向,可取值left|right|top|bottom|front|back|centerlastFaceInfo.data.s(lastFaceInfo.face + '.image', lastFaceInfo.oldValue);lastFaceInfo = null;}//鼠标松开时,将新值赋给这个面var faceInfo = g3d.getHitFaceInfo(e);//获取鼠标所在面信息if(faceInfo){faceInfo.oldValue = faceInfo.data.s(faceInfo.face + '.image');//获取面的“老值”faceInfo.data.s(faceInfo.face + '.image', productId);//front/back/top/bottom/left/right.image 设置这些面的贴图lastFaceInfo = faceInfo;}}}}else{//拖拽结束之后,所有值都回到初始值if(dragImage){//有从列表中拖拽图片if(lastFaceInfo){//有赋“图片”到 3d 中的节点上lastFaceInfo.data.s(lastFaceInfo.face + '.image', lastFaceInfo.oldValue);lastFaceInfo = null;}                             if(ht.Default.containedInView(e, g3d)){                               var faceInfo = g3d.getHitFaceInfo(e);if(faceInfo){faceInfo.data.s(faceInfo.face + '.image', productId);}}                                                        if(dragImage.parentNode){document.body.removeChild(dragImage);}dragImage = null;  productId = null;}}
}; 

这篇关于基于 HTML5 Canvas 的 3D 模型贴图问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120694

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali