maptalks.three

A maptalks Layer to render with three.js

<a href="http://maptalks.org/maptalks.three/demo/bloom.html" title="maptalks.three Demo" target="_blank"><video width="820" src = "https://user-images.githubusercontent.com/25998927/149662311-4cb06c54-49ab-44b2-b019-518c0228508c.mp4" autoplay loop hspace="10"></video></a>

Examples

• Demos.

Install

• Install with npm: npm install maptalks.three.
• Download from dist directory.
• Use unpkg CDN: https://unpkg.com/maptalks.three/dist/maptalks.three.min.js

Incompatible changes

• three.js >=128 the default umd package is ES6
• Starting from version 0.16.0, the default umd package is ES6,To fit the new version of three.js about three umd package change
• If your running environment does not support ES6, we also provide Es5 version maptalks.three.es5.js,This requires the version of three.js < = 127,

Migration from <=v0.5.x to v0.6.0

• Re-implementated locateCamera, sync with map's projMatrix and viewMatrix.
• Model's z position is reversed from v0.5.0. So if you have models rendered with v0.5.x, rotation needs to be updated.
• For THREE <= 0.94, material's side need to set to THREE.BackSide or THREE.DoubleSide to render correctly
  • THREE >= 0.95 doesn't need, maybe due to #14379
• Add support for THREE >= 0.93
• Add support for GroupGLLayer

Usage

As a plugin, maptalks.three must be loaded after maptalks.js and three.js in browsers.

<script type="text/javascript" src="https://unpkg.com/three@0.138.0/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>
var threeLayer = new maptalks.ThreeLayer('t');
threeLayer.prepareToDraw = function (gl, scene, camera) {
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, -10, -10).normalize();
    scene.add(light);

    var material = new THREE.MeshPhongMaterial();
    countries.features.forEach(function (g) {
        //g is geojson Feature
        var num = g.properties.population;

        var extrudePolygon=threeLayer.toExtrudePolygon(g, { height: num }, material);
        threeLayer.addMesh(extrudePolygon)
    });
};

map.addLayer(threeLayer);
</script>

With ES Modules:

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

const map = new maptalks.Map('map', { /* options */ });

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);

Supported Browsers

IE 11, Chrome, Firefox, other modern and mobile browsers that support WebGL;

Contributing

We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.

Develop

The only source file is index.js.

It is written in ES6, transpiled by babel and tested with mocha and expect.js.

Scripts

• Install dependencies

$ npm install

• Watch source changes and generate runnable bundle repeatedly

$ npm run dev

• Package and generate minified bundles to dist directory

$ npm run build

• Lint

$ npm run lint

Publication

npm version ${version}
npm publish
npm push master ${version}