xy-map 1.0.21 → 1.0.23

package/src/layers/model.js

@@ -1,8 +1,25 @@
 import mapSdk from '../map'
 import * as THREE from 'three'
+import * as dat from 'dat.gui'
 import {
 	GLTFLoader
 } from 'three/examples/jsm/loaders/GLTFLoader'
+import {
+	EffectComposer
+} from 'three/examples/jsm/postprocessing/EffectComposer'
+import {
+	RenderPass
+} from 'three/examples/jsm/postprocessing/RenderPass'
+import {
+	DRACOLoader
+} from 'three/examples/jsm/loaders/DRACOLoader'
+import { // 环境贴图
+	RGBELoader
+} from 'three/examples/jsm/loaders/RGBELoader'
+import {
+	Water
+} from 'three/examples/jsm/objects/Water'
+
 import mapBoxGl from 'mapbox-gl'
 
 import {
@@ -14,133 +31,216 @@ const defaultOptions = {
 	id: '3dModel',
 	path: '/img/30.gltf',
 	position: [103.353557, 23.362395], // 位置
-	hight: 1950, // 高度
-	scale: 1, // 缩放
-	rotateX: 0, // x旋转
-	rotateY: 0, // y旋转
-	rotateZ: 0, // z旋转
+	height: 0, // 海拔高度
 	directionalLight: [{
-			color: 0xffffff,
-			opacity: 0.5,
-			position: [0, 200, 100]
-		},
-		{
-			color: 0xffffff,
-			opacity: 0.5,
-			position: [0, -200, 100]
-		}
-	],
+		color: 0xfffcce,
+		intensity: 1,
+		position: [-4100, 3000, -1800],
+		shadow: {},
+	}],
 	ambientLight: {
-		color: 0xffffff,
-		opacity: 0.5,
-	}
+		color: 0xFFFFFF,
+		intensity: 0.2,
+	},
+	shadow: false,
+	edit: false,
 }
 
 /**
  * 添加模型
  */
