cesium-study
/
72.点击glTF-和Primitive相关.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="cesiumContainer"></div>
    <div id='tool' style="float:left;position:absolute;left:10px;top:10px;"></div>
    <script src='./js/baiduMap.js'> </script>
    <script src='./js/CreateTestBtn.js'> </script>
    <script>


        var imageryProvider = new BaiduImageryProvider({
            url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
        });
        //加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
        var imageryProvider1 = new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/png",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        });

        viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: imageryProvider
        });
        //添加文字
        viewer.entities.add({
            name: '文字',
            position: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571),
            label: {
                text: '看这里',
                font: '19px Helvetica',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                fillColor: Cesium.Color.AZURE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 3,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            }
        });

        //加载ghTF

        let scene = viewer.scene;
        //位置
        let position = Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10);
        let hpRoll = new Cesium.HeadingPitchRoll();
        let fixedFrameTransforms = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
        //添加模型


        ///////////////

        // viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {

        //     var pickedFeature = viewer.scene.pick(movement.endPosition);
        //     //alert(!Cesium.defined(pickedFeature));
        //     if (!Cesium.defined(pickedFeature)) {
        //         //如果

        //         return;
        //     }

        //     var name = pickedFeature.getProperty("name");
        //     if (!Cesium.defined(name)) {
        //         name = pickedFeature.getProperty("id");
        //     }
        //     console.log(name);
        // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


        /////////////////////////


        var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
        // An entity object which will hold info about the currently selected feature for infobox display
        //一个实体对象，它将保存有关当前所选功能的信息以供信息框显示
        var selectedEntity = new Cesium.Entity();


        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {


            // Pick a new feature
            var pickedFeature = viewer.scene.pick(movement.position);
            console.log(pickedFeature);


            if (!Cesium.defined(pickedFeature)) {
                clickHandler(movement);
                return;
            }


            // pickedFeature.show = false;
            // // Set feature infobox description
            // var featureName = pickedFeature.getProperty("name");
            // selectedEntity.name = featureName;
            // selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
            // viewer.selectedEntity = selectedEntity;
            // pickedFeature.show = false;
            // console.log(featureName);


        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


        let model = Cesium.Model.fromGltf({
            url: '测试辅助文件/glTF/层级测试/test.gltf',
            modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransforms),
            minimumPixelSize: 0,
            scale: 1.0,
            //debugShowBoundingVolume: true//调试模式下绘制边界球体
        });

        let carPrimitive;

        alert("按照按钮的顺序去点击,也可以直接点击模型");

        CreateTestBtn("添加glTF", () => {
            carPrimitive = scene.primitives.add(model);
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 200),
                duration: 1,
            });

        });

        CreateTestBtn("根据自带的_boundingSphere-定位", () => {
            //只是局部坐标  + model.center
            var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10), model.boundingSphere.radius);
            viewer.camera.flyToBoundingSphere(boundingSphere, { duration: 2 });

        });

        CreateTestBtn("输出model和Primitive", () => {
            console.log(model);
            console.log(carPrimitive);
            alert('model和Primitive几乎就是同一个东西');
        });


        CreateTestBtn("隐藏model中的box001", () => {
            // model.getMesh("Box001").show = !model.getMesh("Box001").show;
            model.getNode("Box001").show = !model.getNode("Box001").show;
            alert('子物体一起隐藏了，注意其他方法');
        });


        CreateTestBtn("隐藏model中的box006", () => {
            // model.getMesh("Box001").show = !model.getMesh("Box001").show;
            model.getNode("Box006").show = !model.getNode("Box006").show;
            alert('子物体一起隐藏了，注意其他方法');
        });

        CreateTestBtn("读取box006的材质", () => {
            // model.getMesh("Box001").show = !model.getMesh("Box001").show;
            console.log(model.getMesh("Box006").materials[0]);
        });

        CreateTestBtn("修改box006的材质", () => {
            // model.getMesh("Box001").show = !model.getMesh("Box001").show;
            model.getMesh("Box006").materials[0] = new Cesium.ImageMaterialProperty({
                image: './测试辅助文件/Image/y.jpg',
                color: Cesium.Color.BLUE,
                repeat: new Cesium.Cartesian2(4, 4)
            });
            alert('失败');
        });

        CreateTestBtn("读取model的node层级", () => {
            // model.getMesh("Box001").show = !model.getMesh("Box001").show;
            alert('原来的程序只有根据名称来获取node，我也没又找到node的层级关系');

            console.log(model.gltf.nodes);
            console.log(carPrimitive.gltf.nodes);

            model.getNode(model.gltf.nodes[7].name).show = !model.getNode(model.gltf.nodes[7].name).show;

        });

        CreateTestBtn("修改子物体的一个颜色", () => {
            // model.getMesh("Box001").show = !model.getMesh("Box001").show;


            model.getNode(model.gltf.nodes[7].name).color =  Cesium.Color.GREEN;

        });

    </script>
</body>

</html>