3D 管道如何实现流动的？

在 3D 场景中，管道是一种极为常见且重要的元素。它不仅能用于呈现工厂、发电站、地下设施等工业环境中的输送系统，还可用来模拟数据的流动或处理过程，从而向用户直观展示数据的流向。

在 HT 中，ht.Polyline 是一个强大的工具，可以用来在 3D 场景中表示管道。它不仅支持贴图，还能通过调整贴图的 UV 偏移等属性，生动地展示数据流的方向。ht.Polyline 不仅限于简单的管道表现，还可以使用它实现如流动、漫游等的功能。

管道流动

动画的核心在于控制节点属性的变化，而管道流动动画则是通过在动画过程中调节贴图的 UV 偏移属性来实现的。因此，这种动画形式也被称之为 UV 偏移动画。通过不断更新 UV 偏移属性，使得贴图在节点表面产生流动的效果。

管道中控制贴图偏移的属性是 shape3d.uv.offset，在代码中不断递增/递减这个属性值就可实现流动效果。

具体代码如下：

复制代码

var config = {    
    duration: 1000,    
    easing: t => t,   
    action: (v, t) => {        
        polyline.s('shape3d.uv.offset', [v, 0]);    
    },    
    finishFunc: () => {        
        ht.Default.startAnim(config);    
    }
}
ht.Default.startAnim(config);

管道流动动画最终呈现的效果如下：

管道的 UV 偏移动画是一种常用于表现物质流动方向的技术，图示案例便是典型示例，它极具表现力地呈现出了流动效果。

鱼道效果

开发者可以借此发挥创造力，利用管道流动动画实现更多创新的视觉效果。

例如，使用管道流动来模拟鱼道效果。通过绘制多条鱼的游动路径，并在管道上应用鱼的贴图，然后通过动画展现出鱼儿在水中游动的逼真场景。这个方法不仅生动形象，还为视觉呈现增添了动态趣味。

UV 裁切

管道不仅可以通过贴图实现流动动画效果，还能结合裁切属性打造更多丰富多样的视觉效果。例如管道的生长动画、管道显示过渡的效果。

管道裁切主要包括两个属性：

**■裁切方向：**3d.clip.direction

**■裁切比例：**3d.clip.percentage

从裁切方向属性上可将裁切分为普通裁切 和特殊裁切。

普通裁切时，可从六个方向对管道进行裁切：

**■从右到左裁切：**设置属性值为 left

**■从左到右裁切：**设置属性值为 right

**■从上到下裁切：**设置属性值为 top

**■从下到上裁切：**设置属性值为 bottom

**■从前到后裁切：**设置属性值为 back

**■从后到前裁切：**设置属性值为 front

除以上提到的六种常规的裁切方向，为了使得管道沿着 UV 的方向裁切，HT 还提供了 uv.right 或者 uv.left 的裁切方向。使用这两种裁切方向，场景需要确保开启 UV 裁切使能：g3d.setUvClipEnabled(true)。

具体的实现代码如下：

复制代码

g3d.setUvClipEnabled(true); // 开启 UV 裁切使能polyline.s('3d.clip.direction', 'uv.right') // 设置管道裁切方向属性

ht.Default.startAnim({    
     duration: 1000,   
     easing: t => t,    
     action: (v, t) => {        
     polyline.s('3d.clip.percentage', v);    
     },    
     finishFunc: () => {}
});

管道漫游

HT 提供了可获取管道长度 g3d.getLineLength()、根据百分比获取管道位置 g3d.getLineOffset() 的 API 。借助这两个 API，能够实现漫游动画等效果。

场景漫游

在 HT 在中，开发者可以通过 eye 和 center 属性来控制视角。那么漫游就是通过不断调整 eye 和 center 实现。由此可见，我们就可以利用上述提到的 API 来使得场景视角的沿着管道不断变化的效果。也就是场景漫游的效果。

具体实现的代码可以参考如下：

复制代码

const length = g3d.getLineLength(polyline);
const roamConfig = {    
    duration: 20e3,    
    easing: t => t,    
    action: (v, t) => {        
        const offset = g3d.getLineOffset(polyline, length * v),            
            point = offset.point,            
            px = point.x,            
            py = point.y,            
            pz = point.z,            
            tangent = offset.tangent,            
            tx = tangent.x,            
            ty = tangent.y,            
            tz = tangent.z;        
        g3d.setEye([px, py, pz]);        
        g3d.setCenter([px + tx, py + ty, pz + tz]);    
    },    
    finishFunc: () => {}
};
roamAnim = ht.Default.startAnim(roamConfig);

模型漫游动画

通过上面的示例，我们了解到，可以使用 g3d.getLineOffset() 获取管道上指定百分比的位置。如果将这一功能用于模型的坐标变化，那么就能实现模型沿着预设的管道路径进行位移的动画效果。也就是模型漫游效果。

具体实现代码如下：

复制代码

const params = {
    duration: 60000,
    easing: function (t) {
        return t;
},
action: function (v, t) {
        const lineLength = g3d.getLineLength(polyline);
        const offset = g3d.getLineOffset(polyline, lineLength * v),
            point = offset.point,
            px = point.x,
            py = point.y,
            pz = point.z,
            tangent = offset.tangent,
            tx = tangent.x,
            ty = tangent.y,
            tz = tangent.z;
        plane.p3(px, py, pz);
        plane.lookAt([px + tx, py + ty, pz + tz], 'front');
    },
    finishFunc: function () {}
};
animation = ht.Default.startAnim(params);

在 HT 中，管道作为一种重要的工具，不仅用于模型的静态展示，在动态表现上也同样发挥着关键作用。在工业领域，它被广泛应用于展示复杂的管线布控和输送系统；同时，开发者也能充分发挥创意，借助管道实现丰富多样的动画效果。

如果您在管道的使用或创意实现上有更多想法，或是遇到了相关问题，欢迎随时与我们交流探讨，期待能与您一同挖掘管道在 3D 场景中的更多可能性~