-export const addLayerModel = (option, layerId) => {
-	let {
-		map
-	} = mapSdk
-
-	let opt = Object.assign({}, defaultOptions, option)
-	let id = opt.id
-
-	let camera = ''
-	let scene = ''
-	let renderer = ''
-	let customLayer = ''
-
-
-	if (hasLayer(id)) {
-		removeLayer(id)
-	}
-	addModel(id)
-	map.addLayer(customLayer, layerId)
-
-
-	function addModel() {
-		const modelOrigin = opt.position // 中心点
-		const modelAltitude = opt.hight // 高度
-		const modelRotate = [Math.PI / 2, 0, 0]
-
-		const modelAsMercatorCoordinate = mapBoxGl.MercatorCoordinate.fromLngLat(
-			modelOrigin,
-			modelAltitude
-		)
-
-		const modelTransform = {
-			translateX: modelAsMercatorCoordinate.x,
-			translateY: modelAsMercatorCoordinate.y,
-			translateZ: modelAsMercatorCoordinate.z,
-			rotateX: modelRotate[0],
-			rotateY: modelRotate[1],
-			rotateZ: modelRotate[2],
-			scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() * opt.scale
+export const addLayerModel = (option, layerId = '') => {
+	return new Promise((resolve) => {
+		let {
+			map
+		} = mapSdk
+
+		let opt = Object.assign({}, defaultOptions, option)
+		let id = opt.id
+
+		let camera = ''
+		let scene = ''
+		let renderer = ''
+		let customLayer = ''
+
+
+		if (hasLayer(id)) {
+			removeLayer(id)
 		}
+		addModel(id)
+		map.addLayer(customLayer, layerId)
 
-		// 根据CustomLayerInterface为三维模型配置自定义层
-		customLayer = {
-			id: opt.id,
-			type: 'custom',
-			renderingMode: '3d',
-			onAdd: (map, gl) => {
-				const container = map.getCanvas()
-				// 摄像机
-				camera = new THREE.PerspectiveCamera(20, container.clientWidth / container.clientHeight, 1, 5000)
-
-				// 场景
-				scene = new THREE.Scene()
-
-				// 创建灯光
-				if (opt.directionalLight && opt.directionalLight.length > 0) {
-					opt.directionalLight.forEach(item => {
-						const directionalLight = new THREE.DirectionalLight(item.color, item.opacity)
-						directionalLight.position.set(item.position[0], item.position[1], item.position[2]).normalize()
-						scene.add(directionalLight)
+		resolve(scene)
+
+		function addModel() {
+			const modelOrigin = opt.position // 中心点
+			const modelAltitude = opt.height // 高度
+			const modelRotate = [Math.PI / 2, 0, 0]
+
+			const modelAsMercatorCoordinate = mapBoxGl.MercatorCoordinate.fromLngLat(
+				modelOrigin,
+				modelAltitude
+			)
+
+			const modelTransform = {
+				translateX: modelAsMercatorCoordinate.x,
+				translateY: modelAsMercatorCoordinate.y,
+				translateZ: modelAsMercatorCoordinate.z,
+				rotateX: modelRotate[0],
+				rotateY: modelRotate[1],
+				rotateZ: modelRotate[2],
+				scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
+			}
+
+			// 根据CustomLayerInterface为三维模型配置自定义层
+			customLayer = {
+				id: opt.id,
+				type: 'custom',
+				renderingMode: '3d',
+				onAdd: (map, gl) => {
+					const gui = opt.edit ? new dat.GUI() : null
+					const container = map.getCanvas()
+
+					// 摄像机
+					camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.01, 50000000)
+					// camera = new THREE.Camera()
+					// 场景
+					scene = new THREE.Scene()
+					// scene.background = new THREE.Color('rgba(255,255,255, 0)')
+
+					// 辅助坐标轴
+					// if (gui) {
+					// 	let AxesHelper = new THREE.AxesHelper(100)
+					// 	AxesHelper.position.y = opt.translate[1]
+					// 	scene.add(AxesHelper)
+					// }
+
+					// 创建灯光
+					if (opt.directionalLight && opt.directionalLight.length > 0) {
+						opt.directionalLight.forEach((item, index) => {
+							let position = {
+								x: item.position[0],
+								y: item.position[1],
+								z: item.position[2],
+							}
+							const directionalLight = new THREE.DirectionalLight(item.color, item.intensity)
+							directionalLight.position.set(position.x, position.y, position.z)
+							directionalLight.width = 1
+							directionalLight.height = 1
+							// directionalLight.distance = 0
+							// directionalLight.decay = 0 // 衰减强度
+							// directionalLight.exponent = 0 // 衰减速度
+							// directionalLight.angle = 0 // 光源角度
+							directionalLight.castShadow = true
+
+							// 开启编辑模式
+							if (gui) {
+								const lightGui = gui.addFolder('灯光' + (index + 1))
+								lightGui.addColor(item, 'color').name('颜色').onChange(val => directionalLight.color = new THREE.Color(val))
+								lightGui.add(item, 'intensity').min(0).step(0.1).name('强度').onChange(val => directionalLight.intensity = val)
+								lightGui.add(position, 'x').step(100).name('x').onChange(val => directionalLight.position.x = val)
+								lightGui.add(position, 'y').step(100).name('y').onChange(val => directionalLight.position.y = val)
+								lightGui.add(position, 'z').step(100).name('z').onChange(val => directionalLight.position.z = val)
+								lightGui.open()
+
+								let pointLightHelper = new THREE.DirectionalLightHelper(directionalLight, 1000)
+								scene.add(pointLightHelper)
+							}
+
+							// 开启阴影
+							let shadow = Object.assign({
+								size: 2000,
+								near: 1,
+								far: 8000,
+								clarity: 14, // 阴影清晰度 0-20
+								bias: -0.0005
+							}, item.shadow)
+							if (shadow) {
+								directionalLight.castShadow = true
+								const d = shadow.size || 1000 //阴影范围
+								directionalLight.shadow.camera.left = -d
+								directionalLight.shadow.camera.right = d
+								directionalLight.shadow.camera.top = d
+								directionalLight.shadow.camera.bottom = -d
+								directionalLight.shadow.camera.near = shadow.near || 1
+								directionalLight.shadow.camera.far = shadow.far || 8000
+								directionalLight.shadow.mapSize.width = 2 ** shadow.clarity // 定义阴影贴图的宽度和高度,必须为2的整数此幂
+								directionalLight.shadow.mapSize.height = 2 ** shadow.clarity // 较高的值会以计算时间为代价提供更好的阴影质量
+								directionalLight.shadow.bias = shadow.bias || -0.05 //解决条纹阴影的出现
+							}
+							scene.add(directionalLight)
+						})
+					}
+
+					// 环境光
+					if (opt.ambientLight) {
+						let item = {
+							color: opt.ambientLight.color,
+							intensity: opt.ambientLight.intensity
+						}
+						let ambientLight = new THREE.AmbientLight(item.color, item.intensity)
+						if (gui) {
+							const lightGui = gui.addFolder('环境光')
+							lightGui.addColor(item, 'color').name('颜色').onChange(val => ambientLight.color = new THREE.Color(val))
+							lightGui.add(item, 'intensity').min(0).step(0.1).name('强度').onChange(val => ambientLight.intensity = val)
+							lightGui.open()
+						}
+						scene.add(ambientLight)
+					}
+
+					// 渲染器
+					renderer = new THREE.WebGLRenderer({
+						canvas: map.getCanvas(),
+						context: gl,
+						antialias: true,
+						// logarithmicDepthBuffer: true
 					})
-				}
-
-				if (opt.ambientLight) {
-					const light = new THREE.AmbientLight(0xffffff, 0.8)
-					scene.add(light)
-				}
-
-				// 加载模型
-				const loader = new GLTFLoader()
-				loader.load(opt.path, (gltf) => {
-					gltf.scene.rotateX(opt.rotateX)
-					gltf.scene.rotateY(opt.rotateY)
-					gltf.scene.rotateZ(opt.rotateZ)
-					scene.add(gltf.scene)
-				})
 
-				// 渲染器
-				renderer = new THREE.WebGLRenderer({
-					canvas: map.getCanvas(),
-					context: gl,
-					defaultLight: new THREE.DirectionalLight,
-					antialias: true
+					// 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
+					// let composer = new EffectComposer(renderer)
+					// composer.setSize(container.clientWidth, container.clientHeight)
+
+					// let renderPass = new RenderPass(scene, camera)
+					// composer.addPass(renderPass)
+
+					// 处理阴影
+					if (opt.shadow) {
+						renderer.shadowMap.enabled = true
+						renderer.shadowMap.type = THREE.PCFSoftShadowMap
+					}
+					renderer.autoClear = false
+					renderer.outputEncoding = THREE.sRGBEncoding
+					renderer.setSize(container.clientWidth, container.clientHeight)
+
+					// 缩放比例调整
+					window.addEventListener('resize', () => {
+						renderer.setSize(container.clientWidth, container.clientHeight)
+						camera.aspect = container.clientWidth / container.clientHeight
+						camera.updateProjectionMatrix()
+					})
+
+					// loadHDR()
+
+					// getIntersects() // 点击事件
+				},
+				render: cameraUpdate
+			}
+
+			return customLayer
+
+			function loadHDR() {
+				new RGBELoader().setPath('/img/hdr/').load('hdr2.hdr', (texture) => {
+					texture.mapping = THREE.EquirectangularReflectionMapping
+					scene.background = texture
+					scene.environment = texture
 				})
+			}
 
-				renderer.autoClear = false
-
-				// getIntersects() // 点击事件
-			},
-			render: (gl, matrix) => {
-				const rotationX = new THREE.Matrix4().makeRotationAxis(
-					new THREE.Vector3(1, 0, 0),
-					modelTransform.rotateX
-				)
-				const rotationY = new THREE.Matrix4().makeRotationAxis(
-					new THREE.Vector3(0, 1, 0),
-					modelTransform.rotateY
-				)
-				const rotationZ = new THREE.Matrix4().makeRotationAxis(
-					new THREE.Vector3(0, 0, 1),
-					modelTransform.rotateZ
-				)
+			// 渲染摄像机
+			function cameraUpdate(gl, matrix) {
+				const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX)
+				const rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY)
+				const rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ)
 
 				const m = new THREE.Matrix4().fromArray(matrix)
 				const l = new THREE.Matrix4().makeTranslation(
@@ -155,51 +255,54 @@ export const addLayerModel = (option, layerId) => {
 					.multiply(rotationY)
 					.multiply(rotationZ)
 
+				camera.projectionMatrix.elements = matrix
 				camera.projectionMatrix = m.multiply(l)
+
+				// renderer.toneMapping = THREE.ACESFilmicToneMapping
+				// renderer.toneMappingExposure = 1.5
+
 				renderer.resetState()
 				renderer.render(scene, camera)
 				map.triggerRepaint()
 			}
-		}
-
-		return customLayer
 
-		// 点击事件
-		function getIntersects() {
-			const container = map.getCanvas()
+			// 点击事件
+			function getIntersects() {
+				const container = map.getCanvas()
 
-			container.addEventListener('click', (event) => {
-				event.preventDefault()
+				container.addEventListener('click', (event) => {
+					event.preventDefault()
 
-				// 声明 raycaster 和 mouse 变量
-				let raycaster = new THREE.Raycaster()
-				let mouse = new THREE.Vector2()
+					// 声明 raycaster 和 mouse 变量
+					let raycaster = new THREE.Raycaster()
+					let mouse = new THREE.Vector2()
 
-				// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
-				mouse.x = (event.layerX / container.clientWidth) * 2 - 1
-				mouse.y = -(event.layerY / container.clientHeight) * 2 + 1
+					// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
+					mouse.x = (event.layerX / container.clientWidth) * 2 - 1
+					mouse.y = -(event.layerY / container.clientHeight) * 2 + 1
 
-				//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
-				raycaster.setFromCamera(mouse, camera)
+					//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
+					raycaster.setFromCamera(mouse, camera)
 
-				// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
-				let meshArr = []
-				findMesh(scene.children)
-				let intersects = raycaster.intersectObjects(meshArr, true)
+					// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
+					let meshArr = []
+					findMesh(scene.children)
+					let intersects = raycaster.intersectObjects(meshArr, true)
 
-				// 获取所有mesh
-				function findMesh(list) {
-					list.forEach(item => {
-						if (item.children.length > 0) {
-							findMesh(item.children)
-						} else {
-							meshArr.push(item)
-						}
-					})
-				}
-				console.log(intersects)
-				return intersects
-			})
+					// 获取所有mesh
+					function findMesh(list) {
+						list.forEach(item => {
+							if (item.children.length > 0) {
+								findMesh(item.children)
+							} else {
+								meshArr.push(item)
+							}
+						})
+					}
+					console.log(intersects)
+					return intersects
+				})
+			}
 		}
-	}
+	})
 }