@baidumap/mapv-three 1.3.2 → 1.4.0

package/dist/devtool/panel.js

@@ -18,6 +18,71 @@ function updateUrlParam(paramName, paramValue) {
     const newUrl = `${url.pathname}${newSearch ? '?' + newSearch : ''}${url.hash}`;
     window.location.href = newUrl;
 }
+
+/**
+ * 给 dat.gui 的 controller 增加日期时间选择功能
+ * @param {dat.GUI} gui dat.gui 实例
+ * @param {object} obj 存放数据的对象
+ * @param {string} prop 对象的属性名（必须是 Date 类型）
+ * @returns {dat.controllers.Controller}
+ */
+function addDateTimeController(gui, obj, prop, listen = false) {
+    // 初始化时把 Date 转换成 HTML input 能识别的字符串
+    const toInputValue = date => {
+        if (!(date instanceof Date)) {
+            return '';
+        }
+        const pad = n => String(n).padStart(2, '0');
+        return (
+            date.getFullYear()
+            + '-' + pad(date.getMonth() + 1)
+            + '-' + pad(date.getDate())
+            + 'T' + pad(date.getHours())
+            + ':' + pad(date.getMinutes())
+            + ':' + pad(date.getSeconds())
+        );
+    };
+
+    const fromInputValue = value =>
+        new Date(value);
+
+    // 如果属性值不是 Date，先转成 Date
+    if (!(obj[prop] instanceof Date)) {
+        obj[prop] = new Date(obj[prop]);
+    }
+
+    // 临时存成字符串以便 dat.gui 渲染
+    const proxy = {value: toInputValue(obj[prop])};
+
+    const controller = gui.add(proxy, 'value').name(prop);
+
+    // 转换 input 类型
+    const input = controller.domElement.querySelector('input');
+    input.setAttribute('type', 'datetime-local');
+
+    // 当用户修改 input 时，更新原始对象为 Date
+    input.addEventListener('change', e => {
+        obj[prop] = fromInputValue(e.target.value);
+        console.log(`[dat.gui datetime] ${prop} =`, obj[prop]);
+    });
+
+    // 当外部代码修改 Date 时，刷新 dat.gui 控件
+    controller.onChange(val => {
+        obj[prop] = fromInputValue(val);
+    });
+
+    // 外部修改 obj[prop] → 反映到 dat.gui
+    if (listen) {
+        controller.listen();
+    }
+    controller.updateDisplay = function () {
+        proxy.value = toInputValue(obj[prop]);
+        input.value = proxy.value; // 更新 input 显示
+    };
+
+    return controller;
+}
+
 export const createEngineConfigs = (gui, engine) => {
     const requestRender = () => engine.requestRender();
     const rendering = engine.rendering;
@@ -52,6 +117,8 @@ export const createEngineConfigs = (gui, engine) => {
         THREE.ReinhardToneMapping,
         THREE.CineonToneMapping,
         THREE.ACESFilmicToneMapping,
+        THREE.AgXToneMapping,
+        THREE.NeutralToneMapping,
     ]).listen().onChange(v => {
         rendering.renderer.toneMapping = parseInt(v, 10);
     });
