p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: gaodemap2 对齐相机（视图、投影矩阵） - 尚未对齐模型矩阵

This commit is contained in:
2912401452 2021-09-17 17:19:48 +08:00
parent 0e9d92987c
commit 1a161121ff
5 changed files with 211 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/three/src/core/baseLayer.ts
View File

@ -29,6 +29,7 @@ export default class ThreeJSLayer
implements IThreeJSLayer {
public type: string = 'custom';
protected threeRenderService: IThreeRenderService;
// 构建 threejs 的 scene
private scene: Scene = new Scene();
private renderer: WebGLRenderer;
private animateMixer: AnimationMixer[] = [];
@ -67,16 +68,23 @@ export default class ThreeJSLayer
}
}
public renderModels() {
// 获取到 L7 的 gl
const gl = this.rendererService.getGLContext();
this.rendererService.setCustomLayerDefaults();
const cullFace =
this.mapService.constructor.name === 'AMapService' ? gl.BACK : gl.FRONT;
gl.cullFace(cullFace);
// threejs 的 renderer
const renderer = this.threeRenderService.renderer;
renderer.state.reset();
renderer.autoClear = false;
// 获取相机 （不同的地图获取对应的方式不同）
const camera = this.threeRenderService.getRenderCamera();
renderer.render(this.scene, camera);
this.rendererService.setBaseState();
this.animateMixer.forEach((mixer: AnimationMixer) => {
mixer.update(this.getTime());

62
packages/three/src/core/threeRenderService.ts
View File

@ -25,6 +25,7 @@ export class ThreeRenderService implements IThreeRenderService {
public renderer: WebGLRenderer;
public camera: Camera;
public center: IMercator;
public aspect: number;
private scene: ThreeScene;
// 初始状态相机变换矩阵
@ -37,6 +38,7 @@ export class ThreeRenderService implements IThreeRenderService {
private readonly mapService: IMapService;
public init() {
// 从 L7 的 renderer 中获取可视化层的 canvas/gl
const canvas = this.rendererService.getCanvas() as HTMLCanvasElement;
const gl = this.rendererService.getGLContext();
if (canvas && gl) {
@ -48,6 +50,8 @@ export class ThreeRenderService implements IThreeRenderService {
}
const { x, y, z } = this.center;
this.cameraTransform = new Matrix4().makeTranslation(x, y, z);
// 根据 L7 的 canvas/gl 构建 threejs 的 renderer
this.renderer = new WebGLRenderer({
canvas,
context: gl,
@ -61,12 +65,30 @@ export class ThreeRenderService implements IThreeRenderService {
// this.renderer.shadowMap.type = PCFSoftShadowMap;
this.scene = new ThreeScene();
this.camera = new PerspectiveCamera(45, 1, 1, 2000000);
this.aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
this.camera = new PerspectiveCamera(45, this.aspect, 1, 20000000);
}
public getRenderCamera(): Camera {
return this.mapService.constructor.name === 'AMapService'
? this.AMapCamera()
: this.mapboxCamera();
/**
* map version
* GAODE1.x
* GAODE2.x
* MAPBOX
*/
switch (this.mapService.version) {
case 'GAODE1.x':
return this.AMapCamera();
case 'GAODE2.x':
return this.AMap2Camera();
case 'MAPBOX':
return this.mapboxCamera();
default:
return this.AMapCamera();
}
// return this.mapService.constructor.name === 'AMapService'
// ? this.AMapCamera()
// : this.mapboxCamera();
}
private mapboxCamera(): Camera {
@ -109,4 +131,36 @@ export class ThreeRenderService implements IThreeRenderService {
camera.position.y += -mapCamera.position.y;
return camera;
}
private AMap2Camera(): Camera {
// @ts-ignore
const customCoords = this.mapService.map.customCoords;
customCoords.getCenter();
const camera = this.camera;
const {
near,
far,
fov,
up,
lookAt,
position,
} = customCoords.getCameraParams();
// @ts-ignore
camera.near = near;
// @ts-ignore
camera.far = far;
// @ts-ignore
camera.fov = fov;
// @ts-ignore
camera.position.set(...position);
// @ts-ignore
camera.up.set(...up);
// @ts-ignore
camera.lookAt(...lookAt);
// @ts-ignore
camera.updateProjectionMatrix();
return camera;
}
}

143
stories/3D_Model/Components/amap2_three.tsx Normal file
View File

@ -0,0 +1,143 @@
import { Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as React from 'react';
// import { DirectionalLight, Scene as ThreeScene } from 'three';
import * as THREE from 'three';
// tslint:disable-next-line:no-submodule-imports
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
export default class GlTFThreeJSDemo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
);
const pointsData = await response.json();
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
center: [111.4453125, 32.84267363195431],
pitch: 45,
rotation: 30,
zoom: 15,
}),
});
this.scene = scene;
scene.registerRenderService(ThreeRender);
scene.on('loaded', () => {
const threeJSLayer = new ThreeLayer({
enableMultiPassRenderer: false,
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
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://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
// 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedCube/glTF/AnimatedCube.gltf',
// 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/radar/34M_17.gltf',
// 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/duck/Duck.gltf', // duck
// 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
// 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/man/CesiumMan.gltf',
'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
(gltf) => {
// console.log(gltf)
const gltfScene = gltf.scene;
// gltfScene.rotation.set(90, 90, 0)
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
const gltfScene = gltf.scene;
gltfScene.scale.set(10, 10, 10);
// gltfScene.applyMatrix4(
// // 生成模型矩阵
// layer.getModelMatrix(
// [coordinates[0], coordinates[1]], // 经纬度坐标
// 0, // 高度，单位米/
// [Math.PI / 2, -Math.PI, 0], // 沿 XYZ 轴旋转角度
// [100, 100, 100], // 沿 XYZ 轴缩放比例
// ),
// );
// gltfScene.applyMatrix4(
// // 生成模型矩阵
// layer.getModelMatrix(
// // [coordinates[0], coordinates[1]], // 经纬度坐标
// [0, 0], // 经纬度坐标
// 0, // 高度，单位米/
// [Math.PI / 2, -Math.PI, 0], // 沿 XYZ 轴旋转角度
// [10000, 10000, 10000], // 沿 XYZ 轴缩放比例
// ),
// );
const animations = gltf.animations;
if (animations && animations.length) {
const mixer = new THREE.AnimationMixer(gltfScene);
// @ts-ignore
// for (let i = 0; i < 1; i++) {
const animation = animations[2];
// There's .3333 seconds junk at the tail of the Monster animation that
// keeps it from looping cleanly. Clip it at 3 seconds
const action = mixer.clipAction(animation);
action.play();
// }
layer.addAnimateMixer(mixer);
}
// 向场景中添加模型
// threeScene.add(gltfScene);
});
threeScene.add(gltfScene);
// 重绘图层
layer.render();
},
);
},
})
.source({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [111.4453125, 32.84267363195431],
},
},
],
})
.animate(true);
scene.addLayer(threeJSLayer);
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

1
stories/3D_Model/Components/threeRender.tsx
View File

@ -64,7 +64,6 @@ export default class GlTFThreeJSDemo extends React.Component {
.active(true)
.size(20);
scene.addLayer(imageLayer);
const threeJSLayer = new ThreeLayer({
enableMultiPassRenderer: false,
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {

2
stories/3D_Model/model.stories.tsx
View File

@ -1,10 +1,12 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import AMapModel from './Components/amap_three';
import AMap2Model from './Components/amap2_three';
import MapboxModel from './Components/mapbox_three';
import ThreeRender from './Components/threeRender';
storiesOf('3D 模型', module)
.add('ThreeJS Render', () => <ThreeRender />, {})
.add('高德模型1.x', () => <AMapModel />, {})
.add('高德模型2.x', () => <AMap2Model />, {})
.add('Mapbox模型', () => <MapboxModel />, {});