Issue with Camera inversion not functioning properly in THREE.js with 1 Renderer and 2 Viewports

Check out this JSFiddle example

In my project, I have a single scene with two cameras. Each camera is assigned to its viewport, and both viewports are placed side by side on the same renderer object.

My goal is to have the second camera display a mirrored image of the scene.

Below is the rendering code snippet:

function render() { 

//... clear entire renderer
renderer.setViewport(0, 0, renderer_width, renderer_height);
renderer.clear();

//... 1st viewport (left)
renderer.setViewport(0, 0, renderer_width * 0.5, renderer_height);   
renderer.render(scene, camera1);

renderer.clearDepth(); //... no effect due to no viewport overlap

//... 2nd viewport (right)
renderer.setViewport(renderer_width * 0.5, 0, renderer_width * 0.5, renderer_height);
renderer.render(scene, camera2);

}

To achieve the mirror reflection effect for the second camera, I use the following code:

camera2.projectionMatrix.scale(new THREE.Vector3(-1, 1, 1));
camera2.updateProjectionMatrix();

However, as demonstrated in the JSFiddle example (click the button "Invert Camera2 (VP2)"), the static cube appears inverted, seemingly viewed from the inside.

It's worth noting that both viewports need to be on the same renderer. An alternate solution using multiple renderers was suggested in the response by /u/stdob--/ on Stack Overflow.

EDIT 20160622

I've shared an answer with a JSFiddle that combines rendering approaches from Lee Stemkoski and West Langley.

Answer №1

Responding to a personalized request from /u/Vito Gentile/, I have tailored the code snippet for optimal alignment with THREE.js version R78

You can access the customized code via this jsfiddle link.

Below is an outline of the modifications:

<!--- Utilizing the latest THREE.js (r70+) -->
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></scri...

The CSS styles are detailed below:

body {
    background-color: #eeeeee;
    margin: 0px;
    overflow: hidden;
}

Exploring the specific JavaScript implementation:

//... Techniques inspired by Lee Stemkoski and West Langley.

//... Initializing key variables.
var camera1, camera2, scene, renderer, geometry, material, mybox, mybox2;
var renderer_width, renderer_height;
//

init();
animate();...

</div></answer1>
<exanswer1><div class="answer accepted" i="37975910" l="3.0" c="1466609979" m="1466676874" a="c3RldmVPdw==" ai="2748766">
<p>In response to a personalized request from /u/Vito Gentile/, I have fine-tuned this code snippet to ensure seamless compatibility with THREE.js version R78</p>

<p>You can access the optimized code through this <a href="http://jsfiddle.net/steveow/2bfe8cde/" rel="nofollow">jsfiddle link</a>.</p>

<p>Here's a summary of the changes:</p>

<pre><code><!--- Utilizing the latest THREE.js (r70+) -->
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></scri...

Javascript details explained:

//... Techniques influenced by Lee Stemkoski and West Langley.

//... Declaration of key varia...
(var param_list)
{
            sphere_Geometry 
            = new THREE.SphereGeometry( 
                param_list.radius, 
                param_list.segmentsAlon...</answer1>
<exanswer1><div class="answer accepted" i="37975910" l="3.0" c="1466609979" m="1466676874" a="c3RldmVPdw==" ai="2748766">
<p>At the behest of /u/Vito Gentile/, I've adjusted the code snippet to seamlessly align with THREE.js version R78</p>

<p>You can find the customized code via this <a href="http://jsfiddle.net/steveow/2bfe8cde/" rel="nofollow">jsfiddle link</a>.</p>

<p>A brief overview of the modifications made:</p>

<pre><code><!--- Utilizing the latest THREE.js (r70+) -->
<script src="http://threejs.org/build/three.min.js"></script>
                        );
                }
            }

            ipObject.position.set(param_list.posX,param_list.posY,param_list.posZ);

            return ipObject;

} // E O Function  SOW_F_grob_Make_New_Sphere

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

JSON input that appears to be correct but unexpectedly ends

I'm currently coding a discord bot and came across this snippet: function addFunds(id, amount){ accounts = fs.readFileSync("accounts.data", 'utf8'); console.log(JSON.parse(accounts)) var obj = JSON.parse(accounts); var i; for (i in ...

Troubleshooting Async Issues in Node.js

