An issue with the THREE.js TextureLoader not functioning properly when deployed

Question

An issue with the THREE.js TextureLoader not functioning properly when deployed

After implementing the code below, my project is successfully rendering my background and avatar. However, when deploying on Netlify, the rendering does not function as expected.

I have attempted using "../../", "./", and other variations, but the issue persists. Any suggestions or insights on how to resolve this?

// Background

const spaceTexture = new THREE.TextureLoader().load('./images/space.jpg');
scene.background = spaceTexture;

// Avatar

const loader = new THREE.TextureLoader().load('logo.svg'); //, color: 0x00FFEB 
const jeff = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshStandardMaterial({ map: loader}));

scene.add(jeff);

Your help is greatly appreciated.

javascript three.js

Answer 1

Answer №1

The lack of a loading manager to detect when the texture meshes are loaded while your application is live in production is causing the issue. To resolve this, you must first create a loading manager and then pass it into your texture loader. Here's an example of how to do it:

const loadingManager = new THREE.LoadingManager();

const loader =new THREE.TextureLoader(loadingManager);

const jeff =   loader.load("../assets/jeff.png");

Additionally, consider rebuilding your application using the npm parcel package to ensure it functions correctly in production on a free hosting service like vercel. Move your index.html, styles.css, and main.js files to a new source folder named src. Install parcel using npm with the following command:

npx install parcel

Also, install three.js and gsap packages, then use the following command to build:

npx parcel src/index.html

This will generate a dist folder containing a new deployable index.html. Finally, move all your image assets to the dist folder so that your dist index.html can access them

Answer 2

The lack of a loading manager to detect when the texture meshes are loaded while your application is live in production is causing the issue. To resolve this, you must first create a loading manager and then pass it into your texture loader. Here's an example of how to do it:

const loadingManager = new THREE.LoadingManager();

const loader =new THREE.TextureLoader(loadingManager);

const jeff =   loader.load("../assets/jeff.png");

Additionally, consider rebuilding your application using the npm parcel package to ensure it functions correctly in production on a free hosting service like vercel. Move your index.html, styles.css, and main.js files to a new source folder named src. Install parcel using npm with the following command:

npx install parcel

Also, install three.js and gsap packages, then use the following command to build:

npx parcel src/index.html

This will generate a dist folder containing a new deployable index.html. Finally, move all your image assets to the dist folder so that your dist index.html can access them

An issue with the THREE.js TextureLoader not functioning properly when deployed

Answer №1

Similar questions

Remove the most recently played sound from an array of sound using Vue.js

`Look up values from specified key names`

Command in Selenium Webdriver for initiating a mouse click

Defining global 'require' scripts in Node.js

Tips on preventing the occurrence of double encoding in raw JSON output from a view

Notify when the focus is solely on the text box

How to upload a multipart form with JSON and file using Dojo's XHR functionality

Vue watchers capturing original value prior to any updates

Presentation Slider (HTML, CSS, JavaScript)

Ensure that the submit button triggers the display of results with each click

Is there a way to continue a failed fetch request?

Exploring Angular's Dependency Injection

Retrieve the JSON data based on a specific key after a specified period

Mapping choices array in ReactJS using the id as a key reference

Sending auth0 token as a parameter in $http.get request in Angular

Unable to successfully upload a .docx file within OnlyOffice utilizing JavaScript

why is it that I am not achieving the expected results in certain areas of my work?

Dividing a string into sections and sending each section to a function

Issues with CORS on PUT and POST requests in AngularJS and Node.js are preventing successful communication between the two

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript