I have a scene I've created using A-frame (https://aframe.io) where currently I have a green box glued to the camera at all times. When the camera turns, the box will move alongside the camera. What I'm wondering is how can I set the box to the top right corner of the screen no matter what the device is. Currently I'm using the position aframe property to position the box at the top right but on smaller devices the box won't show and on bigger devices it's in the middle of the screen. How can I make it so the box is glued to the top right no matter what the screen size is?
Current code:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera>
<a-plane color="green" scale="0.7 0.4 0.6" position="1.5 0.75 -2" rotation="5 -15 -2.5"></a-plane>
</a-camera>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Fiddle containing code: https://jsfiddle.net/AidanYoung/0sjLrhfg/
You could use the pythagorean theorem to place a green box at the top-left corner of the camera. However, I think given your use-case it would be easier to simply render a separate scene in the corner using the Renderer.setViewport() method
See the code sample below. In essence you're creating 2 scenes, and 2 cameras. The main scene will contain your 3D world and probably a perspective camera to look at it. The small scene will contain perhaps a simple plane and an orthographic camera to render it flat without perspective. Then on each frame you:
const renderer = new THREE.WebGLRenderer({/*...*/});
// This prevents the renderer from clearing buffers in between renders
renderer.autoClear = false;
// Main will hold 3D objects
const sceneMain = new THREE.Scene();
scenemain.add(some3DObject);
// Small scene for top-left corner
const sceneSmall = new THREE.Scene();
sceneSmall.add(videoObject);
renderLoop() {
// Clear renderer buffers
renderer.clear();
// Render main scene across full screen
this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
renderer.render(sceneMain, cameraMain);
// Reset depth buffer
renderer.clearDepth();
// Render small scene in a 100x100 square
this.renderer.setViewport(0, window.innerHeight - 100, 100, 100);
renderer.render(sceneSmall, cameraSmall);
}
You can see a live demo of this "Picture-in-picture" approach in action in this example.