Threejs 地图插件

最新推荐文章于 2024-06-20 16:58:58 发布

苹果园dog

最新推荐文章于 2024-06-20 16:58:58 发布

阅读量546

点赞数 8

分类专栏： GIS WebGL Cesium 文章标签： Cesium

本文链接：https://blog.csdn.net/u014556081/article/details/135862564

版权

Cesium 同时被 3 个专栏收录

48 篇文章 44 订阅

订阅专栏

GIS

20 篇文章 1 订阅

订阅专栏

WebGL

20 篇文章 7 订阅

订阅专栏

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// 初始化地图
const mapViewer = new MapViewer({
    target: "container",
    center: mapCenter,
    camera: {
        near: 0.001
    },
    imageryTileProivder: new TdtImageryTileProvider()
});

//测试threejs场景
class TestData {
    public static init(mapViewer: MapViewer) {
        this.addAxesHelper(mapViewer);
        this.addLight(mapViewer);
    }

    private static addAxesHelper(mapViewer: MapViewer) {
        const axesHelper = new AxesHelper(50000000);
        mapViewer.renderer.scene.add(axesHelper);
    }

    private static addLight(mapViewer: MapViewer) {
        let scene = mapViewer.renderer.scene;
        let renderer = mapViewer.renderer.renderer;
        renderer.shadowMap.enabled = true;
        const gui = new GUI();
        renderer.physicallyCorrectLights = true;
        // 做一个球体
        const SphereGeometry = new THREE.SphereGeometry(10, 30, 30);
        // 材质
        const material = new THREE.MeshStandardMaterial();
        const sphere = new THREE.Mesh(SphereGeometry, material);
        sphere.position.set(0, 5, 0);
        // 投射阴影
        sphere.castShadow = true;
        scene.add(sphere);

        // 创建平面
        const planeGeometry = new THREE.PlaneGeometry(500, 500);
        const plane = new THREE.Mesh(planeGeometry, material);
        plane.position.set(0, -1, 0);
        plane.rotation.x = -Math.PI / 2;
        // 接收阴影
        plane.receiveShadow = true;
        scene.add(plane);

        // 灯光
        // 环境光
        const light = new THREE.AmbientLight(0xffffff);

        // 聚光源
        const spotLight = new THREE.SpotLight(0xffffff, 2);
        spotLight.position.set(50, 50, 50);
        spotLight.intensity = 2;
        // 设置直线光源产生阴影
        spotLight.castShadow = true;
        //设置阴影贴图模糊度
        spotLight.shadow.radius = 20;
        //设置阴影贴图的分辨率(让它变得更加细致)
        spotLight.shadow.mapSize.set(4096, 4096);
        //设置打在小球上
        spotLight.target = sphere;
        //聚光灯的角度
        spotLight.angle = Math.PI / 6;
        //聚光灯的衰减
        spotLight.distance = 0;
        //聚光灯的半影的衰减
        spotLight.penumbra = 0.5;
        //聚光灯 沿着光照距离的衰减
        spotLight.decay = 0;
        // 透视相机的属性设置(一般不用更改)

        scene.add(spotLight);
        scene.add(light);
        gui.add(sphere.position, "x").min(-500).max(500).step(0.1).name("球体x轴位置");
        gui
            .add(spotLight, "angle")
            .min(0)
            .max(Math.PI / 2)
            .step(0.01)
            .name("聚光灯角度");
        gui.add(spotLight, "distance").min(0).max(100).step(1).name("聚光灯距离");
        gui.add(spotLight, "penumbra").min(0).max(10).step(0.1).name("聚光灯半影");
        gui.add(spotLight, "decay").min(0).max(1).step(0.1).name("聚光灯衰减");
    }
}

TestData.init(mapViewer);