Визуализируйте большой экран — используйте threejs для создания 3D-карты Китая.

Если вы не хотите видеть сложные шаги, вы можете перейти прямоgithubскачатьпроект, если можно заглянитеstarХа-ха

Этот проект используетvue-cliСоздан, но не влияет на использование, основной чертеж инкапсулирован в класс

1. Используйте geoJson для рисования 3D-карт

1.1 Создание связанных сцен

// 创建webGL渲染器
this.renderer = new THREE.WebGLRenderer( { antialias: true,alpha: true} );
this.renderer.shadowMap.enabled = true; // 开启阴影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.toneMappingExposure = 1.25;   

// 根据自己的需要调整颜色模式
// this.renderer.outputEncoding = THREE.sRGBEncoding;  

this.renderer.outputEncoding = THREE.sHSVEncoding;
this.renderer.setPixelRatio( window.devicePixelRatio );
// 清除背景色，透明背景
this.renderer.setClearColor(0xffffff, 0);
this.renderer.setSize(this.width, this.height);

// 场景
this.scene = new THREE.Scene();
this.scene.background = null
// 相机 透视相机
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 5000);
this.camera.position.set(0, -40, 70);
this.camera.lookAt(0, 0, 0);

1.2 Согласно отображению json

использоватьTHREE.ShapeНарисуйте данные края плоскости карты, затем используйтеTHREE.ExtrudeGeometryПотяните лицо вверх в 3D-модель, и таким же образом можно сделать 3D-круговую диаграмму.

let jsonData = require('./json/china.json')
this.initMap(jsonData);

// initMap 方法主要部分
initMap(chinaJson) {
    /* ...省略
        ...
    */
    chinaJson.features.forEach((elem, index) => {
        // 定一个省份3D对象
        const province = new THREE.Object3D();
        // 每个的 坐标 数组
        const { coordinates } = elem.geometry;
        const color = COLOR_ARR[index % COLOR_ARR.length]
        // 循环坐标数组
        coordinates.forEach(multiPolygon => {
            
            multiPolygon.forEach((polygon) => {
                const shape = new THREE.Shape();
                
                for (let i = 0; i < polygon.length; i++) {
                    let [x, y] = projection(polygon[i]);
                    
                    if (i === 0) {
                        shape.moveTo(x, -y);
                    }
                    shape.lineTo(x, -y);
                }
    
                const extrudeSettings = {
                    depth: 4,
                    bevelEnabled: true,
                    bevelSegments: 1,
                    bevelThickness: 0.2
                };
    
                const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
               
                // 平面部分材质
                const material = new THREE.MeshStandardMaterial( {
                    metalness: 1,
                    color: color,
                    
                } );
                // 拉高部分材质
                const material1 = new THREE.MeshStandardMaterial( {
                    metalness: 1,
                    roughness: 1,
                    color: color,
                    
                } );

                const mesh = new THREE.Mesh(geometry, [
                    material,
                    material1
                ]);
                // 设置高度将省区分开来
                if (index % 2 === 0) {
                    mesh.scale.set(1, 1, 1.2);
                }
                // 给mesh开启阴影
                mesh.castShadow = true
                mesh.receiveShadow = true
                mesh._color = color
                province.add(mesh);

            })
    
        })
    
        _this.map.add(province);
        
    })
}

geoJsonКоординаты необходимо преобразовать в плоские координаты с помощью преобразования проекции Меркатора, которое необходимо использовать здесь.d3

// 墨卡托投影转换
const projection = d3.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);

2. Увеличьте свет

Мы включаем все виды света, окружающий свет, полусферический свет, точечный свет, параллельный свет. Возьмите в качестве примера параллельный свет, увеличьте проекцию и отрегулируйте разрешение проекции, чтобы избежать мозаики в проекции.

const light = new THREE.DirectionalLight( 0xffffff, 0.5 ); 
light.position.set( 20, -50, 20 );

light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

this.scene.add(light);

castShadow = trueУказывает, что проекция включена

3. Увеличьте размытие теней

Тени по умолчанию не имеют эффекта размытия и выглядят как освещение от ламп накаливания без мягкости. Используйте официальный пример изcsmчтобы добавить размытие теней

import { CSM } from 'three/examples/jsm/csm/CSM.js';

this.csm = new CSM( {
    maxFar: params.far,
    cascades: 4,
    mode: params.mode,
    parent: this.scene,
    shadowMapSize: 1024,
    lightDirection: new THREE.Vector3( params.lightX, params.lightY, params.lightZ ).normalize(),
    camera: this.camera
} );

4. Добавьте события мыши

существует3dВ космосе мышиные события в основном получают положение мыши через лучи.Можно представить, что мышь излучает луч, и первый облучаемый объект — это положение мыши. используется в это времяthreejsизRaycaster,пройти черезRaycasterДобавлен эффект выделения мышью и эффект плавающего отображения жителей провинции в соответствующей провинции.

this.raycaster = new THREE.Raycaster();
// 传入需要检测的对象 group，group下的所有对象都会被检测到，如果被射线照到，则intersects有值，表示鼠标当前在这些物体上   
const intersects = this.raycaster.intersectObject( this.group, true );
// 代码太多就不贴了，见 GitHub源码

5. Рендеринг

threejsРендеринг обычно вызывает роднойrequestAnimationFrame, главное позвонитьrendererизrenderМетод, конечно, поскольку мы сделали размытие теней, есть еще кое-что, что нужно сделать:

this.camera.updateMatrixWorld();
this.csm.update();
this.renderer.render(this.scene, this.camera);

6. Эффект анимации

Если на карте есть анимационные эффекты, вы можете использоватьTWEEN.js,гитхаб-адрес, такие как анимация появления метки карты:

наконец служитьадрес проекта