Question

我正在尝试使用THREE.Raycaster在用户悬停对象时显示html标签。如果我使用THREE.Mesh但是使用THREE.Sprite它看起来有一个空间随着对象的比例增加而工作正常。

两种情况的创建过程都是相同的，我只根据 USE_SPRITE 变量更改类型。

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的错误或者我做错了什么。提前致谢。

three.js r73

Answer 1

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

使用three.js中的网格进行光线投射是准确的。然而，对于精灵来说，这是近似值。

Sprites始终面向相机，可以应用不同的x刻度和y刻度（非方形），并且可以旋转（sprite.material.rotation = Math.random()）。

在THREE.Sprite.prototype.raycast()中，进行此更改：

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

这应该对方形精灵更好。精灵的角落将被遗漏，因为精灵被视为磁盘。

three.js r.75

THREE.Raycaster与缩放的THREE.Sprite无法正常工作

1 个答案: