mapbox结合three实现添加3D模型并执行点击事件

最新推荐文章于 2024-09-23 11:15:39 发布

qlanto

最新推荐文章于 2024-09-23 11:15:39 发布

阅读量2.7k

点赞数

分类专栏： webgis 文章标签： js mapbox three.js

本文链接：https://blog.csdn.net/qq_44382452/article/details/114030838

版权

webgis 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

点击事件

this.renderer.domElement.addEventListener( 'click', (e)=>{

            const { clientX ,clientY} = e
            const x = ( clientX  / window.innerWidth ) * 2 - 1;
            const y = ( clientY / window.innerHeight ) * 2 + 1;
            const mousePoint = new THREE.Vector2(x,y)
            const raycaster = new THREE.Raycaster();
            // 通过摄像机和鼠标位置更新射线
            raycaster.setFromCamera( mousePoint, this.camera );

            // 计算物体和射线的焦点
            const intersects = raycaster.intersectObjects( this.scene.children ,true );
            // todo 进行过滤
            console.log(intersects)
        } );

完整代码(在官网demo基础上修改):

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>添加3D模型</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
	<style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
	</style>
</head>
<body>

<script src='https://unpkg.com/three@0.102.0/build/three.min.js'></script>
<script src="https://unpkg.com/three@0.102.0/examples/js/loaders/GLTFLoader.js"></script>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p1dHRybDR5MGJuZjQzcGhrZ2doeGgwNyJ9.a-vxW4UaxOoUMWUTGnEArw'
var map = window.map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	zoom: 17.5,
	center: [108.962945, 34.270084],
	pitch: 60
});

// parameters to ensure the model is georeferenced correctly on the map
var modelOrigin = [108.962945, 34.270084];
var modelAltitude = 0;
var modelRotate = [Math.PI / 2, 0, 0];
var modelScale = 5.41843220338983e-8;

// transformation parameters to position, rotate and scale the 3D model onto the map
var modelTransform = {
	translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
	translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
	translateZ: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
	rotateX: modelRotate[0],
	rotateY: modelRotate[1],
	rotateZ: modelRotate[2],
	scale: modelScale
};

var THREE = window.THREE;
// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
	id: '3dmodel',
	type: 'custom',
	renderingMode: '3d',
	onAdd: function (map, gl) {
		this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		this.scene = new THREE.Scene();

		// 两条光线
		var directionalLight = new THREE.DirectionalLight(0xffffff);
		directionalLight.position.set(0, -50, 100).normalize();
		this.scene.add(directionalLight);

		var directionalLight2 = new THREE.DirectionalLight(0xffffff);
		directionalLight2.position.set(0, 50, 100).normalize();
		this.scene.add(directionalLight2);

		// gltf加载器
		var loader = new THREE.GLTFLoader();
		loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf', (gltf) => {
			console.log(gltf)
			this.scene.add(gltf.scene);
		});
		this.map = map;
		// use the Mapbox GL JS map canvas for three.js
		this.renderer = new THREE.WebGLRenderer({
			canvas: this.map.getCanvas(),
			context: gl
		});
		this.renderer.autoClear = false;
		//在渲染时添加click事件
		this.renderer.domElement.addEventListener('click', (e) => {

			const { clientX, clientY } = e
			const x = (clientX / window.innerWidth) * 2 - 1;
			const y = (clientY / window.innerHeight) * 2 + 1;
			const mousePoint = new THREE.Vector2(x, y)
			const raycaster = new THREE.Raycaster();
			// 通过摄像机和鼠标位置更新射线
			raycaster.setFromCamera(mousePoint, this.camera);

			// 计算物体和射线的焦点
			const intersects = raycaster.intersectObjects(this.scene.children, true);
			recursion();
			console.log(intersects)
		});
	},
	render: function (gl, matrix) {
		var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
		var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
		var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);

		var m = new THREE.Matrix4().fromArray(matrix);
		var 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);

		this.camera.projectionMatrix.elements = matrix;
		this.camera.projectionMatrix = m.multiply(l);

		this.renderer.state.reset();
		this.renderer.render(this.scene, this.camera);
		//渲染
		this.map.triggerRepaint();
	}
};

map.on('style.load', function () {
	map.addLayer(customLayer);
});

/**
 * 递归 过滤处理
 */
function recursion() {
	//do something
}

</script>

</body>
</html>