Capture a fragment of a scene and convert it into a unique texture using THREE.JS

I'm interested in creating a texture of a specific area in my scene, similar to the example shown in the official documentation for three.js framebuffer here. As I examine the code provided, there's one particular aspect that's unclear to me,

// Calculate the starting position for data copying

vector.x = ( window.innerWidth * dpr / 2 ) - ( textureSize / 2 );
vector.y = ( window.innerHeight * dpr / 2 ) - ( textureSize / 2 );

renderer.copyFramebufferToTexture( vector, texture );

The initial parameter for copyFrameBufferToTexture is a Vector2 representing the beginning point for copying the data.

What is the significance of these formulas?

Do they pertain to world coordinates or screen coordinates?

My goal is to dynamically insert a div element into the HTML document and then extract all pixel data contained within it.

Answer №1

SOLUTION

Upon analyzing the source code of the copyFramebufferToTexture function, I noticed that it utilizes copyTexImage2D where the (x,y) coordinates originate from the lower left corner (0,0) of the window.

Therefore, in response to my inquiry, the aforementioned formula represents the window coordinates which commence from the bottom left corner.

Furthermore, for those interested in extracting a portion of the scene delimited by a div element, I have employed the following formulas:

vector.x = divElement.offsetLeft;
vector.y = webglRenderer.getSize().height - divElement.offsetTop - textureHeight;

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

JavaScript with dropdown menus

Currently, I am in the process of implementing a JavaScript code snippet that will be triggered when a checkbox is checked. Once the checkbox is checked, the form should display two additional select boxes. My attempt at coding this functionality was not ...

The pipe in Angular 2.0.0 was not able to be located

Error: Issue: Template parse errors: The 'datefromiso' pipe is not recognized Custom Pipe: import {Pipe, PipeTransform} from "@angular/core"; @Pipe({ name: 'datefromiso' }) export class DateFromISO implements P ...

The bar graph dataset is not correctly configured when utilizing ng2 charts and ng5-slider within an Angular framework

Currently, I am working with a range slider and bar graph. My goal is to dynamically change the color of the bar graph using the range slider. While I have managed to successfully alter the color of the bars, I am facing an issue where the data displayed ...

Tips for stopping links in iOS web applications from launching in a new Safari tab

I am in the process of developing an HTML application specifically for iPads. To enhance user experience, I have added the web app to the homescreen using the "favorite" option. However, I encountered an issue where every internal URL opens in a new Safari ...

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

What is the most effective way to receive all values sent to an Observer upon a new subscription?

I have an observer that receives various values emitted to it at different times. For instance sub = new Subject<any>(); sub.next(1); sub.next(2); sub.next(3); #hack 1 sub.next(4); sub.next(5); sub.next(6); #hack 2 If there is a ...

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

A guide to utilizing Forwarding References in react-router-dom

I have a good grasp on Forwarding Refs and react-router-dom, but I'm struggling with the implementation in this particular scenario. The issue lies in trying to correctly use a function in a child component that sets null in a useState hook. I want th ...

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

Incorporating AJAX functionality into an existing PHP form

I am currently working on a PHP registration form that validates user inputs using $_POST[] requests. Validating username length (3-20 characters) Checking username availability Ensuring the username matches /^[A-Za-z0-9_]+$/ pattern and more... Instead ...

Transform a PHP array into a JavaScript array with UTF-8 encoding

I am currently facing an issue with a products table that contains foreign characters. My goal is to utilize a PHP array in JavaScript to filter a dropdown box as the user types. Everything seems to be working fine except when encountering foreign characte ...

Having trouble retrieving exchange rates from the state in React after making an API call

import React, { Component } from 'react'; import axios from 'axios'; class SearchCurrency extends Component { constructor() { super(); this.state = { data: {} } } componentDidMount() { axios .get(&apo ...

Learn the process of transmitting data from middleware to components and APIs in Next.js version 13

I've been experimenting with the Next Js 13 middleware feature and I'm a bit confused about how to pass data from the middleware to components/pages/api. For example, when trying to pass payload data or determine who the currently logged-in user ...

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

HTML: <html> <head> <body onload="document.getElementById('a').style.display='block';"> <div id="a" align="center" onclick="document.location.reload();" style="display: block; cursor: pointer;"> <img width="9 ...

Nextjs google places autocomplete not providing accurate suggestions

I'm attempting to utilize Google autocomplete to retrieve the names of mosques specifically in the United Kingdom. However, the data I am receiving is global and not limited to mosques. Here is my code: import axios from "axios"; export def ...

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

Is nested testing the key to an elegant JQuery/AJAX form validation solution?

As I implement form validation with JQuery/AJAX, my goal is to provide a seamless experience for users. When an entry is missing or incorrect, I aim to display a single alert message and return the user to the form so they can make adjustments and resubmit ...

JavaScript on Ruby on Rails stops functioning in js.erb file

I have encountered an issue with pagination using AJAX in a view. Initially, I had two paginations working perfectly fine with their respective AJAX calls. However, when I tried to add a third pagination (following the same method as the previous two), it ...

Is there a correct way to accomplish this task? How could I go about achieving it?

Currently, I am delving into the world of react. While following along with some video tutorials, I encountered a roadblock in the request.js file. The issue popped up during the build process ./src/Row.js Line 16:45: 'fetchUrl' is not define ...

Is there a way to change the visibility of a form element within a directive with the help of

Consider a scenario where you have a basic form as shown below: <form ng-submit="methods.submit(formData)" ng-controller="diamondController" name="diamond" novalidate> <help-block field="diamond.firstName"></help-block> <input ...