What is the best way to display a large texture on a small mesh using Three.js?

Having some trouble rendering a texture on a small plane. Imagine I have a texture generated from HTML and rendered as an image. Now, I want to display it on a small plane in VR space near an instrument. The instrument is tiny compared to other objects but appears larger due to its close proximity to the screen.

const DISPLAY_TARGET_WIDTH = 0.2;
const display = new THREE.Mesh(
    new THREE.PlaneGeometry(DISPLAY_TARGET_WIDTH, 1),
    DEFAULT_DISPLAY_MATERIAL,
);

When I try rendering the HTML on this display, the image appears blurry and unreadable. One solution could be increasing the size of the element, but perhaps there is a more efficient way to solve this using LOD techniques. Any help or suggestions would be greatly appreciated. Thank you!

javascriptthree.js3dtexturesvirtual-reality

Answer №1

In my experimentation, I discovered that by first setting the object to a normal size and then scaling it down to a smaller size, I was able to achieve the desired result without any texture blurring issues.

export const DISPLAY_TARGET_WIDTH = 2000;
const display = new THREE.Mesh(
    new THREE.PlaneGeometry(DISPLAY_TARGET_WIDTH, DISPLAY_TARGET_WIDTH),
    DEFAULT_DISPLAY_MATERIAL,
);
display.scale.setScalar(0.01);
const texture = new THREE.Texture(displayImage);
texture.anisotropy = 16;
texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
texture.needsUpdate = true;

this.display.material = new THREE.MeshLambertMaterial({map: texture, side: THREE.DoubleSide});

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

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

The whitespace issue stems from the div element __next-build-watcher generated by next js and usecontext

There's a notification bar at the bottom of my page that lets the user know when their email has been sent. This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link: Code However, I've noticed there ...

javascripthtmlcssnext.js

Fixed bar on top, revealed only when the scroll attempts to conceal it

I have placed a menu on the top section of my website, but not at the very top. I would like it to stick to the top of the page when the user scrolls down and disappears from view. However, if the title is still visible, I want the menu to remain below it ...

javascriptcss

Running Jest encounters errors when there is ES6 syntax present in the node modules of a create-react-app project

Currently, I am working on a project using create-react-app and attempting to perform unit testing on a component from office-ui-fabric-react using Jest and Enzyme. The most recent version of office-ui-fabric-react utilizes es6 syntax which is causing iss ...

javascriptreactjsnpmjestjsenzyme

Searching for specific objects within a nested array in TypeScript

I have been searching for examples for a while now, but I haven't found anything similar. My understanding of the filter function is lacking, so any assistance would be greatly appreciated. The goal is to remove elements from the object where the nest ...

javascriptangularprimeng

I'm having trouble opening my input file dialog. Can anyone help me troubleshoot this issue in

I've been developing a website for a school project and I encountered an issue with styling the file input button. When I click on it, nothing happens except for a color change due to the hover effect applied. How can I troubleshoot this problem? < ...

javascriptjqueryhtmlcss

clear JavaScript array of elements

I've been grappling with this issue for hours now, and it seemed so straightforward at first; My goal with JavaScript is to iterate through an array, retrieve the current index value, and then remove that value from the array. I've read that spl ...

javascriptunsetsplice

JavaScript and Memory Allocation: Working with Array Elements

If I may ask a brief question driven by curiosity: imagine having an object with an array as a property, like this.arr = ["one", "two", "three", ...], and let's say this array is filled with n elements. What will occur to these elements if we execute ...

javascriptarraysmemorymemory-management

Modify the text of a button using JavaScript without referencing a specific div class

THE ISSUE I'm facing a challenge in changing the text of a button on my website. The <div> I need to target doesn't have a specific class, making it difficult for me to make this edit. While I have some basic understanding of JavaScript, ...

javascripthtmlclassdombutton

Update background to full screen and include text when hovering over DIV

Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elemen ...

javascriptjquerycsstwitter-bootstrap

Unable to input any text into the form fields ( React.js - Bootstrap) - experiencing difficulty in entering values into the input fields

Although I can position the cursor on it, I am unable to input any values from my keyboard into the input fields. Everything else seems to be working fine - the form still submits (albeit with empty data due to the typing issue). What steps can be taken to ...

javascriptreactjsbootstrap-4react-routerreact-hooks

AngularJS ng-disabled directive allows you to disable the specified

When validating an email and password input using AngularJS, I can check for the following conditions: myForm.$error.required This checks if the input fields are required and have values. I can also validate the email input using the following: myForm ...

javascriptangularjsvalidationangular-validationangularjs-ng-disabled

I can see my Angular 2 object displayed on the console, however, the specific properties are not showing up in the template

Below is the template and component code snippet that I am working with: Template: <div *ngIf="newJobCreated"> <h3>Name: {{newJob.name}}</h3> <h3>Job: {{newJob.job}}</h3> <h3>ID: {{newJob.id}}&l ...

javascriptangular

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

There are two div sections on a page, with one positioned on the left and the other on the right. The div on the right contains multiple dynamically generated tags which necessitate a horizontal scroll bar (overflow:auto). This causes the div's height ...

javascripthtmlcss

Double trouble: yepnope mistakenly loading JS file twice

Trying to load a JS file through yepnope with the given code: yepnope({ load: '<?php echo base_url(); ?>static/js/highlight.min.js', complete: function() { hljs.tabReplace = ' '; hljs.initHighlighti ...

javascriptfirebugyepnope

Get the Label Values Based on CheckBox Status

Is there a way to retrieve the values of labels corresponding to checkboxes in HTML? I have multiple labels and checkboxes next to each other, and I want to be able to get the label values if the checkbox is checked. Can you provide guidance on how to do ...

javascripthtml

Converting Java script into JS - generating audio using byte data?

I am currently in the process of converting some basic Android code written in Java into a static HTML5 app. I do not require any server functionality and would like to keep it that way. My background is mainly in web development, with limited knowledge in ...

javascriptjavaandroidhtmlaudio

Animate css style using setTimeout: "in the blink of a moment"

I need help creating a bar (#innerBar) that decreases in width by 1% every second. Unfortunately, the loop I implemented is not working as expected. The bar goes from 100% to 0% almost instantaneously. function timer(){ var timer; for(i=100;i&g ...

javascripthtmlcss

discord.js-commando encountered an error: unable to find the fetchUser function

After successfully coding a discord bot on my personal computer using nodejs and discord.js-commando, I decided to transfer it to my Raspberry Pi 3b. I installed the latest version of nodejs, used scp to transfer the files, but encountered an error when tr ...

javascriptnode.jsraspberry-pi3discord.js

The combination of Material UI custom TextField and Yup does not seem to be functioning properly

I am facing an issue with integrating my custom TextField into my RegisterForm along with Yup validation. Whenever I use the custom TextField, I encounter a message "⚠ Champ obligatoire" after clicking on Submit, which is not the case when using a simple ...

javascriptreactjsmaterial-uitextfieldyup