2

How can I spawn an entity directly in camera view without nesting it as a child node?

I'm trying to spawn cubes in front of the user in certain situations that stay in their absolute position even as the camera moves to specific VR devices such as cardboard.

An usual nested example:

<a-camera position="0 1.6 0">
    <a-box position="0 0.5 -1"></a-box> <!-- Unclickable button on cardboard -->
</a-camera>

A normal button example for the default camera view would be:

<a-box position="0 0.5 -1"></a-box> <!-- Clickable button on cardboard-->
<a-camera postion="0 1.6 0"></a-camera>

The code above is a simplified version and does not contain the button interactions as they aren't relevant to the question.

Gabriel Navarro
  • 33
  • 2
  • If you provide full code showing your attempt it will be much easier to help and suggest solutions. https://glitch.com/~aframe is great. – Diego Marcos Nov 10 '20 at 20:49
  • There you go: https://glitch.com/~torpid-tin-wildebeest. I tried my best to convey the question through the code, and apologize if it's too unclear. – Gabriel Navarro Nov 10 '20 at 22:47

1 Answers1

2

If you want to convert "screen coordinates" to the scene "3D world coordinates" - three.js can help:

// x, y are screen coordinates, but rescaled to <-1 : 1>
var position = new THREE.Vector3( x, y, -1 ).unproject( camera );

x,y must be ranging from -1 to 1, so You'd have to rescale the position:

x = ((positionOnScreen - screenWidth/2) / screenWidth/2)

Like i did here ("foo" component, red box, though i had to move it along the calculated direction).

On the other hand, if you're doing UI, then You'll save yourself a lot of trouble if you just create a responsive HTML overlay. And if its "VR UI", then try to create a "menu area" instead of a fixed menu in front of the camera.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42