1. 如何加载外部动画模型并渲染出动画效果参考以下链接
2. 利用three.js在前端渲染出动画实际上也是操作canvas,录制过程主要为录制canvas绘制过程
移动端ios不太支持...
参考:
加载外部模型:
http://t.csdn.cn/KGhne
字节前端:
[如何将 Canvas 绘制过程转为视频 - 掘金 (juejin.cn)]
https://juejin.cn/post/6916796501851111431
通过创建渲染器,会自动生成一个canvas元素,我们拿到该canvas就可以录制
// 录制的函数为
record() {
console.log('录制函数')
// 使用three.js渲染,会在container容器中自动创建出一个canvas画布绘制,
// 自己手动创建的canvas无效,在元素中找到three.js的画布进行录制
const element = document.getElementById('container')
const canvas = element.querySelector('canvas'); // element的孩子节点
const stream = canvas.captureStream(); // 获取 MediaStream 对象:
// 创建一个 MediaRecorder,录制结果是标准编码后的媒体数据流,
const recorder = new MediaRecorder(stream, {
mimeType: 'video/webm'
});
// 注册 ondataavailable 事件,将数据记录下来:
const data = [];
recorder.ondataavailable = function(event) {
if (event.data && event.data.size) {
data.push(event.data);
}
}
// 在 onstop 事件里,通过 Blob 对象,将数据写入到页面上的 video 标签中。
recorder.onstop = () => {
const url = URL.createObjectURL(
new Blob(data, {
type: 'video/webm'
})
);
console.log('视频地址:url ', url)
var end = new Date().getTime()
console.log('录制视频222222cost is', end - this.start)
document.querySelector("#videoContainer").style.display = "block";
// Slow it to 50% speed
// document.querySelector("video").playbackRate = 0.5;
document.querySelector("video").src = url;
document.querySelector("video").playbackRate = 0.15;
this.videoUrl = url
// 创建a标签在浏览器自动下载视频(小程序中无效)
var a = document.createElement('a')
a.href = url
a.download = 'record-canvas.mp4'
a.style.display = 'none'
document.body.appendChild(a)
a.click()
};
recorder.start();
// 在xx秒后停止
var timeInterval = this.videoTime; //时间间隔可修改
setTimeout(() => {
recorder.stop();
}, timeInterval);
}