三.光线投射器在缩放的 THREE 中无法正常工作.精灵

THREE.Raycaster not working properly with scaled THREE.Sprite

本文关键字：常工作 工作 精灵 光线投射 缩放 THREE      更新时间：2023-09-26

我正在尝试使用THREE。光线投射器，用于在用户将鼠标悬停在对象上时显示 html 标签。如果我使用 THREE，它可以正常工作。网眼但有三个。雪碧看起来有一个空间随着对象的比例而增加。

两种方案的创建过程相同，我只根据变量更改类型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 的错误。雪碧或如果我做错了什么。提前谢谢。

三.js R73

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

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

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

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

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

对于方形精灵来说，这应该效果更好。精灵的角将被遗漏，因为精灵被视为圆盘。

三.js R.75

相关文章：