xy-map 1.0.60 → 1.1.1

package/src/layers/model.js

@@ -1,341 +0,0 @@
-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 {
-	FXAAShader
-} from 'three/examples/jsm/shaders/FXAAShader'
-import {
-	ShaderPass
-} from 'three/examples/jsm/postprocessing/ShaderPass'
-import {
-	OutlinePass
-} from 'three/examples/jsm/postprocessing/OutlinePass'
-import {
-	CSS2DRenderer
-} from 'three/examples/jsm/renderers/CSS2DRenderer'
-
-import mapBoxGl from 'mapbox-gl'
-
-import {
-	hasLayer,
-	removeLayer
-} from './index'
-
-const defaultOptions = {
-	id: '3dModel',
-	path: '',
-	position: [103.353557, 23.362395], // 位置
-	height: 0, // 海拔高度
-	directionalLight: [{
-		color: 0xfffcce,
-		intensity: 1,
-		position: [-4100, 3000, -1800],
-		shadow: {},
-	}],
-	ambientLight: {
-		color: 0xFFFFFF,
-		intensity: 0.2,
-	},
-	shadow: false,
-	edit: false,
-}
-
-/**
- * 添加模型
- */
-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 = ''
-		let labelRenderer = ''
-		let composer = ''
-
-
-		if (hasLayer(id)) {
-			removeLayer(id)
-		}
-		addModel(id)
-		map.addLayer(customLayer, layerId)
-
-		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,
-						alpha: true,
-						// precision: 'lowp',
-						// logarithmicDepthBuffer: true
-					})
-
-					// 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
-					// composer = new EffectComposer(renderer)
-					// composer.setSize(container.clientWidth, container.clientHeight)
-
-					// 去掉锯齿
-					// let effectFXAA = new ShaderPass(FXAAShader)
-					// effectFXAA.uniforms['resolution'].value.set(1 / container.clientWidth, 1 / container.clientHeight)
-					// effectFXAA.renderToScreen = true
-					// composer.addPass(effectFXAA)
-
-					// 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.setPixelRatio(window.devicePixelRatio)
-					renderer.setSize(container.clientWidth, container.clientHeight)
-					// renderer.gammaOutput = true
-					// renderer.physicallyCorrectLights = true
-
-
-					// css2渲染器创建
-					labelRenderer = new CSS2DRenderer()
-					labelRenderer.setSize(container.clientWidth, container.clientHeight)
-					container.appendChild(labelRenderer.domElement)
-
-
-					// 缩放比例调整
-					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('/model/hdr/').load('hdr1.hdr', (texture) => {
-					texture.mapping = THREE.EquirectangularReflectionMapping
-					scene.background = texture
-					scene.environment = texture
-				})
-			}
-
-			// 渲染摄像机
-			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(
-						modelTransform.translateX,
-						modelTransform.translateY,
-						modelTransform.translateZ
-					).scale(new THREE.Vector3(
-						modelTransform.scale,
-						-modelTransform.scale,
-						modelTransform.scale
-					)).multiply(rotationX)
-					.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)
-				// composer.render()
-				labelRenderer.render(scene, camera)
-				map.triggerRepaint()
-			}
-
-			// 点击事件
-			function getIntersects() {
-				const container = map.getCanvas()
-
-				container.addEventListener('click', (event) => {
-					event.preventDefault()
-
-					// 声明 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.setFromCamera(mouse, camera)
-
-					// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
-					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
-				})
-			}
-		}
-	})
-}

package/src/layers/scene.js

