CODEWITHSUNDEEP
javascriptthree.jsaframewebvr
Aidan Young
Aidan Young

Reputation: 614

A-frame responsive object

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/

Upvotes: 1

Views: 425

Answers (1)

M -
M -

Reputation: 28462

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:

  1. Clear the renderer's buffers
  2. Render main across the entire window
  3. Clear only depth buffer, preserving the color
  4. Render small scene in a 100x100 box on top of step 2
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.

Upvotes: 2

Related Questions