CODEWITHSUNDEEP
javascriptaframewebvr
Gabriel Navarro
Gabriel Navarro

Reputation: 33

Spawn entities in camera view using A-Frame without nesting

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.

Upvotes: 2

Views: 317

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

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.

Upvotes: 2

Related Questions