@@ -1,314 +0,0 @@
-import mapSdk from '../map'
-import * as THREE from 'three'
-import * as dat from 'dat.gui'
-
-import {
-	EffectComposer
-} from 'three/examples/jsm/postprocessing/EffectComposer'
-import {
-	RenderPass
-} from 'three/examples/jsm/postprocessing/RenderPass'
-import {
-	Sky
-} from 'three/examples/jsm/objects/Sky'
-// import {
-// 	RoomEnvironment
-// } from 'three/examples/jsm/environments/RoomEnvironment'
-// import { // 环境贴图
-// 	RGBELoader
-// } from 'three/examples/jsm/loaders/RGBELoader'
-
-import mapBoxGl from 'mapbox-gl'
-
-import {
-	hasLayer,
-	removeLayer
-} from './index'
-
-const defaultOptions = {
-	id: '3dModel',
-	path: '/img/30.gltf',
-	position: [103.353557, 23.362395], // 位置
-	directionalLight: [{
-		color: 0xfffcce,
-		intensity: 1,
-		position: [-4100, 3000, -1800],
-		shadow: {},
-	}],
-	ambientLight: {
-		color: 0xFFFFFF,
-		intensity: 0.2,
-	},
-	sky: {
-		size: 1000000,
-		box: [1, 1, 0]
-	},
-	shadow: false,
-	edit: false,
-}
-
-/**
- * 添加场景
- */
-export const addLayerScene = (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 = ''
-		let sun = opt.sky && opt.sky.box ? new THREE.Vector3(opt.sky.box[0], opt.sky.box[1], opt.sky.box[2]) : new THREE.Vector3(1, 1, 0)
-
-
-		if (hasLayer(id)) {
-			removeLayer(id)
-		}
-		addModel(id)
-		map.addLayer(customLayer, layerId)
-
-		resolve({
-			scene,
-			sun
-		})
-
-		function addModel() {
-			const modelOrigin = opt.position // 中心点
-			const modelAltitude = 0 // 高度
-			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(70, container.clientWidth / container.clientHeight, 1, 5000)
-					// camera = new THREE.Camera()
-					// 场景
-					scene = new THREE.Scene()
-
-					// 辅助坐标轴
-					// 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)
-					}
-
-					// 创建天空
-					if (opt.sky) {
-						let sky = new Sky()
-						sky.scale.setScalar(opt.sky.size || 1000000)
-						let uniforms = sky.material.uniforms
-						uniforms['sunPosition'].value.copy(sun)
-						scene.add(sky)
-					}
-
-					// 渲染器
-					renderer = new THREE.WebGLRenderer({
-						canvas: map.getCanvas(),
-						context: gl,
-						antialias: true,
-						// logarithmicDepthBuffer: 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)
-
-					// RoomEnvironment
-					// const pmremGenerator = new THREE.PMREMGenerator(renderer)
-					// scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.001).texture
-
-					// 缩放比例调整
-					// window.addEventListener('resize', () => {
-					// 	renderer.setSize(container.clientWidth, container.clientHeight)
-					// 	camera.aspect = container.clientWidth / container.clientHeight
-					// 	camera.updateProjectionMatrix()
-					// })
-
-					// getIntersects() // 点击事件
-				},
-				render: cameraUpdate
-			}
-
-			return customLayer
-
-			// 渲染摄像机
-			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(
-						modelTransform.translateX,
-						modelTransform.translateY,
-						modelTransform.translateZ
-					).scale(new THREE.Vector3(
-						modelTransform.scale,
-						-modelTransform.scale,
-						modelTransform.scale
-					)).multiply(rotationX)
-					.multiply(rotationY)
-					.multiply(rotationZ)
-
-				camera.projectionMatrix.elements = matrix
-				camera.projectionMatrix = m.multiply(l)
-
-				renderer.toneMapping = THREE.ACESFilmicToneMapping
-
-				renderer.resetState()
-				renderer.render(scene, camera)
-				map.triggerRepaint()
-			}
-
-			// 点击事件
-			function getIntersects() {
-				const container = map.getCanvas()
-
-				container.addEventListener('click', (event) => {
-					event.preventDefault()
-
-					// 声明 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.setFromCamera(mouse, camera)
-
-					// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
-					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
-				})
-			}
-		}
-	})
-}