question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Raycast problem with SpriteMaterial.sizeAttenuation set to false

See original GitHub issue

Hi Friends!

SpriteMaterial.sizeAttenuation = false

seems not working as expected with rayCaster. I doubt the sprite size(dimension) estimation may be a little bit off, ray is very hard to hit them after apply scale(), especially scale down. I can upload a simplified code that regenerate this problem a bit later.

  • r96
Browser
  • All of them

Thanks!

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
Mugen87commented, Jun 25, 2019

Should be solved via #16423

1reaction
WestLangleycommented, Oct 4, 2018

The following pattern can be used as a workaround to prevent size attenuation, and still support raycasting. Leave sprite.sizeAttenuation = true;

// raycasting against sprites when using a perspective camera only works correctly when sizeAttanuation is true (r.97)
var onBeforeRender = function () {

	var v = new THREE.Vector3();
	var v1 = new THREE.Vector3();

	return function onBeforeRender( renderer, scene, camera ) {

		var factor = 0.05; // optional

		v.setFromMatrixPosition( this.matrixWorld );
		v1.setFromMatrixPosition( camera.matrixWorld );

		var f = v.sub( v1 ).length() * factor;
		this.scale.x = this.userData.originalScale.x * f;
		this.scale.y = this.userData.originalScale.y * f;

	}

}();

sprite.userData.originalScale = new THREE.Vector3().copy( sprite.scale ); // optional

sprite.onBeforeRender = onBeforeRender;

Modify this pattern to accommodate your use case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

THREE.Points image sprites have transparency wrong and ...
When a scene is loaded and no camera move has been done, it works ok. But when I zoom in or out the...
Read more >
WebXR raycast on sprite - Questions - three.js forum
Hi, Raycast is not intersecting/colliding with the sprite in AR. ... false,depthWrite: false,sizeAttenuation : false}); sprite = new THREE.
Read more >
Sprites Behind Walls (Depth Sorting) | E4. Crazy Fun Raycasting
How to depth sort entities in a raycast 3d scratch game. In episode 4 we learn to raycast to a list, depth sort...
Read more >
Team:Munich/Hardware/threeJS - iGEM 2018
// We compute the minimum and maximum dot product values. If those values // are on the same side (back or front) of...
Read more >
@react-three/drei - npm
Texture /** Custom fog that is temporarily set as the scenes fog ... be disabled by setting this to false global={false} // Spin...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found