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开发基础给你打好了!

相关文章
|
前端开发 定位技术
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
170 0
|
5月前
|
JavaScript 数据可视化 图形学
iCraft Editor - 助你轻松绘制出色的立体架构图
iCraft Editor是一款创新工具,专为绘制立体架构图设计,带来直观且吸引人的3D视觉体验。它简化了复杂系统的表达,支持自由旋转与缩放,让用户从多角度审视设计。简洁界面与丰富图形库让操作变得简单快捷,即使是新手也能迅速上手。iCraft Editor支持子场景嵌套及外部模型导入,适用于软件架构设计、系统部署维护等多种场景,提升沟通效率。无需编程基础,即可在线免费使用,轻松实现复杂设计的可视化。开启3D新视角,让您的创意无限延伸![官网](https://icraft.gantcloud.com)
909 1
iCraft Editor - 助你轻松绘制出色的立体架构图
|
6月前
|
流计算 Python
Python实现动态银河系:模拟旋转的银河动画
Python实现动态银河系:模拟旋转的银河动画
87 0
|
7月前
|
编解码 图形学 开发者
【unity小技巧】使用三种方式实现瞄准瞄具放大变焦效果
【unity小技巧】使用三种方式实现瞄准瞄具放大变焦效果
138 0
|
8月前
俄罗斯方块游戏开发实战教程(3):玩家如何控制形状
俄罗斯方块游戏开发实战教程(3):玩家如何控制形状
102 1
|
移动开发 前端开发 JavaScript
分享8个前端可以制作360度WebVr全景视图框架
分享8个前端可以制作360度WebVr全景视图框架
1882 0
分享8个前端可以制作360度WebVr全景视图框架
|
定位技术 API 图形学
unity-2D游戏官方案例--带视频案例(1)(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
unity-2D游戏官方案例--带视频案例(1)(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
230 1
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏05图像仿射变换(平移和缩放操作)
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏05图像仿射变换(平移和缩放操作)
171 0
|
存储 前端开发 搜索推荐
基于threejs的商品VR展示平台的设计与实现思路
本设计针对目前互联网销售传统展示的现状,考虑当前市场形式,利用虚拟现实技术理论,结合计算机网络、交互设计实现一个以普通终端浏览器为载体的适用于用户或消费者需求的VR展示平台系统,打造一种全新的商品展示方式,拉近用户或者消费者于商品的距离,提供商品全面的信息,提高商品的可信度,降低交易失败的风险,带来一次愉快完美的购物体验。
937 1
基于threejs的商品VR展示平台的设计与实现思路
Three.js系列: 游戏中的第一/三人称视角
Three.js系列: 游戏中的第一/三人称视角
Three.js系列: 游戏中的第一/三人称视角