Showcase multiple examples of three.js on a single webpage

I need to showcase several 3D objects on my web app within different containers. Currently, I'm creating multiple three.js renderers, each for a separate container. However, I encountered an error message: "WARNING: Too many active WebGL contexts. Oldest context will be lost" after setting up around 10 renderers. Here's an example of what I mean:

Can anyone advise me on how to incorporate multiple three.js containers on a single webpage? Is it feasible to use a single renderer with multiple scenes and display each scene in a different container using a separate renderer.domElement?

Your assistance is greatly appreciated!

javascriptthree.jswebgl

Answer №1

There is an alternative method which involves using a single instance of three.js to cover the entire window, placing placeholder divs where drawing is necessary, and utilizing element.getClientBoundingRect to establish the scissor and viewport for each scene within every element.

You can find an example here.

For further reference, check out this answer on StackOverflow:

Another approach could be to employ an additional hidden canvas that is passed to all instances of three.js (ensuring they share the same WebGL context) before replicating the results onto individual 2D canvases.

Here's a snippet as an example:

canvas { width: 128px; height: 128px; display: block; }
.outer { border: 1px solid black; margin: 5px; display: inline-block; }
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js';

// Rest of the code follows...

</script>

The process of copying may introduce latency. It is recommended to utilize an IntersectionObserver for initiating/suspending updates on any offscreen canvas for optimal performance.

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

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Hey there! I have a question related to AngularJs: How can I repeat pre-selected items using (ng-repeat) and allow users to enter a quantity for each item in a subsequent step, then submit all the form data? I'm wondering if adding $index to the repe ...

javascripthtmlangularjs

Establish the geolocation within the data object once Vue.js has been mounted

Just dipping my toes into the world of VueJS. I've got a side project in the works that hinges on fetching User's Geolocation Data right after the main component has mounted. My code snippet is as follows: var app = new Vue({ el: '#app&a ...

javascriptgeolocationvue.js

Guide on transferring href parameter from the parent Vue component to the child component

Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...

javascripthtmlcssvue.jsvue-component

Angular2 - Actively selecting a checkbox in an ngFor loop with a reactive form

There is an object retrieved from a database that consists of a list of names with their corresponding IDs, as well as a flag to indicate whether they are selected or not. Object: let items = [{ ID: 1, Name: 'Item A', Selected: 'Y ...

javascriptangulartypescript

Dealing with promises in ng-if function in AngularJS

When working with AngularJS, I have a scenario where I am using ng-show="isChecked('ID')" in an element to access a $rootScope array that is generated in another controller. Here's my function: $scope.isChecked = function(ID) { c ...

javascriptangularjs

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

The script fails to execute upon the loading of the view

I am facing an issue with a simple JavaScript code that aims to target an element within an angular view: var buttons = document.querySelectorAll('.msg-type i'); console.log(buttons.length); When I run this code, it incorrectly prints out 0 on ...

javascriptangularjs

Move the focus to the previous input field by removing the key

I have created a phone number input with 10 fields that automatically skip to the next field when you fill in each number. However, I would like to be able to go back to the previous field if I make a mistake and need to delete a digit. How can I achieve ...

javascriptjqueryhtmlcssinput

React: Using Chart.js to visualize negative values with a different color in the area

I am implementing a line chart using Chart.js and react-chartjs-2 to display positive and negative values. For positive values, I want the filled area to be green, and for negative values, I want it to be red. Check out the code here import React from &qu ...

javascriptreactjschart.jsreact-chartjs-2

Utilizing cookies to track the read status of articles - markers for reference

Currently, I am in the process of developing a website and am interested in implementing a feature that allows users to track which articles they have read. I am considering adding a small circle next to each article heading to signify whether it has been ...

javascriptcsscookies

The Angular routing functionality appears to be malfunctioning

I am currently implementing routing in my project using basic angular route with Angular 1.3.0. Here is the content of my app.js file: 'use strict'; var routerApp = angular.module('mcw', [ 'ngRoute', 'mcw.controll ...

javascriptangularjsroutessingle-page-applicationangularjs-routing

Ways to display a collection of random images with a click of a button?

I've created a simple php webpage that is supposed to display random images from my images folder when a button is clicked. However, I'm facing an issue where no images are showing up and I can't seem to pinpoint the problem in my code. ...

javascripthtml

I am interested in accessing the information of the currently logged-in user

I am new to AngularJS and I am looking for help on retrieving information about the logged-in user. I want to be able to display this information but I'm not sure where to start. Here is my main Angular controller: var myApp = angular.module('my ...

javascriptangularjs

Having trouble with the second Angular directive not functioning correctly

I am encountering an issue with two directives on the same page. The first directive is functioning correctly, but the second one is not working as expected. Below is the code snippet: HTML <body class="login" ng-app="Login"> <div ng-controller ...

javascriptangularjs

Tips on attaching a class to elements in a loop when a click event occurs

In my HTML, I am displaying information boxes from an array of objects that are selectable. To achieve this, I bind a class on the click event. However, since I am retrieving the elements through a v-for loop, when I select one box, the class gets bound to ...

javascriptcssclassvue.js

Attempting to retrieve the value from a nested table within a table row using Jquery

<tr role="row" class="odd"> <td style="background-color:white"> <table> <tbody> <tr data-row-id="22"> <td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22">< ...

javascriptjqueryperformancehtml-table

Phantom-node failing to return the value from the page.evaluate function

My goal is to extract a specific element from a webpage and save it as an image locally. Here is the node.js code I am using with phantom-node: var phantom = require('phantom'); phantom.create().then(function(ph) { ph.createPage().then(funct ...

javascriptnode.jsphantomjsrect

Eliminate repeated elements within a JSON dataset to create a consolidated array

Looking to extract unique data from the JSON object below in order to create a result json with a list of questions and their corresponding choices. Any assistance would be greatly appreciated. Thanks in advance..!! var data = [ { "category": "s ...

javascriptjson

What steps can be taken to restrict users to providing only one comment and rating for each item?

In the backend controller, I have the following code snippet: 'use strict'; var Comment = require('../../../models/comment'); module.exports = { description: 'Create a Comment', notes: 'Create a comment&apos ...

javascriptangularjsconditional-statements

What is the best way to stop a current action when a new action is initiated?

My current setup involves an action creator that performs a costly calculation and triggers an action when the user inputs data in real-time. The challenge arises when multiple inputs are entered, as I want to avoid running the entire expensive calculati ...

javascriptreactjsreduxredux-thunk