harp.gl-base

.创建一个 homeMapRender.ts 模块
import HarpGLBase, { harpGlUtils } from "harp.gl-base";
import { AmbientLight, BoxGeometry, DirectionalLight, Mesh, MeshLambertMaterial } from "three";
import { Text3D, Transition } from "three-base";
import { degToRad } from "three/src/math/MathUtils";

/**
 * @class HomeRender
 */
// 做项目找我 qq:389652405
class HomeMapRender extends HarpGLBase {

    constructor() {
        super();
    }

    init() {
        super.init();

        // 不自动渲染
        this.autoRender = false;
        this.needRender = true;

        this.resetLookAt({
            heading: 0,
            latitude: 26.06914,
            longitude: 119.30712,
            tilt: 43.801,
            zoomLevel: 17.9
        });

    }

    // 环境光
    ambientLight = (() => {
        const ambientLight = new AmbientLight("#fff", 0.5);
        this.scene.add(ambientLight);
        return ambientLight;
    })();

    // 方向光
    directionalLight = (() => {
        const directionalLight = new DirectionalLight("#fff", 1);
        directionalLight.position.set(-10, 10, 5);
        directionalLight.target.position.set(0, 0, 0);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.set(1024, 1024);
        this.scene.add(directionalLight);
        return directionalLight;
    })();

    box = (() => {
        const geometry = new BoxGeometry(20, 20, 20);
        geometry.translate(0, 10, 0);
        const matearil = new MeshLambertMaterial({ color: 0xfff });
        const mesh = new Mesh(geometry, matearil);

        const transition = new Transition({ rotationY: 0 });

        // 动画对象播放回调
        transition.onChange(({ rotationY }) => {
            mesh.rotation.y = rotationY;
            this.needRender = true;
        });

        // 经纬度转三维坐标
        harpGlUtils.latlonToPosition({ latitude: 26.06883632316332, longitude: 119.30586242169313 }, mesh.position);

        mesh.userData = { cursor: "pointer", enableEvent: true };

        // 点击设置动画对象的值
        mesh.addEventListener("click", e => { });

        mesh.addEventListener("dbclick", e => {
        });

        mesh.addEventListener("leftclick", e => {
            transition.set({ rotationY: Math.random() * 5 });
        });
        mesh.addEventListener("rightclick", e => {
        });
        mesh.addEventListener("mouseenter", e => { });
        mesh.addEventListener("mouseleave", e => { });
        mesh.addEventListener("mousemove", e => { });
        mesh.addEventListener("mousedown", e => { });
        mesh.addEventListener("mouseup", e => { });

        this.scene.add(mesh);
        return mesh;
    })();

    // 3D文字
    text3D = (() => {
        const text3D = new Text3D("GIS");
        text3D.setText({

        });
        text3D.scale.set(100, 100, 100);
        text3D.rotateX(degToRad(-90));

        // 经纬度转三维坐标
        harpGlUtils.latlonToPosition({ latitude: 26.0696, longitude: 119.30685 }, text3D.position);

        text3D.position.setY(1);
        this.scene.add(text3D);
        return text3D;
    })();

}


const homeMapRender = window.homeMapRender = new HomeMapRender();

export default homeMapRender;


2.添加到div里面
import homeMapRender form "./homeMapRender.ts";
homeMapRender.setContainer( document.getElementById("div") );

演示地址: https://drm.gitee.io/vite_react_mobx_threebase/

代码: https://gitee.com/drm/vite_react_mobx_threebase