Socket
Socket
Sign inDemoInstall

maptalks.three

Package Overview
Dependencies
2
Maintainers
2
Versions
87
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

maptalks.three

A maptalks Layer to render with THREE.js.


Version published
Weekly downloads
395
decreased by-52.35%
Maintainers
2
Install size
4.49 MB
Created
Weekly downloads
 

Readme

Source

maptalks.three

CircleCI NPM Version

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

API Reference

API

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}

FAQs

Last updated on 04 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc