如何低成本开发3D动效?看一下摄像头移动功能就知道了

简介: 这一次推出3D动效——摄像头跟随镜头移动

开发人员创作3D开发,如何做到低成本高质量?ThingJS周周迭代新功能,这一次推出3D动效——摄像头跟随镜头移动,甲方爸爸一定会说“行”!

在了解摄像机跟随物体移动之前,我们需要先了解摄像机,摄像机作为ThingJS中十分重要的一个对象,需要我们认真了解和学习。

摄像机包含两个重要的位置参数:镜头位置 position 和被拍摄物体的位置 target (又叫目标点)。(具体可以看看
https://www.thingjs.com/guide/cn/tutorial_Introduce/Camera.html)
1.png

形象点来说,镜头就像是手机的相机,摄像头的定位决定了拍摄的角度,而被拍摄物体的位置更好理解了,物体可以是静止不动的,也可以是移动的,所以ThingJS新推出摄像机跟随物体移动的新功能,如何一步步实现呢?

在跟随物体移动之前,我们需要了解物体在程序语言里移动方式,例如位移(move to)或让物体沿着不同的路径移动(move path)等,路径有方形路径、圆形路径,网页端通过点击按钮进行切换。
2.png

镜头跟随物体移动

ThingJS中世界坐标系使用position属性,想象一下,跟随物体移动(move path)的时候,摄像头需要一个合适的拍摄位置,比如正前方或后上方,那么改变这个坐标的position值就可以了。ThingJS默认position [0, 5, -10] 代表 摄像机位置为“移动小车后上方”,意味着向后移动到10m处,且向上移动5m,形成俯视定位,这就是世界坐标系下摄影机位置的计算方式。

跟随物体移动用到的path,主要是为物体设计一条有弧度的移动路径,由世界坐标系下的坐标点组成。所以,需要获取一个坐标点构成的数组,通过每一帧更新摄像机的位置实现沿着路径移动,最后使用stop moving接口来终止移动。


var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/simplebuilding'
});

// 加载场景后执行
app.on('load', function () {
    // 通过 name 查询到场景中的车
    var car = app.query('car01')[0];

    // 世界坐标系下坐标点构成的数组 关于坐标的获取 可利用「工具」——>「拾取场景坐标」
    // 拐角处多取一个点,用于转向插值计算时更平滑
    var path = [[0, 0, 0], [2, 0, 0], [20, 0, 0], [20, 0, 2], [20, 0, 10], [18, 0, 10], [0, 0, 10], [0, 0, 8], [0, 0, 0]];
    car.position = path[0];

    car.movePath({
        path: path,
        orientToPath: true,
        loopType: THING.LoopType.Repeat,
        time: 10 * 1000
    })

    new THING.widget.Button('摄像机跟随物体', function () {
        // 每一帧设置摄像机位置 和 目标点
        car.on('update', function () {
            // 摄像机位置为 移动小车后上方
            // 为了便于计算 这里用了坐标转换 将相对于小车的位置 转换为 世界坐标
            app.camera.position = car.selfToWorld([0, 5, -10]);
            // 摄像机目标点为 移动小车的坐标
            app.camera.target = car.position
        }, '自定义摄影机跟随');
    });

    new THING.widget.Button('停止', function () {
        car.off('update', null, '自定义摄影机跟随');
    });
});

低成本就是减少时间和开发的量,ThingJS团队基于丰富的项目经验制作出161个官方示例,帮助你完成基础的开发搭建。

相关文章
|
人工智能 供应链 监控
【AI 现况分析】AI 在机械制造领域的应用分析
【1月更文挑战第27天】【AI 现况分析】AI 在机械制造领域的应用分析
|
自然语言处理 算法 机器人
PaddleNLP通用信息抽取技术UIE【一】产业应用实例:信息抽取{实体关系抽取、中文分词、精准实体标。情感分析等}、文本纠错、问答系统、闲聊机器人、定制训练
PaddleNLP通用信息抽取技术UIE【一】产业应用实例:信息抽取{实体关系抽取、中文分词、精准实体标。情感分析等}、文本纠错、问答系统、闲聊机器人、定制训练
PaddleNLP通用信息抽取技术UIE【一】产业应用实例:信息抽取{实体关系抽取、中文分词、精准实体标。情感分析等}、文本纠错、问答系统、闲聊机器人、定制训练
|
弹性计算 缓存 应用服务中间件
阿里云服务器2核2G99元和2核4G199元实例规格性能及适用场景解析
2024年阿里云推出了两款云服务器,2核2G3M带宽40G ESSD Entry盘价格只要99元1年,2核4G5M带宽80G ESSD Entry盘价格只要199元1年,这两款云服务器的活动截止日期为2026年3月31日,活动期间新购、续费同价。那么这两款云服务器怎么样呢?可以用来做什么?本文将对这两款云服务器进行深度解析,包括配置介绍、实例规格、使用场景以及购买建议,以供选择参考。
阿里云服务器2核2G99元和2核4G199元实例规格性能及适用场景解析
|
机器学习/深度学习 资源调度 数据可视化
YOLOv11改进策略【注意力机制篇】| 引入Shuffle Attention注意力模块,增强特征图的语义表示
YOLOv11改进策略【注意力机制篇】| 引入Shuffle Attention注意力模块,增强特征图的语义表示
846 1
YOLOv11改进策略【注意力机制篇】| 引入Shuffle Attention注意力模块,增强特征图的语义表示
|
存储 供应链 安全
区块链在物流管理中的应用:让货物管理变得更智能
区块链在物流管理中的应用:让货物管理变得更智能
2857 15
|
人工智能 JavaScript 前端开发
你可能不敢想象,2025 年,jQuery要更新到 4.0 了
jQuery,由 John Resig 于2006年创建,曾帮助无数开发者简化DOM操作、事件处理和动画效果。历经19年,即便在React、Vue等现代框架盛行的今天,jQuery仍在更新。最新版4.0.0 Beta已推出,修复问题、提升性能并加入新特性,展示了其适应时代的能力。jQuery不仅是技术的坚持,更是文化和精神的传承,见证了众多开发者的青春。
888 11
|
传感器 安全 Linux
linux为什么不是实时操作系统
标准Linux内核并不是实时操作系统,因为它在任务调度、中断处理和内核抢占方面无法提供严格的时间确定性。然而,通过使用PREEMPT_RT补丁、Xenomai等实时扩展,可以增强Linux的实时性能,使其适用于某些实时应用场景。在选择操作系统时,需要根据具体应用的实时性要求,综合考虑系统的性能和可靠性。
722 1
|
自然语言处理 数据安全/隐私保护 UED
如何选择适合的域名:关键步骤与策略
在数字化时代,域名不仅是网站的身份标识,更是品牌在线形象的重要组成部分。本文将指导您如何选择一个恰当、易于记忆且富有意义的域名,从明确目标与定位、选择合适的域名类型与后缀、考虑长度与可读性、检查可用性与合法性、评估SEO价值、考虑未来扩展、购买与注册到监测与维护,全方位帮助您打造优质域名。
1236 4
|
运维 Java Nacos
Spring Cloud应用框架:Nacos作为服务注册中心和配置中心
Spring Cloud应用框架:Nacos作为服务注册中心和配置中心
|
算法 Linux API
Pygame的主要优势
【6月更文挑战第12天】Pygame的主要优势
782 3