JSAPIThree 渲染系统学习笔记：让场景动起来

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');
const engine = new mapvthree.Engine(container);

// 渲染管理器已经自动创建了！
console.log(engine.rendering); // 可以访问渲染管理器

// 开启循环渲染
engine.rendering.enableAnimationLoop = true;

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
    },
    rendering: {
        enableAnimationLoop: true, // 开启循环渲染
    },
});

// 设置帧时间间隔为 16 毫秒（约 60 FPS）
engine.rendering.animationLoopFrameTime = 16;

// 60 FPS（默认）
engine.rendering.animationLoopFrameTime = 16;

// 30 FPS
engine.rendering.animationLoopFrameTime = 33;

// 120 FPS（更快，但更耗性能）
engine.rendering.animationLoopFrameTime = 8;

engine.rendering.addPrepareRenderListener((engine, renderState) => {
    // 每帧渲染前都会执行这里的代码
    console.log('正在渲染...');
});

// 监听渲染事件
engine.rendering.addPrepareRenderListener((engine, renderState) => {
    // 获取当前视野距离
    const range = engine.map.getRange();
    
    // 根据视野距离控制模型的显示隐藏
    if (range > 1000) {
        // 视野太远，隐藏模型
        mesh.visible = false;
    } else {
        // 视野较近，显示模型
        mesh.visible = true;
    }
});

engine.rendering.addPrepareRenderListener((engine, renderState) => {
    if (renderState.viewChanged) {
        // 只有视野变化时才执行
        console.log('视野变化了！');
    }
});

// 开启抗锯齿
engine.rendering.features.antialias.enabled = true;
engine.rendering.features.antialias.method = 'smaa';

// 开启 Bloom 泛光
engine.rendering.features.bloom.enabled = true;
engine.rendering.features.bloom.strength = 0.1;
engine.rendering.features.bloom.threshold = 1;
engine.rendering.features.bloom.radius = 0;

// 设置像素比
engine.rendering.pixelRatio = 1.0;

// 正常分辨率（默认）
engine.rendering.pixelRatio = window.devicePixelRatio;

// 降低分辨率（节省性能）
engine.rendering.pixelRatio = 1.0;

// 提高分辨率（更清晰，但更耗性能）
engine.rendering.pixelRatio = 2.0;

// 开启高质量缓冲区
engine.rendering.useHighPrecisionBuffer = true;

// 开启高质量缓冲区
engine.rendering.useHighPrecisionBuffer = true;

// 开启调试模式
engine.rendering.debugMode = 1; // DEBUG_MODE_MESH

// 开启网格调试模式
engine.rendering.debugMode = 1;

// 冻结更新
engine.rendering.freezeUpdate = true;

// 恢复更新
engine.rendering.freezeUpdate = false;

// 冻结更新
engine.rendering.freezeUpdate = true;

// 做一些操作...

// 恢复更新
engine.rendering.freezeUpdate = false;

// 获取渲染器
const renderer = engine.rendering.renderer;

// 获取场景
const scene = engine.rendering.scene;

// 获取相机
const camera = engine.rendering.camera;

// 获取渲染分辨率
const resolution = engine.rendering.resolution;
console.log(resolution); // 分辨率信息

// 获取动画管理器
const animation = engine.rendering.animation;

// 获取标签实例
const label = engine.rendering.label;

// 获取拾取器实例
const picking = engine.rendering.picking;

// 获取天气实例
const weather = engine.rendering.weather;

// 获取天空实例
const sky = engine.rendering.sky;

// 获取渲染状态
const renderState = engine.rendering.renderState;

// 检查视野是否变化
if (renderState.viewChanged) {
    console.log('视野变化了！');
}

// 开启自动偏移
engine.rendering.autoOffsetRelativeCenter = true;

const engine = new mapvthree.Engine(container, {
    rendering: {
        contextParameters: {
            preserveDrawingBuffer: true, // 开启保留绘图缓冲区
        },
    },
});

const engine = new mapvthree.Engine(container, {
    rendering: {
        contextParameters: {
            preserveDrawingBuffer: true, // 开启截图功能
        },
    },
});

// 截图
const dataURL = engine.rendering.renderer.domElement.toDataURL();

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
    },
    rendering: {
        enableAnimationLoop: true,
        animationLoopFrameTime: 16,
        pixelRatio: 1.0,
        features: {
            antialias: {
                enabled: true,
                method: 'smaa',
            },
            bloom: {
                enabled: true,
                strength: 0.1,
                threshold: 1,
                radius: 0,
            },
        },
    },
});

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
    },
    rendering: {
        enableAnimationLoop: true,
        animationLoopFrameTime: 16,
        features: {
            bloom: {
                enabled: true,
            },
        },
    },
});

engine.rendering.enableAnimationLoop = true;

// 降低帧率
engine.rendering.animationLoopFrameTime = 33;

// 降低像素比
engine.rendering.pixelRatio = 1.0;

// 关闭不必要的特效
engine.rendering.features.bloom.enabled = false;

engine.rendering.addPrepareRenderListener((engine, renderState) => {
    if (renderState.viewChanged) {
        const range = engine.map.getRange();
        
        // 根据视野距离控制模型显示
        models.forEach(model => {
            model.visible = range < 5000;
        });
    }
});

import * as mapvthree from '@baidumap/mapv-three';
import {Mesh, BoxGeometry, MeshStandardMaterial, Color} from 'three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 60,
    },
    rendering: {
        enableAnimationLoop: true,
        animationLoopFrameTime: 16,
        pixelRatio: 1.0,
        features: {
            bloom: {
                enabled: true,
                strength: 0.1,
            },
        },
    },
});

// 创建一个模型
const geometry = new BoxGeometry(50, 50, 50);
const material = new MeshStandardMaterial({
    color: new Color(2, 2, 0),
});
const mesh = new Mesh(geometry, material);
engine.add(mesh);

const position = engine.map.projectArrayCoordinate([116.404, 39.915]);
mesh.position.set(position[0], position[1], 0);

// 监听视野变化，控制模型显示
engine.rendering.addPrepareRenderListener((engine, renderState) => {
    if (renderState.viewChanged) {
        const range = engine.map.getRange();
        
        // 视野太远时隐藏模型
        if (range > 1000) {
            mesh.visible = false;
        } else {
            mesh.visible = true;
        }
    }
});