THREE.Raycaster funktioniert nicht richtig mit skalierten THREE.Sprite

Question

Ich versuche, THREE.Raycaster zu verwenden, um eine HTML-Label anzuzeigen, wenn der Benutzer ein Objekt schweben. Es funktioniert gut, wenn ich THREE.Mesh verwende, aber mit THREE.Sprite sieht es so aus, dass es einen Raum gibt, der mit der Skalierung des Objekts zunimmt.

Der Erstellungsprozess ist für beide Szenarien identisch, ich ändere nur den Typ basierend auf USE_SPRITE Variable.

if (USE_SPRITE) { 

    // using SpriteMaterial/Sprite 
    m = new THREE.SpriteMaterial({ color: 0xff0000 }); 
    o = new THREE.Sprite(m); 

} else { 

    // using MeshBasicMaterial/Material 
    m = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
    o = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 1), m); 

} 

https://plnkr.co/edit/J0HHFMpDB5INYLSCTWHG?p=preview

Ich bin nicht sicher, ob es ein Fehler mit THREE.Sprite ist oder wenn ich etwas falsch tue. Vielen Dank im Voraus.

three.js R73

Answer 1

Ich würde r.75 dies ein Fehler in three.js betrachten.

Raycasting mit Maschen in three.js ist genau. Bei Sprites ist es jedoch eine Annäherung.

Sprites immer auf die Kamera gerichtet, kann verschiedene X-Skala und Y-Skala angewendet haben (nicht quadratisch) und kann gedreht werden (sprite.material.rotation = Math.random()).

In THREE.Sprite.prototype.raycast(), machen diese Änderung:

var guessSizeSq = this.scale.x * this.scale.y/4; 

, die viel besser für quadratisches Sprites funktionieren sollen. Die Ecken des Sprites werden vermisst, da das Sprite wie eine Disk behandelt wird.

three.js r.75