Hello World

ESM

import * as THREE from 'three';
import * as maptalks from 'maptalks';
import {
    ThreeLayer
} from 'maptalks.three';

const map = new maptalks.Map('map', {
    center: [19.06325670775459, 42.16842479475318],
    zoom: 3,
    pitch: 60,
    // bearing: 180,
});

const threeLayer = new ThreeLayer('t');
threeLayer.prepareToDraw = function(gl, scene, camera) {
    const light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, -10, -10).normalize();
    scene.add(light);
    //...
};

threeLayer.addTo(map);

Use maptalks-gl

import * as THREE from 'three';
import * as maptalks from 'maptalks-gl';
import {
    ThreeLayer
} from 'maptalks.three';

const map = new maptalks.Map('map', {
    center: [19.06325670775459, 42.16842479475318],
    zoom: 3,
    pitch: 60,
    // bearing: 180,
});

const threeLayer = new ThreeLayer('t');
threeLayer.prepareToDraw = function(gl, scene, camera) {
    const light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, -10, -10).normalize();
    scene.add(light);
    //...
};

const sceneConfig = {
    postProcess: {
        enable: true,
        antialias: {
            enable: true
        }
    }
};
const groupLayer = new maptalks.GroupGLLayer('group', [threeLayer], {
    sceneConfig
});
groupLayer.addTo(map);

UMD

<script type="text/javascript" src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.three/dist/maptalks.three.js"></script>
<script>
    const map = new maptalks.Map('map', {
        center: [19.06325670775459, 42.16842479475318],
        zoom: 3,
        pitch: 60,
        // bearing: 180,
    });

    const threeLayer = new maptalks.ThreeLayer('t');
    threeLayer.prepareToDraw = function(gl, scene, camera) {
        const light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, -10, -10).normalize();
        scene.add(light);
        //...
    };

    threeLayer.addTo(map);
</script>