wegiangb / maptalks.three

A maptalks Layer to render with THREE.js.

maptalks.three

A maptalks Layer to render with THREE.js

Examples

• Extrude Buildings.
• Load MTL Model.

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

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.97.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 me = this;
    countries.features.forEach(function (g) {
        var num = g.properties.population;
        var color = getColor(num);

        var m = new THREE.MeshPhongMaterial({color: color, opacity : 0.7});

        var mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), num / 4E2, m);
        if (Array.isArray(mesh)) {
            scene.add.apply(scene, mesh);
        } else {
            scene.add(mesh);
        }
    });
};

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;

API Reference

ThreeLayer is a subclass of maptalks.CanvasLayer and inherits all the methods of its parent.

Constructor

new maptalks.ThreeLayer(id, options)

• id String layer id
• options Object options
  • glOptions Object options when creating webgl context, null by default
  • doubleBuffer Boolean whether the layer canvas is painted with double buffer, true by default
  • Other options defined in maptalks.CanvasLayer

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