Leveraging the power of a three.js canvas in conjunction with Custombox

I am currently using three.js to generate a 360 panorama on my webpage.
I have a collection of thumbnails displayed on the page, and when a thumbnail is clicked, two actions take place. The correct texture is swapped into the panorama canvas (which is functioning properly), and a custombox modal containing the canvas is opened.

However, I am facing an issue where the original canvas element still remains in the DOM and is functional. Additionally, within the custombox, there seems to be a second canvas element that appears empty and lacks any functionality.

Could it be possible that I am misinterpreting the behavior of the canvas element, thereby making it impossible for it to display within a modal dialog box?

javascriptcanvasthree.js

Answer №1

It seems like, even without any code provided, the target for CustomBox is likely an ID of the div that holds your canvas or the canvas itself. CustomBox will clone your div/canvas in this scenario. While you will see all the necessary components, three.js won't recognize them because you initially passed the original div to the renderer during instantiation. The render() function you are using accepts the following parameters:

.render ( scene, camera, renderTarget, forceClear )

Considering that the render can specify a new renderTarget as the third parameter, my suggestion would be to start here and input a unique ID for the new canvas that CustomBox is displaying. There are various methods available, such as getRenderTarget (https://threejs.org/docs/#api/renderers/WebGLRenderer), which allows you to identify the canvas currently being rendered to, and setRenderTarget(), which could also prove beneficial.

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

Creating a button in HTML that performs a POST request without redirecting involves using specific code techniques

Looking for a way to create an HTML button that triggers a POST request to a quick route with parameters passed through req.params. The challenge is preventing the button from redirecting me to the route when clicked, but instead staying on the same page w ...

javascripthtmlnode.jsexpressbackend

Looking for assistance with PHP if statement and troubleshooting iFrame issues

Using the PHP if statement below on my website: <?php if(empty($_GET['tid'])) echo '<iframe src="http://tracking.mydomain.com/aff_goal?a=33&goal_id=47" scrolling="no" frameborder="0" width="1" height="1"></iframe>'; ...

javascriptphphtmliframeif-statement

Is there an issue with Ajax connecting to the database?

I have created an HTML file where I need AJAX to connect to the database in the background and fetch the selected city based on the user's pre-selected country. Essentially, I want the database to load all the cities in the drop-down menu automaticall ...

javascriptphphtmlajax

Tips for transferring complete HTML content within a JSON payload

I've been working on a jQuery script to convert an entire HTML page into JSON text. My goal now is to transform this code into a JSON string. In the resulting JSON: The 'text1' value will store the complete HTML in a single string format ...

javascriptjqueryhtmljson

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data ...

javascriptreactjsnext.js

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

javascripthtmlcss

Learn how to create a half and half color scheme in an HTML table

I have created an HTML table that resembles a calendar. Various events are registered in the calendar, each distinguished by its color. However, I am looking to change the colors of the cells to be half and half. https://i.sstatic.net/gaQq2.png The imag ...

javascriptjqueryhtmlcss

Express.js Res redirection problem occurring with Backbone.js due to failure in redirecting hashtag URLs

Issue Summary: Having trouble with Express.js redirect functionality. The problem occurs when trying to redirect after entering /#impulse, but works fine with /impulse/. Server processes the request for /#impulse before applying redirect checks, which re ...

javascriptnode.jsbackbone.jsexpress

What is the best way to effectively handle the proxying of objects across multiple levels?

As illustrated in a Stack Overflow thread, utilizing Proxy objects is an effective method for monitoring changes in an object. But what if you need to monitor changes in subobjects? In such cases, you will also have to proxy those subobjects. I am curren ...

javascripttypescript

Custom positioning of Mui Snackbar in V5

I've been attempting to position a Snackbar in the top right corner with some customization for the top property, but I'm struggling to get it to display correctly. Here's what I've tried: import React from "react"; import { ...

javascriptreactjstypescriptmaterial-ui

How to effectively handle asynchronous calls in Node.js using readdir and stat functions

My current project involves implementing a post method on the server side to fetch all files within a specified directory (non-recursively). Below is my code snippet. I am encountering challenges in sending back the response (res.json(pathContent);) with ...

javascriptnode.jsexpressasynchronous

Streamline the testing process to ensure compatibility with jQuery version 2.x

I currently have a substantial JavaScript code base that is all built on jQuery 1.8. I am planning to upgrade to jQuery 2.1 in the near future and I am fully aware that many parts of my code will likely break during this process. Is there any efficient me ...

javascriptjqueryrubynode.jsjquery-2.0

Provide Arguments to a Function in Express JS

How's everything going? I'm curious to find out the best way, and if it's possible to send a specific parameter to an express function in NodeJS. I want to pass the string ('admin') or any other string that I choose to the 'R ...

javascriptnode.jsexpress

Tips for receiving live updates of active users online with the help of Mongoose and socket.io

I have been working on developing an app that covers various topics. Each topic has online users, and I am using express/socket.io/mongoose for the backend and flutter for the frontend. Currently, I am facing a challenge in displaying real-time informatio ...

javascriptnode.jsmongodbmongoosesocket.io

Angular 2 module transpilation services

In my angular 2 application, there is a module called common. Here is how the project structure looks like: main --app /common --config //.ts configs for modules --services //angular services --models --store //ngrx store /co ...

javascriptangulartypescriptgruntjs

AngularJS Compile directive allows you to specify functions that you want to run in

Can someone assist me in understanding how to call an external function from a built-in compile directive? Here is a code example: http://plnkr.co/edit/bPDaxn3xleR8SmnEIrEf?p=preview This is the HTML: <!DOCTYPE html> <html ng-app="app"> ...

javascriptangularjsangularjs-directivecompilation

What is the reason for injecting dependencies twice in AngularJS?

I'm a beginner in Angular and I'm curious to understand the reasoning behind injecting all our dependencies twice. Here is an example: var analysisApp=angular.module('analysisApp',[]); analysisApp.controller('analysisController ...

javascriptangularjsdependency-injection

What is the best way to create a filter function that continues past the first false value?

Looking for a solution to successfully filter an array of objects by comparing it to another array through looping over its values. The issue arises when the filter function stops at the first false, preventing the full comparison. Any suggestions on how ...

javascriptarrays

Regular expression for eliminating the local path from a website address

I am facing a scenario where different formats of relative paths can occur, such as: const URL1 = "./hello-world" const URL2 = "../hello-world" const URL3 = "../../hello-world" const URL4 = "../../../hello-world" con ...

javascriptreactjsregexurl

Is there a way to simplify this "stopwatch" even more?

Looking for advice on simplifying my JS stopwatch timer that currently only activates once and keeps running indefinitely. As a newcomer to JS, this is the best solution I could come up with: let time = 0 let activated = 0 function changePic() { if(a ...

javascripthtmlcss