Text woven seamlessly with a series of different scenes

After contemplating the use of three.js for incorporating 3D visualization into my Sphinx extension for model visualization, I realized that the current tool I am using is outdated and not being maintained.

The three.js library offers a variety of examples, and one that particularly caught my eye is the WebGL multiple elements text demonstration.

This example aligns perfectly with the requirements of my Sphinx extension because:

  • It supports multiple scenes on a single page
  • All scenes share the same WebGLRenderer, allowing for multiple instances on a page
  • It enables the mixing of text and scenes seamlessly

However, there is one drawback to using this example - excessive CPU/GPU consumption even when the 3D visualizations are not being interacted with. To address this issue, I decided to eliminate animations and only render scenes upon user interaction:

Simple code change to stop animations and reduce CPU/GPU consumption when not in use...

With this adjustment:

  • Animations are disabled, which is acceptable for my needs
  • Unnecessary CPU/GPU usage is eliminated, achieving my goal
  • Scenes remain interactive for user engagement

However, a new issue arises - the scenes do not scroll with the text when the user navigates down the page. How can I resolve this?

Considerations:

  • The objective is to have minimal CPU/GPU consumption when the user is not interacting with the 3D scenes, ideally while scrolling through documentation pages
  • Is it possible to reduce the impact of scrolling on CPU/GPU usage, similar to when the user is not interacting with the scenes?

Answer №1

Implement a queue system to optimize rendering during the scroll event

window.addEventListerner('scroll', queueRenderIfNotQueued);

let renderQueued = false;
function render() {
  renderQueued = false;
  ...
}

function queueRenderIfNotQueued() {
  if (!renderQueued) {
    renderQueued = true;
    requestAnimationFrame(render);
  }
}

Consider implementing rendering on window resize as well

window.addEventListerner('resize', queueRenderIfNotQueued);

Utilize the provided code snippets from this page and this page

'use strict';

/* global THREE */

function main() {
  // Implementation details omitted for brevity
}

main();
#c {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}

.diagram {
  display: inline-block;
  width: 5em;
  height: 3em;
}

.left {
  float: left;
  margin-right: .25em;
}

.right {
  float: right;
  margin-left: .25em;
}

p {
  margin: 1em auto;
  max-width: 500px;
  font-size: xx-large;
}
<canvas id="c"></canvas>
<p>
  <span class="diagram left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi turpis, pellentesque sed aliquam vel, tincidunt eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
  <span class="diagram right"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi turpis, pellentesque sed aliquam vel, tincidunt eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
  <span class="diagram left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi turpis, pellentesque sed aliquam vel, tincidunt eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
  <span class="diagram right"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi turpis, pellentesque sed aliquam vel, tincidunt eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
  <span class="diagram left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi turpis, pellentesque sed aliquam vel, tincidunt eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
  <span class="diagram right"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi turpis, pellentesque sed aliquam vel, tincidunt eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r98/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r98/js/controls/OrbitControls.js"></script>

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

Attempt to prevent the loading of images using javascript

Is it possible to pause the downloading of images using JavaScript? I am seeking a way to extract all URLs from image tags and only initiate the image loading process when a user scrolls to a specific image. I am aware that the download can be halted using ...

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

Ajax fails to transmit information

Currently, I am in the process of familiarizing myself with the usage of ajax. An issue that I am encountering is that clicking a submit button in a form does not effectively send data. Below you can find the JQuery code I am using: $('input[name=" ...

What are the best practices for managing promises effectively?

Currently, in my Angular application, I am utilizing $odataresource for handling data retrieval and updates. The code snippet I am working with is as follows: var measure = $odataresource("http://windows-10:8888/ChangeMeasure/"); var myMeasure = measure ...

The Select2 ajax process runs twice

I am encountering an issue with a script I have that retrieves data from the backend to populate a select2 dropdown. The problem is that the ajax call is being triggered twice every time, which is not the desired behavior. I'm unsure of what mistake I ...

Unable to properly zoom in on an image within an iframe in Internet Explorer and Google Chrome

My image zoom functionality works perfectly on all browsers except for IE and Google Chrome when opened inside an iframe. Strangely, it still functions flawlessly in Firefox. How can I resolve this frustrating issue? The image link was sourced from the i ...

Combining Summernote images with Node.js using Express.js

While there are numerous solutions available for handling the Summernote file-upload in PHP, I have struggled to find a satisfactory solution for Node.js. Here is My JavaScript: $(document).ready(function() { // $('#summernote').summernote( ...

What techniques can be used to optimize Angular template integration and minimize http requests?

Situation: Our team is currently in the process of migrating an ASP.NET application from traditional WebForms to Web API + Angular. The application is primarily used in regions with limited internet connectivity, where latency issues overshadow bandwidth c ...

Using Angular 2 to fetch barcode scanner information without the need for HTML input or textarea elements

Currently, I am in the process of developing a web application that utilizes a barcode scanner, specifically the Motorola TC55 model. My primary objective is to scan product EAN codes without the need for using HTML input or textarea elements. The reasoni ...

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

Iterating Through Array with Node JS Before Adding a New Property

There is a JSON input with data connected to a secondary model called Users. To process this, I need to iterate through listingData.Agents to extract the index ID and then use this ID to find the corresponding user. The challenge here is that due to asynch ...

Having trouble displaying options in VueJS Component using datalist

Currently, I am harnessing the power of VueJS and its components to create an extensive array of datalists and selectors, each equipped with a submit button for validation upon form submission. Initially, I successfully implemented a datalist within a com ...

stop tabs from being visible during window reload

I am currently working on a page that features 4 jQuery UI tabs. The first tab simply displays a greeting message saying "HELLO". The 2nd, 3rd, and 4th tabs contain HTML and PHP scripts that are functioning correctly. However, when I execute the PHP script ...

Unexplained Reference Error in Next.js Typescript: Variable Accessed before Initialization

I am currently working on an admin website and encountered the error Block-scoped variable used before its declaration.. I will provide details using images and code. This is my first time seeking help on StackOverflow. Error Message: Block-scoped variab ...

Is it possible to implement custom rendering and lighting in Three.js for wireless ray tracing?

After working with Three.js for a few weeks, I am truly impressed by the capabilities of this library! My next goal is to use it for running raytracing simulations at lower frequencies than light, specifically in the RF (Radio Frequency) range. I believe ...

How can I configure Express to act as a pass-through proxy server?

How can I set up an express server to act as a proxy? Requirements: Support for both http and https Ability to function behind a corporate proxy Option to provide custom content for specific URLs I have experimented with various modules such as http-pr ...

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

Error: The function setIsEnabled does not exist

Currently, I am in the process of merging two separate next.js projects to create a website that can utilize the Cardano wallet 'Nami'. The code for accessing the wallet functions correctly in its original project, but when transferred over, it p ...

AJAX-powered Form Validation

I am in the process of creating a login form that includes three input fields: one for entering a username, another for entering a password, and a submit button to log in. Currently, I am utilizing AJAX to validate the login information directly on the cl ...

Setting the dimensions of an HTML - CSS block

I am trying to style a navigation bar using the following CSS code: #nav {} #nav a { position: relative; display: inline-block; color: #F0F0F0; width: 1em; height: 2em; line-height: 0.9em; } #nav a.ic ...