Explication détaillée de l'exemple de code Three.js pour obtenir les coordonnées tridimensionnelles du clic de souris

Cet article présente principalement l'exemple de code Three.js pour obtenir les coordonnées tridimensionnelles des clics de souris. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

En raison de besoins professionnels, mais je ne connais rien à three.js, et il y a très peu d'informations sur Internet, on m'a donc demandé d'obtenir les coordonnées, ce qui est vraiment un gros problème. En tout cas, cela s’est finalement réalisé.

Maintenant que vous souhaitez obtenir les coordonnées tridimensionnelles du clic de souris, je crois que vous avez déjà la caméraobjet et la scène. Si vous ne savez pas, vous. Je peux le vérifier en premier. Jetez un œil à ces deux objets. Ici, nous parlons principalement de la façon d'obtenir des coordonnées tridimensionnelles, en laissant de côté les principes. Code ci-dessus :

function onDocumentMouseDown( event ) {
  event.preventDefault();
  var vector = new THREE.Vector3();//三维坐标对象
  vector.set(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5 );
  vector.unproject( camera );
  var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  var intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    var selected = intersects[0];//取第一个物体
    console.log("x坐标:"+selected.point.x);
    console.log("y坐标:"+selected.point.y);
    console.log("z坐标:"+selected.point.z);
  }

Ce que je comprends, c'est que lorsque la souris clique, l'écran reçoit des coordonnées bidimensionnelles. Ces coordonnées bidimensionnelles sont connectées à la caméra et s'étendent dans la direction de l'angle de vue. former un rayon. Les rayons croiseront les objets de la scène et recevront tous les objets qui se croisent. Le premier objet est celui le plus proche de la caméra et le dernier est celui le plus éloigné de la caméra. Généralement, le premier objet qui se croise est utilisé comme objet cliqué par la souris.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!