# threebox
A three.js plugin for Mapbox GL JS, using the custom layer feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.
## File
[Click here to view the document](https://github.com/peterqliu/threebox)
## optimization
More strict handwriting mode is adopted to solve the problem of compiling luixus
## It might help you
```
import mapboxgl from 'mapbox-gl'
import * as THREE from 'three'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader';
import {Threebox} from 'threebox-map';
/*Load gltfdraco model*/
let data = {
id: "",
url: '',
origin: []
};
let _this = this;
let gltfLoader = new GLTFLoader();
let dracoLoader = new DRACOLoader();
let tb, cube;
let layer = {
id: data.id,
type: 'custom',
onAdd: function (map, mbxContext) {
tb = new Threebox(
map,
mbxContext,
{defaultLights: true}
);
let pointLight = new THREE.PointLight('red', 1000, 5000);
tb.add(pointLight);
dracoLoader.setDecoderPath('static/draco/');
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load(data.url, (gltf => {
cube = tb.Object3D({obj: gltf.scene});
cube.set({rotation: {x: 90, y: -180, z: 0}});
cube.setCoords(data.origin);
tb.add(cube);
}));
},
render: function (gl, matrix) {
tb.update();
}
};
_this.map.on('style.load', function () {
_this.map.addLayer(layer, 'country-label');
});
```
threebox-map-master.zip （64个子文件） 
threebox-map-master 
.gitignore 25B package.json 904B main.js 108B package-lock.json 169KB src Utils ValueGenerator.js 481B Utils.js 7KB Threebox.js 5KB objects Object3D.js 415B customLines Wireframe.js 2KB LineMaterial.js 7KB LineSegmentsGeometry.js 5KB LineSegments2.js 2KB WireframeGeometry2.js 577B Line2.js 607B LineGeometry.js 2KB sphere.js 573B line.js 20KB loadObj.js 2KB loaders OBJLoader.js 25KB MTLLoader.js 13KB tube.js 5KB objects.js 4KB Camera CameraSync.js 4KB utils material.js 1KB validate.js 3KB constants.js 357B three.js 534KB Animation AnimationManager.js 8KB dist threebox.js 632KB .DS_Store 6KB CHANGELOG.md 780B
LICENSE.txt 1KB examples 
basic.html 2KB config_template.js 37B models Truck.obj 99KB Truck.mtl 1KB raycaster.html 4KB line.html 2KB tube.html 2KB Object3D.html 2KB mercator.html 3KB old orientation.html 4KB flocking.html 10KB basic.html 2KB logistics.html 3KB README.md 2KB tests unit material.test.js 2KB validate.test.js 2KB camera.test.js 41B utilities.test.js 7KB object.test.js 2KB threebox-tests.js 1KB threebox-tests.html 3KB threebox-tests-bundle.js 252KB docs SymbolLayer3D.md 7KB
gallery.jpg 207KB Threebox.md 12KB img 
features-3D-symbols.png 15KB features-3D-paths.png 14KB features-complex-buildings.png 16KB features-shaders.png 33KB features-point-clouds.png 40KB features-terrain.png 27KB exports.js 89B
评论1