mirror of https://gitee.com/antv-l7/antv-l7
74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import { Scene } from '@antv/l7';
|
|
import { Mapbox } from '@antv/l7-maps';
|
|
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
|
|
import * as THREE from 'three';
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
|
|
|
const scene = new Scene({
|
|
id: 'map',
|
|
map: new Mapbox({
|
|
center: [ 121.4, 31.258134 ],
|
|
pitch: 45,
|
|
rotation: 30,
|
|
zoom: 15
|
|
})
|
|
});
|
|
|
|
scene.on('loaded', () => {
|
|
scene.registerRenderService(ThreeRender);
|
|
|
|
const threeJSLayer = new ThreeLayer({
|
|
enableMultiPassRenderer: false,
|
|
onAddMeshes: (threeScene, layer) => {
|
|
threeScene.add(new THREE.AmbientLight(0xffffff));
|
|
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
|
|
sunlight.position.set(0, 80000000, 100000000);
|
|
sunlight.matrixWorldNeedsUpdate = true;
|
|
threeScene.add(sunlight);
|
|
// 使用 Three.js glTFLoader 加载模型
|
|
|
|
const loader = new GLTFLoader();
|
|
loader.load(
|
|
'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
|
|
gltf => {
|
|
// 根据 GeoJSON 数据放置模型
|
|
layer.getSource().data.dataArray.forEach(() => {
|
|
const gltfScene = gltf.scene;
|
|
|
|
layer.adjustMeshToMap(gltfScene);
|
|
layer.setMeshScale(gltfScene, 10, 10, 10);
|
|
|
|
const animations = gltf.animations;
|
|
if (animations && animations.length) {
|
|
const mixer = new THREE.AnimationMixer(gltfScene);
|
|
const animation = animations[2];
|
|
const action = mixer.clipAction(animation);
|
|
action.play();
|
|
layer.addAnimateMixer(mixer);
|
|
}
|
|
// 向场景中添加模型
|
|
threeScene.add(gltfScene);
|
|
});
|
|
// 重绘图层
|
|
layer.render();
|
|
}
|
|
);
|
|
}
|
|
})
|
|
.source({
|
|
type: 'FeatureCollection',
|
|
features: [
|
|
{
|
|
type: 'Feature',
|
|
properties: {},
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [ 121.4, 31.258134 ]
|
|
}
|
|
}
|
|
]
|
|
})
|
|
.animate(true);
|
|
scene.addLayer(threeJSLayer);
|
|
});
|