Creating a mirror image for the entire scene in Three.js: A step-by-step guide

Currently, I am in the process of developing an innovative AR headset that utilizes stereo rendering to create lifelike 3D images. However, a challenge has arisen where the image reflected off the reflectors of the headset appears flipped or mirrored. In order to address this issue in my Three.js code, I am considering two possible solutions:

  1. Flipping every 3D object in the scene.
  2. Or flipping the camera to replicate the effect of an optically inverted (mirror image) camera.

Below, I have provided the basic structure of my code:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const stereo = new THREE.StereoCamera();

function render() {

   //stereo rendering code 
   camera.updateWorldMatrix();
   stereo.update(camera);

   const size = new THREE.Vector2();
   renderer.getSize(size);
   renderer.setScissorTest(true);
   renderer.setScissor(0, 0, size.width / 2, size.height);
   renderer.setViewport(0, 0, size.width / 2, size.height);
   renderer.render(scene, stereo.cameraL);

   renderer.setScissor(size.width / 2, 0, size.width / 2, size.height);
   renderer.setViewport(size.width / 2, 0, size.width / 2, size.height);
   renderer.render(scene, stereo.cameraR);

   renderer.setScissorTest(false);
 }

  requestAnimationFrame(render);

I've also included a couple of images to illustrate my desired outcome: https://i.sstatic.net/oZ6x4.png

https://i.sstatic.net/x0B80.png

While it may seem straightforward to alter the cube using a matrix, the challenge arises when multiple other 3D objects are added to the scene. Ideally, I am seeking a method to flip the entire camera in order to generate a mirrored effect for the complete scene in relation to the stereo camera (if feasible).

Your assistance would be greatly appreciated. It is worth mentioning that previous attempts at manually adjusting the display settings in Windows did not achieve the intended result.

Answer №1

Is it possible to achieve a flip effect on the scene rendering element using just CSS?

<style>
  canvas {
    transform: scaleX(-1);
  }
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The most efficient method for handling a vast amount of data in NodeJS

My database consists of 4 million numbers and I need to quickly check if a specific number exists in it. Example of the database: [177,219,245,309,348,436,...] I initially tried using a MySQL table for this task, but it took a lengthy 1300ms just to chec ...

How to use node.js to download a file and send it to another API using http

I am currently facing an issue where I am attempting to save file data from an http.request response to the file system. Whenever I call the function, a file is created on my desktop but it only contains the text: [Object object]. My question is how can I ...

What is the difference between using "src" in a script tag to reference a resource on the local filesystem versus a non-local filesystem?

Assuming I have an HTML page that includes a script tag like the following: <SCRIPT SRC="./xxx.js"></SCRIPT> In what scenarios would the ./xxx.js file be accessed from the local filesystem? I comprehend that the URI/URL ./xxx.js points to "t ...

Dealing with memory leaks in three.js can be a common issue, especially when utilizing the

In my three.js project, I am constructing a Geometry and filling it with vertices to create a 2D terrain. Once the terrain is generated, I am adding all the Vector3 and Face3 elements to the geometry, and then adjusting each vertex and face on every frame ...

A method for setting a value from an HTML textbox to a variable and displaying it on the same page

How can I retrieve the value from a textbox and display it on the same page? The purpose behind this is that when the user enters their BTC wallet into the textbox, I want to store this value in a variable on the same page and then output the value. I at ...

What is the proper method for setting indices in Three.js BufferGeometry?

My current challenge involves setting per-face UV indices in a BufferGeometry. To achieve this, I am working with a Geometry where each face has a face.materialIndex that corresponds to a UV index. The goal is to convert this geometry into a BufferGeometr ...

Is there a way to extract the numerical value from a string within an ID of a div and transform the rest of the string into a variable?

Looking to extract the final id of a div and convert it to a variable. <div class="margin_bot" id="itemRows2"> <p id="rowNum1">...</p> <p id="rowNum2">...</p> <p id="rowNum3">...</p> <p id="rowNum4"> ...

Creating a dynamic Bootstrap 5 carousel with active class on the first item and indicators

I am curious to know how to create a dynamic Bootstrap 5 carousel. Specifically, I want to know how to display indicators dynamically and add an active class to the first item of the carousel. In Bootstrap 4, it is done in the following way: $('#main ...

Sending an array of JSON data from PHP to JavaScript

After exploring various solutions on how to get JSON in JavaScript from a PHP array, I am still encountering an error. My myfile.php file includes: <?php ................ print json_encode($data, JSON_NUMERIC_CHECK); mysql_close($con); ?> <html&g ...

Attempting to send multipart form data using Node.js Supertest

While experimenting with Node.js supertest to test a REST API script I wrote, I encountered an issue where I needed to mimic the following CURL request: curl -X POST -F api_key=KEY -F image=@my_file http://localhost:3000/v1/upload My initial attempt resu ...

finding the initial element within an object using lodash in javascript

Recently, I came across some data in the form of an array of objects. For instance, let me share a sample dataset with you: "data": [ { "name": "name", "mockupImages": "http://test.com/image1.png,http://test.com/image2.png" }] ========================== ...

Please update Typeorm from version 0.2.28 to version 0.2.45

Thinking of upgrading my typeorm version from 0.2.28 to 0.2.45, but encountered an error when trying to start the server: C:\Users\user\Documents\project\server\src\connection\ConnectionOptionsReader.ts:154 c ...

Having difficulty adding a Dropdown Menu in a Pop-up Box

I am trying to incorporate a select menu inside of a popover, but every time I attempt to do so, the popover content block remains blank. The popover is associated with a side menu item called "Date History". Below is the code snippet I am using to constr ...

inject a $scope object into a view when a button is clicked

Right now, I am using an array as a $scope object $scope.data { item1: "Value", item2: "Value Alt" } Every item corresponds to a form input with a default value. My goal is to create a new form from the same data set upon an ng-click event while main ...

Link several jQuery elements to a function simultaneously

Having 3 jQuery objects is my current situation: var first = $('.el1'); var second = $('.el2'); var third = $('.el3'); I am trying to attach a "change" event to all of them simultaneously, but facing some challenges :( $(fi ...

Unable to locate the module name loaded using require() function

Within my React file, I am importing a Javascript file like this (I am using Typescript): let FloDialog = require('../public/js/flo-dialog.min'); Afterwards, I declare a property for the dialog class: dialog: FloDialog = null; It is important ...

Obtaining the designated item within the list

My list contains elements obtained from a database. I want to ensure that the selected elements remain visible at all times, even after refreshing the page. Here's an example: <select id="select-firm" class="form-control" name="firmId" size="20" ...

Can background images be lazily loaded using react-lazyload?

I've developed a Section component that accepts an image as a property and its children to be displayed within the section. Here's how you can use this component... <Section image={'path/to/image'}> //content </Section> T ...

Utilizing fullpage.js for seamless class addition and removal on the top portion of a webpage

I've encountered an issue with fullpage.js (https://github.com/alvarotrigo/fullPage.js/) on my website http://vatuvara.com/. Essentially, I am trying to add a class of 'black-nav' to #masthead if the visitor is not in the first section of t ...

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...