设置Proxima背景为视频

2021-08-06 by uino 85 Proxima

如果你是Proxima 3.x:

配置如下图即可(可配任何层级背景): image.png

如果你是Proxima 2.x(4步完成即可):

  1. 登入服务器,找到Proxima可视化路径后,里面有个index.html
  2. 使用nodepad++/sublime text 3 开打index.html并格式化代码(因为index.html被压缩了)
  3. 添加代码到指定body区域如下: <video src="./video/Interstellar_3840x960_H264.mp4" id="backVideo" oncanplay="this.play()" style="width:100%;height:100%;object-fit: fill;z-index: -1;position: absolute;" muted preload loop autoplay ></video> 图示:
  4. 贴入config.js如下代码(该代码是地球层级为视频,若其他层级也需要,需适当修改)
    THING.App.current.on('LAYER_BUTTON_CLICK_AFTER', (ev) => {
        // console.error('>>>>', ev);
        if (ev.button.isChecked) {
            THING.App.current.level.current.trigger(`LAYER_BUTTON_CLICKED_${ev.button.id}_${THING.App.current.level.current.id}`, {
                object: THING.App.current.level.current
            });
            console.info(`LAYER_BUTTON_CLICKED_${ev.button.id}_${THING.App.current.level.current.id}`);
        } else {
            THING.App.current.level.current.trigger(`LAYER_BUTTON_UNCLICKED_${ev.button.id}_${THING.App.current.level.current.id}`, {
                object: THING.App.current.level.current
            });
            console.info(`LAYER_BUTTON_UNCLICKED_${ev.button.id}_${THING.App.current.level.current.id}`);
        }
    }, '转发图层事件');
    
    // 场景背景设置为空,用来显示视频背景
    app.on(THING.EventType.LoadProgress, (event) => {
        // console.error(event.progress)
        if (event.progress === 1) {

            const pageHome = document.getElementsByClassName('page-home')[0];
            if (pageHome) {
                pageHome.style.backgroundColor = 'transparent';
            }
            const simpleGroupLayer = {
                async clickCB(button) {

                    THING.App.current.trigger('LAYER_BUTTON_CLICK_BEFORE', {
                        button
                    });
                    THING.App.current.trigger(`LAYER_BUTTON_CLICK_BEFORE_${button.id}`, {
                        button
                    });
                    button.changeCheckState();

                    THING.App.current.trigger('LAYER_BUTTON_CLICK_AFTER', {
                        button
                    });
                    THING.App.current.trigger(`LAYER_BUTTON_CLICK_AFTER_${button.id}`, {
                        button
                    });
                }

            }
            uinv.layerManager.layer.regGroupButton(simpleGroupLayer);
            uinv.layerManager.layer.buttonLib = {}
        }
    }, '监听加载进度', 1);

    if(THING.App.current.level.current&&THING.App.current.level.current.id=='earthRoot'){
        THING.App.current.scene.background = null;
    }
    app.on(THING.EventType.EnterLevel, '#earthRoot', (event) => {
        setTimeout(()=>{
            THING.App.current.scene.background = null;
        },300);
    }, '清空背景', 1);