A maptalks Layer to render with THREE.js.
npm install maptalks.threenpm 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.
`html
`
With ES Modules:
`javascript
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.
$3
* Install dependencies
`shell
$ npm install
`
* Watch source changes and generate runnable bundle repeatedly
`shell
$ npm run dev
`
* Package and generate minified bundles to dist directory
`shell
$ npm run build
`
* Lint
`shell
$ npm run lint
`
Publication
`shell
npm version ${version}
npm publish
npm push master ${version}
``