maptalks.three

A maptalks Layer to render with THREE.js

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.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.

API

API中文

`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

Publication

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

GISerGll/maptalks.three