aframe
aframe copied to clipboard
aframevr
Issue Raycasting Against Sprites
I linked to the description and original discussion. I'm sorry that I wasn't clearer.
Raycasting against sprites fails with:
THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites.
Uncaught TypeError: Cannot read properties of null (reading 'matrixWorld')
You can reproduce by running this:
<head>
<style>
body {
margin: 0;
}
</style>
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/babel-standalone"></script>
<script src="//unpkg.com/three"></script>
<script src="//unpkg.com/three-spritetext"></script>
<script src="//unpkg.com/react-force-graph-vr"></script>
</head>
<body>
<div id="graph"></div>
<script type="text/jsx">
function genRandomTree(N = 300, reverse = false) {
return {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
[reverse ? 'target' : 'source']: id,
[reverse ? 'source' : 'target']: Math.round(Math.random() * (id-1))
}))
};
}
ReactDOM.render(
<ForceGraphVR
graphData={genRandomTree()}
nodeAutoColorBy="id"
onNodeClick={console.log}
nodeThreeObject={node => {
const sprite = new SpriteText(node.id);
sprite.color = node.color;
sprite.textHeight = 8;
return sprite;
}}
/>,
document.getElementById('graph')
);
</script>
</body>
Are you using A-Frame? It seems you're using THREE only + React?
If you are using A-Frame. Can you create a simple standalone example that reproduces the issue? Glitch is great
I'm not familiar with the libraries you're using and it's going to be hard for me to debug.
I'm not familiar with how A-Frame is used here.
@vasturiano can you provide some context, please?
@dmarcos thanks for looking at this!
I've made a simple example on Glitch that highlights the issue: https://glitch.com/edit/#!/aframe-raycaster-sprites
Essentially the scene includes just an a-frame component containing a simple ThreeJS Sprite, and a raycaster entity.
You'll notice that in the console this leads to the error:
"THREE.Sprite: 'Raycaster.camera' needs to be set in order to raycast against sprites."
Is this something that needs to be set inside the raycaster component perhaps?
https://github.com/aframevr/aframe/blob/master/src/components/raycaster.js
