Extend the current main scene by overlaying a similar scene on the side

In my game scene, I have a group of robots that are currently active. What I'm trying to achieve is switching the camera perspective to one of the robots' first person view and displaying it in a small window on the side above the current scene. I've attempted to use multiple renderers for this task, but unfortunately, I haven't had much success with it yet. I've scoured various resources looking for a solution, but no luck so far.

On a related note, I seem to be facing an issue where the renderer.setViewPort(0,0,15,20) method doesn't appear to be functioning as expected.

javascriptthree.jsgame-development

Answer №1

After some searching, I stumbled upon the perfect solution to my question: https://jsfiddle.net/qwb39spx/

// Adding a new scene
renderer.clearDepth(); // This is crucial!
renderer.setScissorTest(true);
renderer.setScissor(20, 20, insetWidth, insetHeight);
renderer.setViewport(20, 20, insetWidth, insetHeight);
renderer.setClearColor( 0x222222, 1 );

camera2.position.copy(camera.position.clone().normalize().multiplyScalar(distance));
camera2.quaternion.copy(camera.quaternion);

renderer.render(scene, camera2);

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

Identifying JSON Attributes in Nonexistent Objects Function

Is there a method to verify the existence of a property in JSON data without specifying a particular object? Here's an example: data.programs.text.background In this case, background is a property of text. But what if the text object doesn't e ...

javascriptjqueryjsonobject

Replacing values in an HTML file with MySql query results

----- Problem solved, solution below ----- In my HTML file, I have a dropdown menu for various courses listed as follows: <ul> <li class="dropbtn" id="1"> <a href="">first</a> <ul class="dropdown-content"> ...

javascriptphphtmlmysqlajax

Unable to locate required dependency

I've been attempting to download a template for customization, but after installing all local dependencies using npm install or yarn install, I consistently encounter the same error. I've tried running the commands with both --force and --legacy- ...

javascriptnode.jsreactjsreact-nativenpm

Encountering the error "Cannot access property 'stroke' of undefined" when utilizing constructors in React and p5

Hi there, I'm having trouble with my React code and could really use some assistance. Being new to React, I'm trying to create a collision system between multiple bubbles in an array, but I keep running into this undefined error: https://i.sstat ...

javascriptreactjs

Angular5 causing all divs to have click events at once instead of individually triggered

I am a beginner when it comes to working with Angular and I have encountered an issue. I created a click event on a FAQ page in Angular 5, but the problem is that when I click on one FAQ, they all open up instead of just the targeted one. Here is my TypeS ...

javascripthtmltypescriptangular5

The two CSS classes are styled with different border-color values, but only one is being applied correctly

My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using .css("border-color","rgb(250,0,0)"), and it was working perfectly. However, I have now been advised against using CSS directly in JavaScript and told to ...

javascriptjqueryhtmlcss

Steer clear of Cross-Site Request Forgery through

As someone who is still learning about web security, I am curious about the best practices for using tokens on JavaScript requests to prevent CSRF attacks. Is it possible for someone to provide a code example? I already know how to implement this properly ...

javascriptphpajaxcsrf

Can CSS transitions be synced up to happen simultaneously?

Here is a snippet of code showcasing CSS transitions applied to the height property. It seems that CSS transitions work asynchronously, but I am curious if there's a way to make them synchronous without using jQuery or other methods. CSS: .animated ...

javascriptcsscss-transitions

"Encountered an unexpected token in Javascript - jsp error

Recently, I started working on a JSP application and encountered an issue with passing URL variables from a servlet to a JSP page using request.getattribute. When trying to pass the data to a JavaScript function, we received the following error: Uncaught ...

javascriptjavajqueryajaxjsp

Dominant Editing through ASP.Net Roles

Looking for guidance on how to effectively use knockout with asp.net membership roles in MVC 4. My goal is to incorporate an editable grid on the page based on whether the user is an administrator or a 'registered user'. I want to ensure that use ...

javascriptjqueryasp.net-mvcasp.net-mvc-4knockout.js

Does the placeholder property exist in versions of IE8 or lower?

Although the real html5 placeholder feature may not work in IE10 and below, would the actual tag property still be accessible? To implement my custom placeholders, I utilize the script below: if(core.isInput(el)) { el.initValue = str; el.txtColor ...

javascripthtmlcross-browser

What happens when an AJAX request doesn't have a success field?

Is it possible to execute an ajax call without specifying a success function? $.ajax({ type: "POST", url: "/project/test/auto", data: data, // no success function defined here }); My reasoning for this is that I have PHP code that insert ...

javascriptphpjqueryajax

determining the quantity of dates

Is there a way to calculate the number of a specific day of the week occurring in a month using AngularJS? For example, how can I determine the count of Saturdays in a given month? Thank you. Here is the code snippet I have been working on: <!doctype ...

javascriptangularjsangularjs-ng-repeat

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing

ag-Grid incorporating new style elements

For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...

javascripthtmlcssangularag-grid

Performing a unique mysql query based on the selection made using onchange event in a select element while sending

I have an issue with executing a query onchange in a select element. The goal is to retrieve a specific price for a product based on the size selected. As a beginner with Ajax, I am struggling to send multiple data parameters. The first parameter should ...

javascriptphpjquerymysqlajax

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

Could you please explain why the function event.stopPropagation() is not working on the switch element? Whenever I click on the switch, it prints the console log for the switch. However, when I click on the surrounding area (row), it logs the row event in ...

javascriptjqueryjquery-mobile

Is Three.js deprecating the setHSL() function?

Searching for a solution to incorporate an HSL color scheme into my threejs project. The documentation seems to lack information on using .setHSL() or .offsetHSL() post-2013. Is there a preferred method to exclusively utilize HSL in a threejs scene? Appre ...

javascriptcolorsthree.js

The React Component is caught in a loop of continuous re-rendering and reloading

Just starting out with React and tackling my first project. Running into a bit of trouble here, so I'm sharing my code for some insight. When users input their search term and hit 'search,' they are redirected from another page to this one. ...

javascriptreactjsreact-router

Issue with Bootstrap-vue pagination navigation not functioning correctly (unexpectedly refreshes upon clicking a page)

I recently updated my website's gallery pagination by following a helpful guide. However, I encountered a problem where clicking on a new page number refreshes the entire webpage, unlike the smooth transition shown in the tutorial. This is not the beh ...

javascriptjqueryvue.jspaginationbootstrap-vue