三维流动实现方法 ht for web

一. 类似水管内部水的流动

  1. 两套模型。一套在外,作为管道。另一套在内作为水的流动
  2. 在内管道贴图要求:颜色、透明相互交替。
  3. 流动具体实现,在json中添加tag属性,在页面中通过g3d.dm().getDataByTag(“yellow”);获取对应的模型,在添加、更改属性

{
"c": "ht.Node",
"i": 19884,
"p": {
"tag": "propelled",
"rotationZ": -0.40143,
"position": {
"x": -0.00031,
"y": -369
},
"elevation": 129.36739
},

  1. 三维的流动通过shape3d.uv.offset改变内在管道的贴图而实现流动

function yellow(offset1) {
var anim1 = ht.Default.startAnim({
duration: 2000,
action: function() {
offset1 += 0.015;
var pipelines = g3d.dm().getDataByTag("yellow");
pipelines.s("shape3d.uv.offset", [offset1, 0]);
},
finishFunc: function() {
yellow(offset1);
}
});
}

二、三维物体旋转(通过json加载)
1.给模型添加标签,表示不同的模型
{
"c": "ht.Node",
"i": 19884,
"p": {
"tag": "propelled",
"rotationZ": -0.40143,
"position": {
"x": -0.00031,
"y": -369
},
"elevation": 129.36739
},

2.通过该方法3d.dm().getDataByTag(“yellow”);得到模型
3.通过setRotationZ(值)旋转
function xuanzhuan(offset1) {
var anim1 = ht.Default.startAnim({
duration: 2000,
action: function(data) {
offset1 === 360 ? (offset1 = offset1 * -1) : (offset1 += 0.3);
var propelled1 = g3d.dm().getDataByTag("propelled"); //通过标签获得模型,从而进行操作
propelled1.setRotationZ(offset1);
console.log(propelled1);
},
finishFunc: function() {
xuanzhuan(offset1);
}
});
}

猜你喜欢

转载自www.cnblogs.com/esykllh/p/10418174.html
ht
HT5
今日推荐