大尺寸超高分辨率渲染入指南

大尺寸超高分辨率渲染是指的不通过云渲染，直接在部署机器上点击启动文件启动的渲染方式。最大的优点是能突破浏览器所造成的4K分辨率限制，提供更好的视觉效果。缺陷是对客户端性能要求很高，不再支持移动端等低性能设备。

接入方式：

1. 最为简单直接，初始化的时候，传递一个参数 renderMode: 'inner',其他的都不需要，即可直接完成引擎接入，内部已经封装好了复杂的处理逻辑。

const cloudEngine = new Engine.CloudRenderEngine({
          renderMode: 'inner',
});
 cloudEngine.addEventListener('videoInitialised', init);

使用方式：

下面是一个moveTo的函数调用示例代码，可以看到和云渲染方式没有任何区别。

    function move() {
        const location = inputValue.split(',').map((item, index) => {
            return parseFloat(item);
        });
        if (location.length !== 3) {
            location.push(10);
        }
        if (cloudEngine) {
            cloudEngine?.moveTo(
                {
                    x: location[0],
                    y: location[1],
                    z: location[2],
    
    
                },
                {
                    roll: 0, pitch: -50, yaw: 93,
                },
                {
                    zoom: 0, duration: 1, preload: true, endLineDetect: false, detectLength: 0, flyOverLongitude: true, callback: moveToEnd
                }
            );
            console.log('moveTo location :>> ', location);
        }
        
    }

    function moveToEnd() {
        console.log('move end');
    }

一个完整的示例代码

import React, {useEffect, useState, useCallback, useRef} from 'react';
import {Button, Input, Space} from 'antd';
import * as Engine from '@baidu/cloudrenderengine';
import './WebUIExample.module.less'

export default function WebUICommunicationExample() {
    // 状态管理
    const [cloudEngine, setCloudEngine] = useState(null); // 存储引擎实例
    const [videoReady, setvideoReady] = useState(true); // 系统是否准备就绪的状态
    const engineRef = useRef(null); // 使用ref存储引擎实例，防止重复创建

    const [inputValue, setInputValue] = useState(''); // 输入框的值，用于存储跳转坐标
    
    // 视频初始化完成后的回调函数
    const init = useCallback(() => {
        // 视频初始化完成后的处理逻辑
        console.log('videoInitialised'); // 记录系统已就绪
        setvideoReady(false); // 更新系统就绪状态
        setInterval(() => {
            printStats(); // 定期打印相机状态
        }, 3000);
    }, []);
    
    // 组件挂载时初始化云渲染引擎
    useEffect(() => {
        // 只在engineRef为空时初始化引擎，防止重复创建
        if (!engineRef.current) {
            console.log('初始化引擎');
            const cloudEngine = new Engine.CloudRenderEngine({
              renderMode: 'inner', // 使用内部渲染模式
            });
            engineRef.current = cloudEngine; // 保存到ref中
            setCloudEngine(cloudEngine); // 更新状态
            window.cloudEngine = cloudEngine; // 暴露给全局，方便调试
            cloudEngine.addEventListener('videoInitialised', init); // 监听视频初始化事件
        }
    }, []);

    // 打印引擎相机状态的函数
    function printStats() {
        if (engineRef.current) {
            console.log('cloudEngine camera:>> ', engineRef.current.camera);
        }
    }

    // 跳转到指定坐标的函数
    function move() {
        // 解析输入的坐标字符串为数组
        const location = inputValue.split(',').map((item, index) => {
            return parseFloat(item);
        });
        
        // 如果坐标不完整，添加默认高度
        if (location.length !== 3) {
            location.push(10);
        }
        
        // 调用引擎的moveTo方法进行跳转
        if (engineRef.current) {
            engineRef.current?.moveTo(
                {
                    x: location[0], // 经度
                    y: location[1], // 纬度
                    z: location[2], // 高度
    
    
                },
                {
                    roll: 0, pitch: -50, yaw: 93, // 相机旋转角度
                },
                {
                    zoom: 0, duration: 1, preload: true, endLineDetect: false, 
                    detectLength: 0, flyOverLongitude: true, callback: moveToEnd // 移动完成后的回调
                }
            );
            console.log('moveTo location :>> ', location);
        }
        
    }

    // 移动结束后的回调函数
    function moveToEnd() {
        console.log('move end');
    }

    // 输入框值变化的处理函数
    const handleInputChange = e => {
        console.log('e :>> ', e.target.value);
        setInputValue(e.target.value); // 更新输入值状态
    }

    // 渲染UI组件
    return (
        <>
            {/* <div id={'player'} className={styles.player}></div> */}
            <div>
                <Space direction='vertical'>
                    {/* 坐标输入框 */}
                    <Input 
                        placeholder="113.1234342123,23.12222,123.111" 
                        value={inputValue} 
                        onChange={handleInputChange}
                    />
                    {/* 跳转按钮 */}
                    <Button onClick={() => move()}>跳转</Button>
                </Space>
            </div>
        </>
    );
}