ThingJS新推出曲线UV动画,3D开发基础给你打好了!

简介: UV动画是一种常用的渲染技巧,经常用来描述水的流动、霓虹灯的闪烁等

UV动画是一种常用的渲染技巧,经常用来描述水的流动、霓虹灯的闪烁等,ThingJS在CamBuilder里进行曲线贴图设置,对接UV动效开发。
UV是什么?通过改变纹理坐标,实现动态效果的纹理动画。在3D场景中,一些动态水面、流动的岩浆、跳动的火焰等等,都是通过操作UV做的动画。在CampusBuilder可以根据功能项的曲线属性设置动画效果,修改流动速度、线宽大小、贴图位移、贴图重复等样式。
下载CamBuilder编辑器,免费注册账号,在右侧菜单栏找到“功能”一项。
1.jpg

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

选择一张贴图,刷到曲线中,生成背景画面。
3.jpg

点击曲线属性,选择开启流动动画,利用流动速度的正负设置正反方向,数字越大代表速度越快。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;
})

4.jpg
5.jpg

什么是锚点呢?片断是由锚点组成的,只有修改锚点才能改变片断形态。注意锚点一旦被删除,片段也会同时消失。在CamBuilder内,点击左键可以设置新锚点,可能因操作原因产生重叠锚点现象,虽然不影响流动动画,但是会缺乏流畅度,如上图示。

ThingJS新推出曲线UV动画,3D开发基础给你打好了!

相关文章
|
1月前
|
前端开发 JavaScript 数据可视化
WebGL 入门:开启三维网页图形的新篇章(上)
WebGL 入门:开启三维网页图形的新篇章(上)
|
移动开发 算法 JavaScript
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
2309 1
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
|
1月前
|
编解码 前端开发 JavaScript
移动端1像素的解决方案?
在移动端开发中,由于不同设备的像素密度差异,1像素问题成为了一个常见的难题。如果我们不对这个问题进行针对性的解决,那么会导致页面显示效果不美观,甚至影响用户体验。
44 0
|
移动开发 前端开发 JavaScript
分享8个前端可以制作360度WebVr全景视图框架
分享8个前端可以制作360度WebVr全景视图框架
1502 0
分享8个前端可以制作360度WebVr全景视图框架
|
定位技术 API 图形学
unity-2D游戏官方案例--带视频案例(1)(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
unity-2D游戏官方案例--带视频案例(1)(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
147 1
|
前端开发 数据可视化
基于canvas的粒子酷炫效果,可用作可视化大屏的背景展示,即拿即用......
基于canvas的粒子酷炫效果,可用作可视化大屏的背景展示,即拿即用......
105 0
An动画基础之元件的影片剪辑动画与传统补间
An动画基础之元件的影片剪辑动画与传统补间
257 0
An动画基础之元件的影片剪辑动画与传统补间
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
138 0
iOS开发 - 柱状图动态展现动画
|
数据可视化 前端开发 算法
[译] 用 WebGL 探索动画和交互技术(一个学习案例
约束过程 主要使用 three.js 和 GreenSock 库,这些实验都是手动编码的,没有凭借任何 3D 或动画软件。 这个过程包括以编程的方式塑造角色,一次一个方块。在精炼比例上我花费了大多数工夫。通过微调代码中的值来总体渲染位置,然后通过用户输入(大多是移动鼠标,点击,拖动等等)来移动每个部分。 这个过程的优点不是很明显。但它能让我仅仅通过文本编辑器就能创造整个实验,利用 Codepen 提供的实时预览,整个过程非常灵活。 话虽如此,这个过程有自己的一套限制,以保持可管理性:角色必须用尽可能少的部分构建; 每个部分由数量很小的顶点组成; 动画必须针对数量有限的行为。 「注意」:
[译] 用 WebGL 探索动画和交互技术(一个学习案例
SwiftUI—制作渐缓时间曲线的位移动画
SwiftUI—制作渐缓时间曲线的位移动画
422 0
SwiftUI—制作渐缓时间曲线的位移动画