@@ -62,6 +129,18 @@ export const createEngineConfigs = (gui, engine) => {
     folderAnimation.add(rendering, 'enableAnimationLoop').onChange(requestRender);
     folderAnimation.add(rendering, 'animationLoopFrameTime', 16, 1000).onChange(requestRender);
 
+    const folderClock = folderRendering.addFolder('clock');
+    folderClock.add(engine.clock, 'tickMode', [0, 1, 2, 3]).onChange(v => {
+        engine.clock.tickMode = parseInt(v, 10);
+        requestRender();
+    });
+    addDateTimeController(folderClock, engine.clock, 'startTime');
+    addDateTimeController(folderClock, engine.clock, 'stopTime');
+    folderClock.add(engine.clock, 'speed').onChange(requestRender);
+    folderClock.add(engine.clock, 'timeZoneOffset', -12, 12).onChange(requestRender);
+    addDateTimeController(folderClock, engine.clock, 'currentTime');
+    addDateTimeController(folderClock, engine.clock, 'currentTime', true).name('displayTime');
+
     const folderFeatures = folderRendering.addFolder('features');
 
     const folderAntialias = folderFeatures.addFolder('antialias');
@@ -110,6 +189,7 @@ export const createEngineConfigs = (gui, engine) => {
 
     const folderMap = folderRendering.addFolder('map');
     const map = engine.map;
+    folderMap.add(map.map, 'fov', 0, 180).onChange(requestRender);
     if (map.map.isBlankMap) {
         folderMap.add(map.map, 'far').onChange(requestRender);
 
@@ -165,42 +245,31 @@ export const createSkyConfigs = (gui, engine) => {
     }
     const folderSky = gui.addFolder('sky');
     folderSky.add(sky, 'time', 0, 86400).onChange(requestRender);
-    folderSky.add(sky, 'timeAnimation').onChange(requestRender);
-    folderSky.add(sky, 'timeAnimationSpeed', 0.1, 20).onChange(requestRender);
     folderSky.add(sky, 'sunLightIntensity', 0.0, 10.0, 0.1).listen().onChange(requestRender);
     folderSky.add(sky, 'skyLightIntensity', 0.0, 10.0).listen().onChange(requestRender);
     folderSky.add(sky, 'envLightIntensity').onChange(requestRender);
     folderSky.add(sky, 'affectWorld').onChange(requestRender);
 
+    if (sky instanceof mapvthree.PhysicalSky || sky instanceof mapvthree.DynamicSky) {
+        folderSky.add(sky, 'enableAtmospherePass').onChange(requestRender);
+        folderSky.add(sky, 'enableCloudsPass').onChange(requestRender);
+        folderSky.add(sky, 'cloudsCoverage', 0, 1, 0.01).onChange(requestRender);
+        folderSky.add(sky, 'cloudsSpeed', 0, 100., 0.1).onChange(requestRender);
+        folderSky.add(sky, 'cloudsBaseHeight', 0, 10000, 100).onChange(requestRender);
+    }
     if (sky instanceof mapvthree.DynamicSky) {
         // folderSky.add(sky, 'shaderIndex', [
         //     0, 1, 2, 3,
         // ]).onChange(requestRender);
         folderSky.add(sky, 'clipUnderground').onChange(requestRender);
-        // folderSky.addColor(config, 'groundColor').onChange(value => {
-        //     sky.groundColor = new THREE.Color(value);
-        //     requestRender();
-        // });
-        // folderSky.add(sky, 'cloudIntensity', 0, 1.0).onChange(requestRender);
-        // folderSky.add(sky, 'rayleighFactor').onChange(requestRender);
-        // folderSky.add(sky, 'mieFactor').onChange(requestRender);
-        // folderSky.add(sky, 'miePhase').onChange(requestRender);
-        // folderSky.add(sky, 'dynamicCloud').onChange(requestRender);
-        folderSky.add(sky, 'enablePostPass').onChange(requestRender);
-        folderSky.add(sky, 'enableVolumetricClouds').onChange(requestRender);
-        folderSky.add(sky, 'useVolumetricClouds').onChange(requestRender);
-        folderSky.add(sky, 'cloudCoverage', 0, 1, 0.01).onChange(requestRender);
         folderSky.add(sky, 'cloudDensity', 0, 1).onChange(requestRender);
-        folderSky.add(sky, 'cloudSpeed', 0, 100., 0.1).onChange(requestRender);
         folderSky.add(sky, 'cloudShapeBaseScale').onChange(requestRender);
         folderSky.add(sky, 'cloudShapeDetailScale').onChange(requestRender);
         folderSky.add(sky, 'cloudMarchSteps').onChange(requestRender);
         folderSky.add(sky, 'cloudSelfShadowSteps').onChange(requestRender);
-        // folderSky.add(sky, 'envMapType', [
-        //     1,
-        //     2,
-        // ]).onChange(requestRender);
-        // folderSky.add(sky, 'updateStaticEnvMap').onChange(requestRender);
+    }
+    else if (sky instanceof mapvthree.PhysicalSky) {
+        folderSky.add(sky, 'enableCloudsShadow').onChange(requestRender);
     }
 };
 
@@ -219,16 +288,18 @@ export const createWeatherConfigs = (gui, engine) => {
         'overcast',
         'foggy',
         'rainy',
+        'stormy',
         'snowy',
+        'thunderstorm',
     ]).onChange(requestRender);
 
-    if (weather._sky.isDynamicSky || weather._sky.isDynamicSky) {
-        folderWeather.add(weather, 'cloudIntensity', 0.0, 3.0).listen().onChange(requestRender);
-        folderWeather.add(weather, 'mixGrayFactor', 0.0, 1.0).listen().onChange(requestRender);
-        // folderWeather.add(weather, 'sunIntensityScale', 0.0, 2.0).listen().onChange(requestRender);
-        folderWeather.add(weather, 'skyLightIntensity', 0.0, 2.0).listen().onChange(requestRender);
-        folderWeather.add(weather, 'coverageIntensity', 0.0, 2.0).listen().onChange(requestRender);
-    }
+    // if (weather._sky.isDynamicSky || weather._sky.isDynamicSky) {
+    //     folderWeather.add(weather, 'cloudIntensity', 0.0, 3.0).listen().onChange(requestRender);
+    //     folderWeather.add(weather, 'mixGrayFactor', 0.0, 1.0).listen().onChange(requestRender);
+    //     // folderWeather.add(weather, 'sunIntensityScale', 0.0, 2.0).listen().onChange(requestRender);
+    //     folderWeather.add(weather, 'skyLightIntensity', 0.0, 2.0).listen().onChange(requestRender);
+    //     folderWeather.add(weather, 'coverageIntensity', 0.0, 2.0).listen().onChange(requestRender);
+    // }
 };
 
 export const createCesium3DTilesConfigs = (gui, engine, tiles, name) => {
@@ -519,7 +590,6 @@ export const createMapViewConfigs = (gui, engine, mapView) => {
         if (surface.isMapVectorSurface) {
             const vectorSurface = surface;
             const vectorSurfaceFolder = surfaceFolder.addFolder('VectorSurface');
-
         }
         else if (surface.isMapRasterSurface) {
             const rasterSurface = surface;