Responsive frame structure

Question

Responsive frame structure

I have set up a scene using A-frame () where I currently have a green box attached to the camera at all times. However, as the camera moves, the box also moves along with it. My question is, how can I position the box in the top right corner of the screen regardless of the device being used? Right now, I am using the 'position' property in A-frame to try and place the box in the top right corner, but on smaller screens, the box doesn't appear, while on larger screens, it appears in the middle of the screen. Is there a way to ensure that the box stays glued to the top right corner no matter the screen size?

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>

Here's the Fiddle with the code: https://jsfiddle.net/AidanYoung/0sjLrhfg/

javascript three.js aframe webvr

Answer 1

Answer №1

One way to position a green box at the top-left corner of the camera is by utilizing the Pythagorean theorem. However, for your specific use-case, it might be more convenient to render a separate scene in that corner using the Renderer.setViewport() method

Below is a code snippet demonstrating this approach. Essentially, you will create two scenes and two cameras. The main scene will contain your 3D world with a perspective camera, while the small scene will include a simple plane rendered flat with an orthographic camera. Each frame, you'll:

Clear the renderer's buffers
Render the main scene across the entire window
Clear only the depth buffer, preserving the color
Render the small scene within a 100x100 box on top of step 2

const renderer = new THREE.WebGLRenderer({/*...*/});

// Disable automatic clearing of buffers
renderer.autoClear = false;

// Main scene for 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 the 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 view a live demo of this "Picture-in-picture" technique in action in this example.

Answer 2

One way to position a green box at the top-left corner of the camera is by utilizing the Pythagorean theorem. However, for your specific use-case, it might be more convenient to render a separate scene in that corner using the Renderer.setViewport() method

Below is a code snippet demonstrating this approach. Essentially, you will create two scenes and two cameras. The main scene will contain your 3D world with a perspective camera, while the small scene will include a simple plane rendered flat with an orthographic camera. Each frame, you'll:

Clear the renderer's buffers
Render the main scene across the entire window
Clear only the depth buffer, preserving the color
Render the small scene within a 100x100 box on top of step 2

const renderer = new THREE.WebGLRenderer({/*...*/});

// Disable automatic clearing of buffers
renderer.autoClear = false;

// Main scene for 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 the 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 view a live demo of this "Picture-in-picture" technique in action in this example.

Responsive frame structure

Answer №1

Similar questions

How to deselect a checkbox in next.js when another one is selected

The loading indicator fails to show up when users navigate between pages that have already been loaded in NextJS and ReactJS

During server and browser builds, NextJs encounters a 404 error when trying to access files named _ssgManifest.js and _buildManifest.js. Additionally, the file named _

Does jQuery mobile lack a back button feature?

Using absolute positioning on elements can result in the page zooming out

Use AJAX to send a form submission along with an anchor tag

Validating multiple fields that are added dynamically using jQuery

Utilizing Javascript to maintain an ongoing sum within a <span> tag

What is the best way to ensure data validation occurs only when a button is clicked

Tips for preventing repetition of code in multiple entry points in Rollup

Learn how to showcase the value of the selected radio button in AngularJS

Text input fields failing to record text

Encountering difficulties obtaining server response while utilizing dropzone.js version 4

Transferring data between Promises and functions through variable passing

Ways to enhance the functionality of an input component

Developing a new class within a function

What is the best way to create a sticky div that reacts to a floating (position: fixed) div?

What is the best way to save data from a jQuery plugin to a database using ASP .NET MVC?

Fixing errors when utilizing multiple Axios requests for GET and POST requests

Creating seamless transitions between pages using hyperlinks