Ajout d'une minimap

Par Florian Francq (Twenky), il y a 5 ans

Les bases HTML/CSS
Javascript

Bonjour,

Je rencontre un petit problème avec mon code. J'utilise three.js et orbitalcontrol pour créer une petite visite virtuelle, tout fonctionne très mais je souhaite rajouté une minimap (en 2D) ou on pourrai se deplacer via cette minicarte dans les differente scene créer avec three.js.
La minimap aurai plusieurs point qui servirai de racourcis qui permettrai de se deplacer plus rapidement vers un point voulu

Avez vous des idées pour régler ce petit problème.
Merci ^^

3 réponses

lhapaipai, il y a 5 ans

Salut Florian,
pourrais-tu nous en dire un peu plus sur cette minimap ?
tu veux la rendre sur le canvas de three.js ou en dehors ? est-ce qu'elle sera fixe ou évoluera en fonction de ta position dans la visite virtuelle

si c'est en dehors, avec une minimap qui ne bouge pas (cas le plus simple :-)
tu pourrais :

  • créer un conteneur contenant ton image de minimap.
  • écouter les clics de souris sur ce conteneur.
  • créer des div transparents correspondant aux zones concernées par tes visites virtuelles
  • lors d'un clic, récupérer le conteneur associé e.target et mettre à jour la visite liée au conteneur.
Florian Francq (Twenky), il y a 5 ans

Peu importe comment la créer honnetement ^^
Je vais essayer ta methode alors mais javoue avoir du mal avec le javascript ^^
Encore merci pour ta réponse !

lhapaipai, il y a 5 ans

d'accord, tiens moi au courant. je pense que c'est le plus simple.
sinon j'imagine qu'il te faudrait créer un plan normal à ta caméra avec comme texture ta minimap et qui se déplace en même temps qu'elle.
puis utiliser un Raycaster pour transformer ton clic de souris en coordonnées interprétable et en déduire une zone de visite virtuelle.
ça doit être intéressant à faire mais je ne maîtrise pas suffisamment three.js pour te donner des pistes :-S
bonne soirée