如何低成本开发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个官方示例,帮助你完成基础的开发搭建。

相关文章
|
6月前
|
存储 编解码 监控
C++与OpenGL结合实现的屏幕监控软件:高性能屏幕录制解决方案
使用C++和OpenGL结合,本文展示了如何创建高性能屏幕录制软件。通过OpenGL的`glReadPixels`获取屏幕图像,存储为视频文件,再利用C++的网络编程(如libcurl)将监控数据提交到网站。示例代码包括了屏幕捕获和数据上传的简单实现。
286 2
|
2月前
|
人机交互 计算机视觉
|
2月前
|
Android开发 开发者
Android平台无纸化同屏如何实现实时录像功能
Android平台无纸化同屏,如果需要本地录像的话,实现难度不大,只要复用之前开发的录像模块的就可以,对我们来说,同屏采集这块,只是数据源不同而已,如果是自采集的其他数据,我们一样可以编码录像。
|
3月前
|
Web App开发 前端开发 UED
移动端适配布局指南:打造完美用户体验的秘密武器
【8月更文挑战第26天】在Web前端开发中,选择合适的移动端适配方案对确保跨设备的良好显示与用户体验至关重要。常用方案包括:媒体查询实现响应式布局;百分比、flexbox与CSS Grid布局提供更灵活的设计;结合viewport元标签和rem单位实现等比缩放;利用第三方库如Bootstrap加速开发。实践中应综合运用这些技术,并通过广泛测试保证兼容性和效果。
66 4
|
4月前
|
编解码 前端开发 JavaScript
响应式设计与移动端适配技巧:打造无缝用户体验
【7月更文挑战第29天】响应式设计与移动端适配是提升网站和应用用户体验的关键环节。通过遵循响应式设计的核心原则,并结合一系列移动端适配技巧,我们可以打造出既美观又实用的跨平台应用,满足不同用户的多样化需求。随着技术的不断进步和用户需求的日益复杂,持续学习和实践这些技巧将是我们作为开发者的重要任务。
|
6月前
|
Web App开发 安全 API
想开发一款带有视频通话/共享屏幕功能的产品?那WebRTC是你必须要知道的!
一名技术爱好者在研究如何为开源项目集成视频通话功能时,深入学习了WebRTC技术。WebRTC是一个API,允许浏览器和应用实现实时音视频通信,简化了之前复杂的技术挑战,如音视频处理和网络传输。该技术可用于视频通话、桌面共享、视频会议等多种场景。在WebRTC中,通过信令交换、STUN/TURN服务器和ICE框架处理网络连接和通信路径,实现点对点连接。与WebSocket不同,WebRTC专注于高质量实时通信,使用UDP协议以降低延迟。接下来的文章将分享如何实现WebRTC的视频通话功能。
|
6月前
|
编解码
跨屏适配问题有哪些
跨屏适配问题有哪些
36 0
|
6月前
|
机器学习/深度学习 人工智能 算法
免费背景音人声分离解决方案MVSEP-MDX23,足以和Spleeter分庭抗礼
在音视频领域,把已经发布的混音歌曲或者音频文件逆向分离一直是世界性的课题。音波混合的物理特性导致在没有原始工程文件的情况下,将其还原和分离是一件很有难度的事情。 言及背景音人声分离技术,就不能不提Spleeter,它是一种用于音频源分离(音乐分离)的开源深度学习算法,由Deezer研究团队开发。使用的是一个性能取向的音源分离算法,并且为用户提供了已经预训练好的模型,能够开箱即用,这也是Spleeter泛用性高的原因之一,关于Spleeter,请移步:[人工智能AI库Spleeter免费人声和背景音乐分离实践(Python3.10)](https://v3u.cn/a_id_305),这里
免费背景音人声分离解决方案MVSEP-MDX23,足以和Spleeter分庭抗礼
|
JavaScript 前端开发 BI
关于大屏适配我所知道的
关于大屏适配我所知道的
187 0
下一篇
无影云桌面