利用three.js渲染外部3D动画模型gltf文件,将渲染出的动画录制为视频

参考:

加载外部模型 t.csdn.cn/KGhne

字节前端:

如何将 Canvas 绘制过程转为视频 - 掘金 (juejin.cn)

通过创建渲染器,会自动生成一个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);
    }