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.

精灵总是面向相机，可以应用不同的 x-scale 和 y-scale(非方形)，并且可以旋转(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() 中，进行以下更改:

In THREE.Sprite.prototype.raycast(), make this change:

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屋！