cesium——加载3DTiles，模型的选中，高亮效果_csium鼠标挪动,模型cesium3dtileset

作者：AllinToyou | 2024-02-17 03:45:06

踩

csium鼠标挪动,模型cesium3dtileset

3DTiles是一种用于组织和传输大规模地理数据的规范，旨在提供一种高效、可扩展的方式来加载和显示复杂的3D模型。它革新了地理数据可视化领域，为创建逼真的三维地图提供了新的可能性。

3DTiles采用了一种层次化的数据结构，将地理信息按照空间范围划分成小块，类似于3D瓦片。每个瓦片包含地理实体的几何形状、纹理贴图和层次结构信息。这种切片和分层的方式使得数据可以根据需要按需加载，从而降低了网络传输和计算资源的需求。

使用3DTiles，开发人员可以加载和呈现各种地理数据，如建筑物、地形、植被和其他点云数据等。它为基于Web的GIS应用提供了更好的性能和交互体验。用户可以在浏览器中平滑地导航和浏览模型，实时更改视图和展示参数。

此外，3DTiles的规范性设计使得它可以与其他GIS和地理数据标准（如地理坐标系、投影等）无缝集成。它的开放性和普及性使得很多GIS软件和服务已经支持3DTiles标准，从而为用户和开发人员提供了丰富的工具和资源。

总之，3DTiles为地理数据的可视化和交互提供了一种全新的方式。其中，加载3DTiles模型并实现选中和高亮效果是常见的需求之一。

因此，本文将介绍如何实现模型的选中和高亮效果。我们将详细讨论Cesium中的picking机制，引导读者根据用户的鼠标点击或触摸事件来选中模型。进一步，我们将讨论如何改变选中模型的外观，例如更改颜色、变更材质等，从而实现高亮效果。

如代码所示，主要通过修改片元着色器或color属性，实现模型的左键选中，右键取消效果，移入高亮效果；


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3D Tiles</title>
    <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>
 
<body>
    <div id="cesiumContainer"></div>
    <script>
        function onload(Cesium) {
            console.log(Cesium.Ellipsoid.WGS84)
            var obj = [6378137.0, 6378137.0, 6356752.3142451793];
            Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));
            var viewer = new Cesium.Viewer('cesiumContainer');
            const options = {
                skipLevelOfDetail: true,
                shadows: Cesium.ShadowMode.CAST_ONLY,
                baseScreenSpaceError: 1024,
                skipScreenSpaceErrorFactor: 16,
                skipLevels: 1,
                immediatelyLoadDesiredLevelOfDetail: false,
                loadSiblings: false,
                cullWithChildrenBounds: true,
                dynamicScreenSpaceError: true,
                dynamicScreenSpaceErrorHeightFalloff: 0.5,
                url: './SampleData/line/tileset.json'
            }
            const tileset = new Cesium.Cesium3DTileset(options)
            viewer.terrainProvider.visible = false;
            var ts = viewer.scene.primitives.add(tileset);
            console.log("ts", ts)
            ts.readyPromise.then(function () {
                var boundingSphere = ts.boundingSphere;
                viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
                viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            }).otherwise(function (error) {
                throw (error);
            });
            var screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            let pickedObjectArr = [], shader = null
            screenSpaceEventHandler.setInputAction(function (e) {
                let pickedObject = viewer.scene.pick(e.position);
                if (pickedObject && pickedObject._content && pickedObject._content._features && pickedObject._content._features.length > 0) {
                    pickedObjectArr.push(pickedObject)
                    let feature = pickedObject._content._features[0]
                    const _model = feature.content._model
                    _model._shouldRegenerateShaders = true
                    console.log(_model._sourcePrograms)
                    console.log(_model._rendererResources.sourceShaders)
                    shader = _model._rendererResources.sourceShaders[1]
                    _model._rendererResources.sourceShaders[1] = _model._rendererResources.sourceShaders[1].replace("gl_FragColor = vec4(color, 1.0);", "gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);");
                    setTimeout(() => {
                        _model._shouldRegenerateShaders = false
                    }, 1000)
                    console.log(_model._rendererResources.sourceShaders[1])
                }
 
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            screenSpaceEventHandler.setInputAction(function (e) {
                while (pickedObjectArr.length > 0) {
                    let element = pickedObjectArr.shift();
                    let feature = element._content._features[0]
                    const _model = feature.content._model
                    _model._shouldRegenerateShaders = true
                    console.log(_model._sourcePrograms)
                    console.log(_model._rendererResources.sourceShaders)
                    _model._rendererResources.sourceShaders[1] = shader
                    console.log(shader)
                }
 
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            let feature, _feature, tile
            const highlightColor = new Cesium.Color(1.0, 1.0, 0.0, 0.4);
            const oldColor = new Cesium.Color();
 
            screenSpaceEventHandler.setInputAction(function (e) {
                const picked = viewer.scene.pick(e.endPosition);
 
 
                if (picked instanceof Cesium.Cesium3DTileFeature) {
                    // Picked a feature
                    feature = picked;
                    if (feature === _feature && feature !== undefined) {
                        console.log("相同")
                        return
                    }
                    const currentFeature = _feature;
                    if (currentFeature && !currentFeature.content.isDestroyed()) {
                        currentFeature.color = oldColor;
                        // viewer.scene.requestRender();
                    }
                    tile = picked.content.tile;
                    Cesium.Color.clone(feature.color, oldColor);
 
                    feature.color = highlightColor;
                    // viewer.scene.requestRender();
                    _feature = feature;
                } else {
                    if (feature !== undefined && feature !== null) {
                        console.log("非模型，清除颜色")
                        feature.color = oldColor;
                        // viewer.scene.requestRender();
                        feature = null
                        _feature = null
                    }
                }
 
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            $('#loadingbar').remove();
        }
        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        }
    </script>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/99736