MapVGL de Baidu Map agrega interacción de clic de modelo personalizado (ThreeJS)

Continuando con el artículo anterior: El artículo anterior habló sobre la carga de modelos personalizados. Esta vez estudiaremos las funciones interactivas relacionadas. En términos generales, es el modelo de clic del mouse. Según el modelo en el que se hizo clic, se devuelven diferentes mensajes para implementar el Operaciones interactivas correspondientes. Aquí acabo de cambiar el color del modelo. Sin más preámbulos, primero coloreemos la imagen:

Aquí hay una modificación simple del color (originalmente es azul y cambia al color perdonar después de hacer clic), la modificación específica depende de las necesidades de los lectores.

Proceso: la forma en que ThreeJS proporciona clics para obtener información del modelo es emitir rayos, colisionar con el modelo y devolver información de colisión para detectar si se hace clic en el modelo o en qué modelo. Según esta idea, esta idea también se utiliza en MapVGL Implementar la función de interacción de clic.

Código:

//获取鼠标坐标然后进行处理        
var mouse = new THREE.Vector2();     
mouse.x = (event.clientPos.x / window.innerWidth) * 2 - 1;        
mouse.y = -(event.clientPos.y / window.innerHeight) * 2 + 1;

//实例化射线        
var raycaster = new THREE.Raycaster();

//从相机发射射线   
raycaster.setFromCamera(mouse,threeLayer.camera);

//进行射线检测
var intersects = []; 
raycaster.intersectObjects(group.children,true,intersects);

//检测的的数组内有对象则说明检测成功
if(intersects.length > 0)
{
     //DoSomething()
}

El problema aquí es que cuando lo implementé por primera vez, descubrí que al hacer clic en el modelo no se obtenía la información correcta del modelo. Al hacer clic en otras ubicaciones, como áreas en blanco, en realidad se devolvía la información del modelo. Más tarde, se descubrió que el motivo era que la capa del mapa no estaba en pantalla completa, pero las coordenadas del mouse se calculan en base a la pantalla completa, lo que resulta en que las coordenadas calculadas del mouse no corresponden a la capa del mapa. Ocurre la situación anterior. Aquí simplemente configuro la capa del mapa en pantalla completa y luego haga clic para mostrarla normalmente. ThreeJS también tiene ese problema. Si necesita ser adaptable, necesita determinar adicionalmente las coordenadas del mouse. No entraré en detalles aquí porque hay mucha información. Por favor, consulte Baidu usted mismo. Ja ja.