I am encountering an issue with my node.js app structure, which is as follows: async.forever( function(callback) { async.series([ function(callback) { SomeFunction1(function(err, results) { if (err) callback(err); ...

When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

import React from 'react'; import Link from 'next/link'; import { urlFor } from '../lib/clients'; const Product = ({ product: { image, name, slug, price } }) => { return ( <div> <Link href={`/product/ ...

Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map. I tried using position: fixed in my styling, and while everything looks good when zooming, it br ...

Retrieve the property called "post" using Restangular

With the following code, I am fetching a list of 'postrows': $scope.postrows = {}; Restangular.all('/postrows').getList().then(function(data){ $scope.postrows = data; }); The returned JSON structure is as follows: { id: 1, post ...

When configuring Webpack with a rule array, JSX is not properly recognized by the tool

Here is the configuration for my webpack setup: const path = require('path'); module.exports = { entry: './src/entry.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist&ap ...

What is the best way to populate MongoDB with information retrieved from an external API?

Recently, I've been diving into the world of NodeJS with mongoose & mLab. As someone new to these technologies, I'm slowly piecing together my model. Here's what it looks like for now, with plans to expand the schema down the road. cons ...

Observing the occurrences of JavaScript events

Is there a way to track all JavaScript events in the browser? Such as, identifying the functions that have been executed and the parameters that have been passed in each JS file? I'm dealing with some obfuscated code and I'm looking to determine ...

Exploring the world of projection mapping with ThreeJS and GLSL to create

I am attempting to apply a gradient texture to a model by using a CSS-derived gradient texture. The concept is to allow users to customize the stops/colors of a gradient and then apply it to a model so that it aligns with the current camera view as it rota ...

Real-time data feeds straight from JSON

Currently, I have a JSON file that is generated dynamically and it contains match information along with a unique id. This JSON data is categorized into live, upcoming, and recent arrays. Being new to Javascript, I am unsure about the best approach to crea ...

Is there a way for me to retrieve the data inputted into this form using JavaScript?

Having some trouble with this code. Can someone help me figure out what's going wrong? function displayData() { var userInput; userInput = document.getElementById(userInputs.firstInput); alert ("You entered: " + userInput); } <form ...

Can you explain why the .js code is causing such high CPU usage in popular video players?

Why is the .js code running continuously even when the video is paused and there is no user interaction? I observed this phenomenon on a Windows 10 Atom Tablet, particularly when in energy-saving mode. The CPU usage for video playback and decoding almost ...

JavaScript Regular Expressions: Naming Conventions

While many of us are familiar with naming conventions in R, regular expressions remain uncharted territory for me and the most dreaded aspect of my programming endeavors. As I dive back into JavaScript, I am grappling with creating precise RegExp to valida ...

Challenges Associated with Promises in JavaScript

I'm having trouble with the last line of code in my program and I need some help figuring out how to fix it. Specifically, I know that the second "then" statement needs to return resolve() but I'm not sure how to go about implementing this. Any t ...

What is preventing me from using javascript setInterval with a function in a separate external file?

Everything is running smoothly with this code snippet...an alert pops up every 10 seconds <script type='text/javascript'> function letsTest(){ alert("it works"); } var uptimeId = window.setInterval(letsTest, 10000); < ...

Guidelines for leveraging AngularJS Decorators to deactivate a button within an Html document

Currently, I am utilizing the blur admin theme and exploring the possibility of using decorators to hide a button without directly modifying the HTML. Despite my efforts, I have been unable to successfully conceal the button. Can someone provide guidance o ...

What is the best way to check if an object exists in an array in JavaScript and update it if it does, otherwise add it as a new object in

I am working with an array of objects const target = [{name: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fafbe2c9eee4e8e0e5a7eae6e4">[email protected]</a>', selected: false, alertType: 'max&ap ...

Having trouble retrieving the chosen option from the select elements

Below is a portion of the code that I have written to capture the selected values of class code and section from a dropdown menu. Currently, only the first element of the select is being retrieved instead of the chosen element. HTML Code: <div id="dia ...

The Socket.io application is facing deployment issues on the Heroku platform

I have developed a simple chat server using nodejs, socket.io, and express, and now I am attempting to deploy it on Heroku using my Git repository. However, when I access the Herokuapp website for my application (), the display is not as expected: https:/ ...

Executing a Python function using Javascript

I've been attempting to invoke a basic Python method using JavaScript, but unfortunately, I've hit a roadblock. Below is the Python code snippet I'm working with: def main(): return "Hello from Python" And here is the JavaScript code s ...