THREE.Raycaster无法与缩放的THREE.Sprite一起正常使用 [英] THREE.Raycaster not working properly with scaled THREE.Sprite

问题描述

当用户将对象悬停在对象上时，我尝试使用THREE.Raycaster显示html标签.如果我使用THREE.Mesh但使用THREE.Sprite则效果很好，看起来空间随着对象的缩放而增加.

I am trying to use THREE.Raycaster to show an html label when the user hover an object. It works fine if I use THREE.Mesh but with THREE.Sprite it looks like that there is a space that increases with the scale of the object.

两种情况下的创建过程都相同，我仅基于 USE_SPRITE 变量来更改类型.

The creation process is the same for both scenario, I only change the type based on 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

我不确定这是否是THREE.Sprite的错误，或者我做错了什么.提前致谢.

I am not sure if it is a bug with THREE.Sprite or if I am doing something wrong. Thanks in advance.

three.js r73

three.js r73

推荐答案

我认为这是three.js r.75中的错误.

I would consider this a bug in three.js r.75.

在Three.js中使用网格进行光线投射是准确的.但是，对于精灵，这是一个近似值.

Raycasting with meshes in three.js is exact. However, with sprites, it is an approximation.

Sprite始终面向镜头，可以应用不同的x比例和y比例(非正方形)，并且可以旋转( sprite.material.rotation = Math.random()).

Sprites always face the camera, can have different x-scale and y-scale applied (be non-square), and can be rotated (sprite.material.rotation = Math.random()).

在 THREE.Sprite.prototype.raycast()中，进行以下更改:

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

这对于方形精灵应该会更好.由于子画面被视为磁盘，因此会遗漏子画面的角.

That should work much better for square sprites. The corners of the sprite will be missed, as the sprite is treated as a disk.

three.js r.75

three.js r.75

这篇关于THREE.Raycaster无法与缩放的THREE.Sprite一起正常使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！