Importing glTF files in Three.js while hiding the background

On Three.js, there are 2 sample scenes demonstrating how to import gltf models. Both utilize an RGBELoader function to set up the background.

new RGBELoader()
                .setDataType( THREE.UnsignedByteType )
                .setPath( 'textures/equirectangular/' )
                .load( 'venice_sunset_2k.hdr', function ( texture ) {

                    var cubeGenerator = new EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
                    cubeGenerator.update( renderer );

                    //background = cubeGenerator.renderTarget;

                    var pmremGenerator = new PMREMGenerator( cubeGenerator.renderTarget.texture );
                    pmremGenerator.update( renderer );

                    var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
                    pmremCubeUVPacker.update( renderer );

                    envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;

                    pmremGenerator.dispose();
                    pmremCubeUVPacker.dispose();

My goal is to have an empty background or just a ground without the need to load the background textures. I have tried commenting out the "background" line, but then my object appears without texture.

I am seeking a way to display the helmet/boombox (sample object in the gltf loader scene) without the background interfering. I believe the solution lies in manipulating the "envmap".

Answer №1

Avoid loading textures for the background, as it may not be necessary.

The cube texture serves as the environment map for the glTF model. If you decide to remove it, you will need to eliminate the specified code section in the webgl_loader_gltf file.

gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
        child.material.envMap = envMap;
    }
} );

Keep in mind that removing the environment map may cause the helmet to appear darker, as it is the primary source of light in the scene. Consider adding ambient, directional, or point lights instead.

Using three.js R109

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

Mechanism for enhancing and modifying capabilities of an object through a design pattern

TL:DR design pattern for objects that temporarily modify each other in a game scenario. Functionality is added and then removed dynamically. As a database developer delving into front-end development, I am exploring new techniques to stay informed about v ...

Can you explain the distinction between setting abc.p as undefined versus deleting abc.p?

The variable abc is pointing to an object. What distinguishes abc.p = undefined from delete abc.p aside from their return values? ...

Angular is throwing an error because it cannot find the definition for

Embarking on a tutorial journey to dive into Angular setup. Facing a persistent error in my code... Error: [$injector:undef] http://errors.angularjs.org/1.6.0/$injector/undef?p0=Bear Listing the order of files within the <head> tag in the html ...

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

I encountered an error when attempting to integrate Node.js with my terminal in the text editor - permission was denied

After installing node.js and npm, I encountered permission issues when trying to run them from my text editor (VSC). I was advised to open the terminal within the text editor, drag and drop the .js files I'm working on, add "node" and hit "enter" to r ...

Refresh the Div Element As Required

Is it possible to achieve what I am attempting to do? Let me explain the scenario and my goal, so that if there is a better approach, you can guide me! Here is the scenario: I have a View and a PartialView. The PartialView contains a dropdown list that is ...

Expanding the jQuery AutoComplete Plugin: A Guide to Implementing the bind keyup Event

Currently, I am utilizing a plugin that enhances the features of the jQuery AutoComplete UI Plugin: https://github.com/experteer/autocompleteTrigger/blob/master/jquery-ui.autocompleteTrigger.js Within the select method, an event and ui variable are passe ...

Variation in functionality of onclick in javascript

Can you identify the distinction between the two primary lines of JavaScript in this example? HTML: <html> <body> <form> <input type="button" value="one" id="one" /> <input type="button" v ...

Setting up a basic testcafe configuration with ES modules

Unique Title When it comes to using ES modules with Testcafe, the documentation may not provide clear instructions on configuring global hooks. There seems to be limited options for configuring Testcafe globally, such as using .json or CommonJS. In my pr ...

What are the benefits and drawbacks of combining Jquery UI with AngularJS in web development?

Currently, I am developing a Web application and considering integrating JqueryUI and AngularJS into my ASP.NET MVC project. Is this the best decision for my project? Are there any recommended Databinding libraries that can be used with JQuery UI? Please ...

React JS: How to prevent Yup and Formik error messages from being displayed multiple times upon submission

I have implemented Yup and Formik in my Sign up form to handle validation. My goal is to display specific errors based on the Yup validation rules I've set up. Take a look at the code snippet below: import React from 'react'; import { ...

Encountering the error "Unable to access property message of null" while trying to retrieve the error status code from an HTTP response in Angular

I'm currently working on a project using Angular 8 where I am making an HTTP post request to a .NET Core Web API. If the username or password is incorrect, the API returns a status code of 400. Despite the Chrome console indicating that a 400 status h ...

Error: An attempt to make changes to a database that does not permit mutations has resulted in an InvalidStateError

I am facing an issue while attempting to initiate a transaction within the then() function. An exception is thrown when I try to do so. Below is the code snippet in question: open.onsuccess = function (e1) { var dbase = e1.target.result; $.get("https://w ...

The system is facing difficulty in accessing the property 'user_first_name' as it is currently undefined

I'm having trouble registering a user with expressjs/mongoose as I keep receiving the error: TypeError: Cannot read property 'user_first_name' of undefined at C:\Quiz webPolitica\server.js:20:24 at Layer.handle [as handle_request] ...

steps to determine if a page is being refreshed

Is there a way to prevent the page from reloading when the user clicks the reload button in the browser? I attempted to use this code, but my break point is not triggering. ngOnInit() { this.router .events .subscribe((e: RouterEvent) = ...

Issue with PrimeNG Carousel width on mobile devices

Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngP ...

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

I need assistance with customizing the checkout page on Wordpress Woocommerce. Specifically, I want to make the field 'billing_name' not required if the checkbox 'buy_on_company' is checked. Currently, I have successfully hidden ' ...

Checking the validity of an HTML tag with the contenteditable attribute set to true

Take for instance the input tag, which includes a field known as type. When type is set to "numeric", only numbers can be entered. Now, if I set a td element as contenteditable, is there a way to restrict the user from inputting anything other than number ...

Tips for preserving dynamically generated HTML through Javascript during page reload

I have a straightforward question, but I haven't been able to find a suitable answer. Here's my situation: On my HTML page, I have a form. Using jQuery and AJAX, I submit the form and then use some JavaScript code to change the content of a spec ...

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...