Ajouter une forme devant la caméra sur une sphère [AFrame] (rotation de la caméra/position de la caméra)

Question

J'ai essayé de créer une application simple grâce à laquelle une image 360 ​​est affichée sur une sphère. L'étape suivante consiste à ajouter de manière dynamique des «points d'accès» sur cette image lorsque l'utilisateur effectue un panoramique.

J'ai essayé de nombreuses approches différentes (y compris plonger profondément profondément dans Three.js), mais il ne semble pas être facile. (UVs, positions, sommets, etc.) A-Frame est génial à rendre super simple pour les développeurs à démarrer et à fonctionner. J'ai réussi à trouver un exemple où il y avait deux «hotspots» sur une sphère, qui, lorsque survolée/focalisée, l'arrière-plan de la sphère a changé.

Je cherche à créer un nouveau « point chaud » dans le sens des caméras, mais cela se révèle être assez difficile parce que la position de la caméra ne change jamais, mais la rotation ne.

Par exemple, après panning, je vois ce qui suit:

<a-camera position="0 2 4" camera="" look-controls="" wasd-controls="" rotation="29.793805346802827 -15.699043586584567 0"> 
 
    <a-cursor color="#4CC3D9" fuse="true" timeout="10" material="color:#4CC3D9;shader:flat;opacity:0.8" cursor="maxDistance:1000;fuse:true;timeout:10" geometry="primitive:ring;radiusOuter:0.016;radiusInner:0.01;segmentsTheta:64" position="0 0 -1" raycaster=""></a-cursor> 
 
    </a-camera>

Idéalement, pour créer un nouveau point d'accès dans cette position, je supposais tout ce que je avais besoin de faire ajouter les valeurs de rotation à la valeur de position et ce serait l'endroit correct pour le hotspot, mais malheureusement, cela ne fonctionne pas, soit le hotspot est dans la mauvaise position, il n'est pas face à la caméra ou son n'est plus en vue.

Comment puis-je créer un dans le point de vue des caméras « point chaud » (au milieu)?

J'ai installé un codepen qui devrait aider à montrer le problème que je vais avoir mieux. Idéalement, lorsque je fais un panoramique et que je clique sur «créer un hotspot», un «hotspot» devrait être créé directement au milieu (comme les rouges et les jaunes).

Merci!

MISE À JOUR: Une idée que j'ai eu est d'avoir une sphère secondaire (plus petit rayon) sans arrière-plan. S'il est facile de connaître les coordonnées XYZ de la vue de la caméra qui l'intersecte, cela devient super simple. Y a-t-il un moyen de le découvrir?

Answer 1

Sans intersection, lorsque vous connaissez la position de la caméra, c'est le vecteur qui doit être: niée, normalisée, multipliée par une valeur scalaire qui équivaut au rayon de la sphère. Le résultat est le point de votre nouveau hotspot.

var pos = camera.position.clone().negate().normalize().multiplyScalar(sphereRadius); 

jsfiddle exemple

Answer 2

Oui, je pense que votre deuxième idée est bonne, vous pouvez faire une nouvelle sphère qui a la position de couture avec votre appareil photo. Si vous voulez créer un nouveau "hotspot" sur votre centre d'écran. vous pouvez faire un raycasteur de la caméra au 'hotspot' et il va croiser la sphère. Mais, vous devez définir la propriété du côté du matériau avec 'double face', sinon vous ne couperez pas la sphère. alors, vous pouvez obtenir le intersect[0].point.

var pos = new THREE.Vector3().copy(cameraEl.getComputedAttribute("position")); 
cameraEl.object3D.localToWorld(pos); 
var vector = new THREE.Vector3((event.clientX/window.inneenter code hererWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 0.5); 
vector = vector.unproject(camera); 
var raycaster = new THREE.Raycaster(pos, vector.sub(camera.position).normalize()); 
var intersects = raycaster.intersectObjects([sphere],true); 
if(intersects.length > 0) 
{ 
    console.log(intersects[0].point); 
} 

`