ThingJS让物联网3D动效开发简化并加速渲染

最新推荐文章于 2024-08-23 10:47:48 发布

原创

最新推荐文章于 2024-08-23 10:47:48 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用ThingJS库进行物联网3D动效开发，特别是UV动画的实现。通过改变纹理坐标，可以创建类似游戏的动态效果，如流动水面、跳动火焰等。在CampusBuilder编辑器中，用户可以设置曲线属性，调整流动速度和贴图样式，创建逼真的动画。对于初学者，js工程师只需一周即可上手进行3D场景的开发。

UV动画主要用于序列帧，用来模拟无限重复的背景。ThingJS系列组件支持开发UV动画，轻松媲美游戏动画效果。
UV是什么？通过改变纹理坐标，实现动态效果的纹理动画。在3D场景中，一些动态水面、流动的岩浆、跳动的火焰等等，都是通过操作UV做的动画。在CampusBuilder可以根据功能项的曲线属性设置动画效果，修改流动速度、线宽大小、贴图位移、贴图重复等样式。
下载CamBuilder编辑器，免费注册账号，在右侧菜单栏找到“功能”一项。

在CampusBuilder中，选择功能项下的曲线，手动添加一条曲线，线宽和锚点可以手动设置，一个锚点可生成一个新的片段。

选择一张贴图，刷到曲线中，生成背景画面。

点击曲线属性，选择开启流动动画，利用流动速度的正负设置正反方向，数字越大代表速度越快。CamBuilder可以无缝对接ThingJS在线平台，开启曲线UV动画示例代码如下：

var app = new THING.App({ 
    // 场景地址
    "url": "https://www.thingjs.com/static/models/guan"
});

app.on('load', function () {
    app.query('.RouteLine')[0].scrollUV = true;
    app.query('.RouteLine')[0].scrollSpeed = -100;
})

最低0.47元/天解锁文章