A maptalks Layer to render with THREE.js.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo fix obj.html Oct 20, 2017
dist 0.5.0 Dec 17, 2017
test initial commit Feb 3, 2017
.babelrc initial commit Feb 3, 2017
.editorconfig initial commit Feb 3, 2017
.eslintrc initial commit Feb 3, 2017
.gitignore initial commit Feb 3, 2017
.npmignore initial commit Feb 3, 2017
LICENSE initial commit Feb 3, 2017
README.md Update README.md Jul 24, 2018
circle.yml initial commit Feb 3, 2017
gulpfile.js update dep Sep 6, 2017
index.js add height in toExtrudeMesh Jan 31, 2018
karma.config.js initial commit Feb 3, 2017
package.json add npm build Jan 19, 2018

README.md

maptalks.three

CircleCI NPM Version

A maptalks Layer to render with THREE.js

screenshot

Examples

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

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.84.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.PointLight(0xffffff, 0.8);
    camera.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 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) {
    var light = new THREE.PointLight(0xffffff, 0.8);
    //...
};

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
$ gulp watch
  • Tests
$ npm test
  • Watch source changes and run tests repeatedly
$ gulp tdd
  • Package and generate minified bundles to dist directory
$ gulp minify
  • Lint
$ npm run lint