diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index 511c1c4726..f7d9875421 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -242,7 +242,10 @@ export default class MapboxService * @param lnglat * @returns */ - public lngLatToCoord(lnglat: [number, number],origin: IMercator = { x: 0, y: 0, z: 0 }) { + public lngLatToCoord( + lnglat: [number, number], + origin: IMercator = { x: 0, y: 0, z: 0 }, + ) { // @ts-ignore const { x, y } = this.lngLatToMercator(lnglat, 0); return [x - origin.x, y - origin.y] as [number, number]; diff --git a/packages/three/src/core/baseLayer.ts b/packages/three/src/core/baseLayer.ts index e92c1189d4..34a9dd5faa 100644 --- a/packages/three/src/core/baseLayer.ts +++ b/packages/three/src/core/baseLayer.ts @@ -3,11 +3,11 @@ import { AnimationMixer, Camera, Matrix4, - Vector3, Object3D, PCFSoftShadowMap, PerspectiveCamera, Scene, + Vector3, WebGLRenderer, } from 'three'; import { ILngLat, IThreeJSLayer } from './IThreeJSLayer'; @@ -85,52 +85,61 @@ export default class ThreeJSLayer /** * 将经纬度转为 three 世界坐标 - * @param lnglat - * @returns + * @param lnglat + * @returns */ public lnglatToCoord(lnglat: ILngLat) { // @ts-ignore - const [x, y] = this.mapService?.lngLatToCoord(lnglat, this.threeRenderService.center); + const [x, y] = this.mapService?.lngLatToCoord( + lnglat, + // @ts-ignore + this.threeRenderService.center, + ); return [x, y]; } /** * 获取 - * @param object - * @returns + * @param object + * @returns */ public getObjectLngLat(object: Object3D) { - let coord = [object.position.x, object.position.y]; + const coord = [object.position.x, object.position.y]; return [0, 0] as ILngLat; } /** * 设置网格适配到地图坐标系 - * @param object + * @param object */ public adjustMeshToMap(object: Object3D) { - object.up = new Vector3(0, 0, 1) - let defaultLngLat = this.mapService.getCenter() - let modelMatrix = this.getModelMatrix( + object.up = new Vector3(0, 0, 1); + const defaultLngLat = this.mapService.getCenter(); + const modelMatrix = this.getModelMatrix( [defaultLngLat.lng, defaultLngLat.lat], // 经纬度坐标 0, // 高度，单位米/ [Math.PI / 2, -Math.PI, 0], // 沿 XYZ 轴旋转角度 [1, 1, 1], // 沿 XYZ 轴缩放比例 - ) + ); object.applyMatrix4(modelMatrix); } /** * 设置网格的缩放 （主要是抹平 mapbox 底图时的差异，若是高德底图则可以直接设置网格的 scale 属性/方法） - * @param object - * @param x - * @param y - * @param z + * @param object + * @param x + * @param y + * @param z */ - public setMeshScale(object: Object3D, x: number = 1, y: number = 1, z: number = 1) { - let scaleMatrix = new Matrix4() - scaleMatrix.scale(new Vector3(x, y, z)) - object.applyMatrix4(scaleMatrix) + public setMeshScale( + object: Object3D, + x: number = 1, + y: number = 1, + z: number = 1, + ) { + const scaleMatrix = new Matrix4(); + scaleMatrix.scale(new Vector3(x, y, z)); + object.applyMatrix4(scaleMatrix); } public buildModels() { diff --git a/stories/3D_Model/Components/amap2_three.tsx b/stories/3D_Model/Components/amap2_three.tsx index 1c188a4343..fc4780dbd2 100644 --- a/stories/3D_Model/Components/amap2_three.tsx +++ b/stories/3D_Model/Components/amap2_three.tsx @@ -57,10 +57,9 @@ export default class GlTFThreeJSDemo extends React.Component { const model: Object3D = gltf.scene; layer.getSource().data.dataArray.forEach(({ coordinates }) => { - - layer.adjustMeshToMap(model) + layer.adjustMeshToMap(model); // model.scale.set(100, 100, 100) - layer.setMeshScale(model, 100, 100, 100) + layer.setMeshScale(model, 100, 100, 100); const animations = gltf.animations; if (animations && animations.length) { diff --git a/stories/3D_Model/Components/amap_three.tsx b/stories/3D_Model/Components/amap_three.tsx index cffe9c23fc..df466d718e 100644 --- a/stories/3D_Model/Components/amap_three.tsx +++ b/stories/3D_Model/Components/amap_three.tsx @@ -42,13 +42,17 @@ export default class GlTFThreeJSDemo extends React.Component { sunlight.matrixWorldNeedsUpdate = true; threeScene.add(sunlight); - let center = scene.getCenter() + let center = scene.getCenter(); - let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000) - let cubeMaterial = new THREE.MeshNormalMaterial() - let cube = new THREE.Mesh(cubeGeometry, cubeMaterial) - layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat] as ILngLat, 0) - threeScene.add(cube) + let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000); + let cubeMaterial = new THREE.MeshNormalMaterial(); + let cube = new THREE.Mesh(cubeGeometry, cubeMaterial); + layer.setObjectLngLat( + cube, + [center.lng + 0.05, center.lat] as ILngLat, + 0, + ); + threeScene.add(cube); // 使用 Three.js glTFLoader 加载模型 const loader = new GLTFLoader(); @@ -65,13 +69,15 @@ export default class GlTFThreeJSDemo extends React.Component { layer.getSource().data.dataArray.forEach(({ coordinates }) => { const gltfScene = gltf.scene; - layer.adjustMeshToMap(gltfScene) + layer.adjustMeshToMap(gltfScene); // gltfScene.scale.set(1000, 1000, 1000) - layer.setMeshScale(gltfScene, 1000, 1000, 1000) + layer.setMeshScale(gltfScene, 1000, 1000, 1000); - - - layer.setObjectLngLat(gltfScene, [coordinates[0] + 0.02, coordinates[1]], 0) + layer.setObjectLngLat( + gltfScene, + [coordinates[0] + 0.02, coordinates[1]], + 0, + ); const animations = gltf.animations; if (animations && animations.length) { diff --git a/stories/3D_Model/Components/mapbox_three.tsx b/stories/3D_Model/Components/mapbox_three.tsx index 6a4eec0346..9336365d3e 100644 --- a/stories/3D_Model/Components/mapbox_three.tsx +++ b/stories/3D_Model/Components/mapbox_three.tsx @@ -6,17 +6,24 @@ import * as React from 'react'; import * as THREE from 'three'; // tslint:disable-next-line:no-submodule-imports import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { animate, easeInOut } from 'popmotion' +import { animate, easeInOut } from 'popmotion'; import { Object3D, Vector3 } from 'three'; -let isTravel = false +let isTravel = false; -function travel(mesh: Object3D, path: Vector3[], duration: number,callback?: () => any) { +function travel( + mesh: Object3D, + path: Vector3[], + duration: number, + callback?: () => any, +) { if (path.length < 2 || isTravel) return; isTravel = true; - let startIndex = 0, len = path.length; - let currentP = path[0], nextP = path[1]; - let t = duration/len; + let startIndex = 0, + len = path.length; + let currentP = path[0], + nextP = path[1]; + let t = duration / len; move(currentP, nextP); function move(currentP: Vector3, nextP: Vector3) { @@ -43,14 +50,14 @@ function travel(mesh: Object3D, path: Vector3[], duration: number,callback?: () let currentP = path[startIndex], nextP = path[startIndex + 1]; mesh.lookAt(nextP); - + move(currentP, nextP); } else { isTravel = false; callback && callback(); } - } - }) + }, + }); } } @@ -110,136 +117,55 @@ export default class GlTFThreeJSDemo extends React.Component { threeScene.add(sunlight); let lineData: ILngLat[] = [ - [ - 116.71874999999999, - 26.745610382199022 - ], - [ - 117.3779296875, - 28.8831596093235 - ], - [ - 115.75195312499999, - 31.466153715024294 - ], - [ - 113.466796875, - 33.32134852669881 - ], - [ - 113.9501953125, - 35.85343961959182 - ], - [ - 115.400390625, - 38.272688535980976 - ], - [ - 116.5869140625, - 40.3130432088809 - ], - [ - 115.6201171875, - 42.261049162113856 - ], - [ - 112.236328125, - 42.94033923363181 - ], - [ - 109.3798828125, - 41.04621681452063 - ], - [ - 103.84277343749999, - 39.80853604144591 - ], - [ - 98.9208984375, - 39.842286020743394 - ], - [ - 95.2294921875, - 40.713955826286046 - ], - [ - 91.7138671875, - 39.87601941962116 - ], - [ - 90.8349609375, - 37.125286284966805 - ], - [ - 90.3076171875, - 35.88905007936091 - ], - [ - 90.703125, - 33.284619968887675 - ], - [ - 92.94433593749999, - 31.98944183792288 - ], - [ - 96.2841796875, - 32.21280106801518 - ], - [ - 98.87695312499999, - 32.0639555946604 - ], - [ - 102.919921875, - 28.459033019728043 - ], - [ - 107.9736328125, - 28.497660832963472 - ], - [ - 108.10546875, - 24.206889622398023 - ], - [ - 109.072265625, - 23.039297747769726 - ], - [ - 112.763671875, - 24.44714958973082 - ], - [ - 116.54296874999999, - 25.958044673317843 - ] - ] + [116.71874999999999, 26.745610382199022], + [117.3779296875, 28.8831596093235], + [115.75195312499999, 31.466153715024294], + [113.466796875, 33.32134852669881], + [113.9501953125, 35.85343961959182], + [115.400390625, 38.272688535980976], + [116.5869140625, 40.3130432088809], + [115.6201171875, 42.261049162113856], + [112.236328125, 42.94033923363181], + [109.3798828125, 41.04621681452063], + [103.84277343749999, 39.80853604144591], + [98.9208984375, 39.842286020743394], + [95.2294921875, 40.713955826286046], + [91.7138671875, 39.87601941962116], + [90.8349609375, 37.125286284966805], + [90.3076171875, 35.88905007936091], + [90.703125, 33.284619968887675], + [92.94433593749999, 31.98944183792288], + [96.2841796875, 32.21280106801518], + [98.87695312499999, 32.0639555946604], + [102.919921875, 28.459033019728043], + [107.9736328125, 28.497660832963472], + [108.10546875, 24.206889622398023], + [109.072265625, 23.039297747769726], + [112.763671875, 24.44714958973082], + [116.54296874999999, 25.958044673317843], + ]; let lineCoordData = lineData.map((d: ILngLat) => { - return layer.lnglatToCoord(d) - }) + return layer.lnglatToCoord(d); + }); // console.log(lineCoordData) var material = new THREE.LineBasicMaterial({ - color: 0x0000ff + color: 0x0000ff, }); - - - var rawPoints: THREE.Vector3[] = [] - lineCoordData.map(d => { - rawPoints.push(new THREE.Vector3(d[0], d[1], 0)) - }) + var rawPoints: THREE.Vector3[] = []; + lineCoordData.map((d) => { + rawPoints.push(new THREE.Vector3(d[0], d[1], 0)); + }); var curve = new THREE.CatmullRomCurve3(rawPoints); - var points = curve.getPoints( 200 ); - var geometry = new THREE.BufferGeometry().setFromPoints( points ); + var points = curve.getPoints(200); + var geometry = new THREE.BufferGeometry().setFromPoints(points); - var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); + var material = new THREE.LineBasicMaterial({ color: 0xff0000 }); - - var line = new THREE.LineLoop( geometry, material ); - threeScene.add( line ); + var line = new THREE.LineLoop(geometry, material); + threeScene.add(line); // console.log(line) // animate({ @@ -263,8 +189,8 @@ export default class GlTFThreeJSDemo extends React.Component { // 根据 GeoJSON 数据放置模型 const gltfScene = gltf.scene.clone(); layer.getSource().data.dataArray.forEach(({ coordinates }) => { - layer.adjustMeshToMap(gltfScene) - gltfScene.scale.set(500000, 500000, 500000) + layer.adjustMeshToMap(gltfScene); + gltfScene.scale.set(500000, 500000, 500000); // gltfScene.rotation.y = Math.PI @@ -300,11 +226,11 @@ export default class GlTFThreeJSDemo extends React.Component { // }, 16) // travel(gltfScene, points, 5000) - travelLoop() + travelLoop(); function travelLoop() { travel(gltfScene, points, 5000, () => { - travelLoop() - }) + travelLoop(); + }); } // 重绘图层 layer.render(); diff --git a/stories/3D_Model/Components/threeRender.tsx b/stories/3D_Model/Components/threeRender.tsx index a2be5f5c94..40744b13c2 100644 --- a/stories/3D_Model/Components/threeRender.tsx +++ b/stories/3D_Model/Components/threeRender.tsx @@ -44,19 +44,20 @@ export default class GlTFThreeJSDemo extends React.Component { // longitude: 120, // latitude: 30 // }] - data - , { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', + data, + { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, }, - }) + ) .shape('triangle') .color('red') .active(true) .size(20) - .animate(true) + .animate(true); // scene.addLayer(imageLayer); const threeJSLayer = new ThreeLayer({ @@ -84,10 +85,10 @@ export default class GlTFThreeJSDemo extends React.Component { // 根据 GeoJSON 数据放置模型 layer.getSource().data.dataArray.forEach(({ coordinates }) => { const gltfScene = gltf.scene; - - layer.adjustMeshToMap(gltfScene) - layer.setMeshScale(gltfScene, 10, 10, 10) - + + layer.adjustMeshToMap(gltfScene); + layer.setMeshScale(gltfScene, 10, 10, 10); + const animations = gltf.animations; if (animations && animations.length) { const mixer = new THREE.AnimationMixer(gltfScene); @@ -108,7 +109,6 @@ export default class GlTFThreeJSDemo extends React.Component { // 向场景中添加模型 threeScene.add(gltfScene); - // layer.setObjectLngLat(gltfScene, [120, 30], 0) // @ts-ignore // console.log(layer.mapService.lngLatToCoord([121.4, 31.258134]))