Shihui dev (#844)

* feat: rendererService 新增方法

* style: lint style

Co-authored-by: zhongwu <xingya.sxy@alibaba-inc.com>
This commit is contained in:
YiQianYao 2021-11-19 20:12:48 +08:00 committed by GitHub
parent 808533e6ff
commit cee201387a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 262 additions and 51 deletions

View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.5.55",
"version": "2.5.56",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

View File

@ -66,6 +66,7 @@ export interface IRendererService {
getGLContext(): WebGLRenderingContext;
viewport(size: { x: number; y: number; width: number; height: number }): void;
readPixels(options: IReadPixelsOptions): Uint8Array;
setState(): void;
setBaseState(): void;
setCustomLayerDefaults(): void;
setDirty(flag: boolean): void;

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.5.55",
"version": "2.5.56",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.5.55",
"@antv/l7-core": "^2.5.55",
"@antv/l7-layers": "^2.5.55",
"@antv/l7-maps": "^2.5.55",
"@antv/l7-scene": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-component": "^2.5.56",
"@antv/l7-core": "^2.5.56",
"@antv/l7-layers": "^2.5.56",
"@antv/l7-maps": "^2.5.56",
"@antv/l7-scene": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,2 +1,2 @@
const version = '2.5.55';
const version = '2.5.56';
export { version };

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.5.55",
"version": "2.5.56",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/geo-coord": "^1.0.8",
"@antv/l7-core": "^2.5.55",
"@antv/l7-source": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@antv/l7-source": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.55",
"version": "2.5.56",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.5.55",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.5.55",
"@antv/l7-map": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@antv/l7-map": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-mini",
"version": "2.5.55",
"version": "2.5.56",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,11 +25,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-core": "^2.5.55",
"@antv/l7-layers": "^2.5.55",
"@antv/l7-maps": "^2.5.55",
"@antv/l7-scene": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@antv/l7-layers": "^2.5.56",
"@antv/l7-maps": "^2.5.56",
"@antv/l7-scene": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.16",

View File

@ -201,6 +201,27 @@ export default class ReglRendererService implements IRendererService {
return this.gl._gl;
};
// TODO: 临时方法
public setState() {
this.gl({
cull: {
enable: false,
face: 'back',
},
viewport: {
x: 0,
y: 0,
height: this.width,
width: this.height,
},
blend: {
enable: true,
equation: 'add',
},
framebuffer: null,
});
}
public setBaseState() {
this.gl({
cull: {

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.5.55",
"@antv/l7-core": "^2.5.55",
"@antv/l7-layers": "^2.5.55",
"@antv/l7-maps": "^2.5.55",
"@antv/l7-renderer": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-component": "^2.5.56",
"@antv/l7-core": "^2.5.56",
"@antv/l7-layers": "^2.5.56",
"@antv/l7-maps": "^2.5.56",
"@antv/l7-renderer": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.5.55",
"@antv/l7-utils": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@antv/l7-utils": "^2.5.56",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.5.55",
"version": "2.5.56",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.5.55",
"@antv/l7-layers": "^2.5.55",
"@antv/l7-scene": "^2.5.55",
"@antv/l7-core": "^2.5.56",
"@antv/l7-layers": "^2.5.56",
"@antv/l7-scene": "^2.5.56",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"reflect-metadata": "^0.1.13",

View File

@ -171,11 +171,12 @@ export default class ThreeJSLayer
renderer.render(this.scene, camera);
this.rendererService.setBaseState();
this.rendererService.setState();
this.animateMixer.forEach((mixer: AnimationMixer) => {
mixer.update(this.getTime());
});
this.rendererService.setBaseState();
this.rendererService.setState();
this.rendererService.setDirty(true);
return this;
}

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.5.55",
"version": "2.5.56",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

View File

@ -0,0 +1,187 @@
// @ts-ignore
import { Scene } from '@antv/l7';
import { GaodeMap, 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';
export default class Threemap extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [120, 25],
pitch: 65,
rotation: 30,
zoom: 8,
}),
});
this.scene = scene;
scene.registerRenderService(ThreeRender);
scene.on('loaded', () => {
const threeJSLayer = new ThreeLayer({
enableMultiPassRenderer: false,
// @ts-ignore
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);
let points = [
[120.44353624, 22.44126139],
[120.64050836, 22.24136664],
[120.70155111, 21.92708306],
[120.87288601, 21.89738661],
[120.91492974, 22.30271186],
[121.03327772, 22.65070394],
[121.32468397, 22.94568359],
[121.47954183, 23.3223055],
[121.64384793, 24.09772976],
[121.80915717, 24.33907227],
[121.89250353, 24.6179267],
[121.84504259, 24.83625488],
[122.01220106, 25.00145101],
[121.91709391, 25.13789361],
[121.62302734, 25.29467556],
[121.02468424, 25.04048774],
[120.82376736, 24.68830973],
[120.68867757, 24.60069417],
[120.24576172, 23.84053168],
[120.10276177, 23.70096951],
[120.10784668, 23.34126356],
[120.02320774, 23.10765544],
[120.13473334, 22.99400635],
[120.29720052, 22.53133111],
[120.44353624, 22.44126139],
];
// @ts-ignore
let lnglatPoints = points.map((p) => layer.lnglatToCoord(p));
// console.log(lnglatPoints)
const shape = new THREE.Shape();
// shape.moveTo( 0,0 );
// shape.lineTo( 0, 100000 );
// shape.lineTo( 100000, 10000 );
// shape.lineTo( 10000, 0 );
// shape.lineTo( 0, 0 );
shape.moveTo(lnglatPoints[0][0], lnglatPoints[0][1]);
for (let i = 1; i < lnglatPoints.length; i++) {
shape.lineTo(lnglatPoints[i][0], lnglatPoints[i][1]);
}
shape.lineTo(lnglatPoints[0][0], lnglatPoints[0][1]);
const h = 100000;
const extrudeSettings = {
steps: 2,
depth: h,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1,
};
const v0 = `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`;
const f0 = `
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}`;
const v = `
varying vec2 vUv;
varying float h;
void main() {
vUv = uv;
h = position.z;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`;
const f = `
varying vec2 vUv;
// uniform vec3 color;
varying float h;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0 - h/${h}.0);
}`;
const material = new THREE.ShaderMaterial({
transparent: true,
opacity: 0,
depthWrite: false,
vertexShader: v0,
fragmentShader: f0,
});
const shader_material = new THREE.ShaderMaterial({
uniforms: {
// texture: {
// // 加载纹理贴图返回Texture对象作为texture的值
// // Texture对象对应着色器中sampler2D数据类型变量
// value: new THREE.TextureLoader().load('./Earth.png')
// },
},
depthTest: false,
// depthWrite: false,
// blending: '',
transparent: true,
vertexShader: v,
fragmentShader: f,
side: THREE.DoubleSide, // 双面可见
});
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, [material, shader_material]);
threeScene.add(mesh);
},
})
.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,
}}
/>
);
}
}

View File

@ -4,7 +4,7 @@ import AMapModel from './Components/amap_three';
import AMap2Model from './Components/amap2_three';
import MapboxModel from './Components/mapbox_three';
import ThreeRender from './Components/threeRender';
import Threemap from './Components/threejsmap';
import Aspace from './Components/aspace';
storiesOf('3D 模型', module)
@ -12,4 +12,5 @@ storiesOf('3D 模型', module)
.add('高德模型1.x', () => <AMapModel />, {})
.add('高德模型2.x', () => <AMap2Model />, {})
.add('Mapbox模型', () => <MapboxModel />, {})
.add('Aspace', () => <Aspace />, {});
.add('Aspace', () => <Aspace />, {})
.add('Threemap', () => <Threemap />, {});