Skip to content

transformControl在处理设置了带translateX的gltfMarker会编辑有问题,到处偏移 #2514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Libra-lsp opened this issue Mar 12, 2025 · 0 comments

Comments

@Libra-lsp
Copy link

测试代码如下:

<title>Document</title> <script src="https://maptalks.com/api/maptalks-gl.js"></script> <script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.draco/dist/transcoders.draco.js"></script> <script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.crn/dist/transcoders.crn.js"></script> <script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.ktx2/dist/transcoders.ktx2.js"></script> <style> html, body { margin: 0px; height: 100%; width: 100%; }
    #map {
        width: 100%;
        height: 100%;
    }
</style>
<script type="text/javascript"> const map = new maptalks.Map("map", { center: [117.30040888, 38.9938445], zoom: 20, pitch: 70, bearing: -8.699, maxZoom: 24, minZoom: 5, // zoomControl: true, lights: { directional: { direction: [0.5, 0, -1], color: [1, 1, 1] }, ambient: { resource: { url: { front: "/assets/images/hdr/front.jpg", back: "/assets/images/hdr/back.jpg", left: "/assets/images/hdr/left.jpg", right: "/assets/images/hdr/right.jpg", top: "/assets/images/hdr/top.jpg", bottom: "/assets/images/hdr/bottom.jpg" }, prefilterCubeSize: 1024, }, exposure: 1.798, hsv: [0, 0, -0.021], orientation: 0 } } });
    const sceneConfig = {
        environment: {
            enable: true, // 是否开启环境天空盒绘制
            mode: 1, // 天空盒模式: 0: 氛围模式, 1: 实景模式
            level: 2, // 实景模式下的模糊级别,0-3
            brightness: 1, // 天空盒的明亮度,-1 - 1, 默认为0
        },
        shadow: {
            type: "esm", // 阴影模式,固定为esm
            enable: true, // 是否开启
            quality: "high", // 阴影质量,可选的值:high, medium, low
            opacity: 0.8, // 阴影的透明度,0 - 1
            color: [0, 0, 0], // 阴影的颜色,归一化三位rgb颜色值
            blurOffset: 1, // 阴影模糊偏移量,值越高阴影越模糊
        },
        ground: {
            // 绘制地面,隐藏底图才会看到
            enable: true,
            // renderPlugin: {
            //   type: "fill",
            // },
            // symbol: {
            //   polygonFill: [
            //     0.803921568627451, 0.803921568627451, 0.803921568627451, 1,
            //   ],
            //   polygonOpacity: 1,
            //   polygonPatternFile: "/assets/images/grass1.jpg",
            // },
            renderPlugin: {
                type: "lit",
            },
            symbol: {
                // polygonFill: [0.54, 0.54, 0.54, 1],
                material: {
                    baseColorFactor: [0.13333333, 0.13333333, 0.13333333, 1],
                },
            },
        },
        weather: {
            enable: true,
            // fog: {
            //   enable: true,
            //   start: 3,
            //   end: 70,
            //   color: [0.9, 0.9, 0.9]
            // },
            // rain: {
            //   enable: true,
            //   windDirectionX: 0,
            //   windDirectionY: 0,
            //   rippleRadius: 11,
            //   rainWidth: 1,
            //   rainHeight: 1,
            //   speed: 1,
            //   density: 2000,
            //   rainTexture: "/resources/images/rain1.png"
            // }
        },
        postProcess: {
            enable: false, // 是否开启后处理
            antialias: {
                enable: true, // 是否开启FXAA后处理
                taa: true, // 是否开启taa后处理
            },
            ssr: {
                enable: true, // 是否开启屏幕空间反射
            },
            // ssao: {
            //   enable: true, // 是否开启屏幕空间环境光遮蔽
            //   bias: 0.03, // 阴影偏移值,越大,阴影就越清晰,0.05 - 1
            //   radius: 0.08, // 遮蔽半径,越大,阴影就越清晰, 0.05 - 1
            //   intensity: 1.5, // 强度因子, 0.1 - 5
            // },
            // sharpen: {
            //   enable: false, // 是否开启锐化
            //   factor: 0.2, // 强度因子,0 - 1
            // },
            bloom: {
                enable: true, // 是否开启泛光
                factor: 0.6, // 强度因子 0.1 - 5
                threshold: 0, // 最小阈值(亮度低于阈值的区域不发光) 0 - 1
                radius: 1, // 泛光半径 0.1 - 4
            },
            outline: {
                enable: true, // 是否开启高亮后处理
                // highlightFactor?: number,
                // outlineFactor?: number,
                // outlineWidth?: number,
                // outlineColor: [1, 0, 0, 1], // 高亮颜色
            },
        },
    };

    const groupLayer = new maptalks.GroupGLLayer('group', [], {
        sceneConfig
    }).addTo(map);

    map.on("click", (e) => {
        const identifiedData = groupLayer.identify(e.coordinate, {
            tolerance: 2
        });
        console.log(identifiedData);
    });

    const gltfLayer = new maptalks.GLTFLayer("gltf");
    groupLayer.addLayer(gltfLayer);

    const symbol = {
        url: "/assets/models/楼宇02/building.gltf",
        translationZ: 5,
        modelHeight: 10,
        shader: "pbr",
        uniforms: {
            // polygonFill: [1, 1, 1, 1],
            // metallicFactor: 0,
            // roughnessFactor: 0.4,
        }
    };
    const gltfMarker = new maptalks.GLTFMarker(map.getCenter(), {
        symbol,
    });
    gltfLayer.addGeometry(gltfMarker);

    const transformControl = new maptalks.TransformControl();
    transformControl.addTo(map);

    map.on("click", (e) => {
        const identifyData = e.coordinate ?
            groupLayer.identify(e.coordinate, {
                layers: [gltfLayer],
                orderByCamera: true,
            })[0] :
            groupLayer.identifyAtPoint(e.containerPoint, {
                layers: [gltfLayer],
                orderByCamera: true,
            })[0];
        const target = identifyData && identifyData.data;
        if (target) {
            transformControl.enable();
            transformControl.transform(target);
        } else {
            transformControl.disable();
        }
    });

</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant