Skybox in Three.js failing to load

I'm brand new to working with Three.JS and I'm struggling to figure out how to add a skybox to my scene. Despite not encountering any errors in my code, I can't seem to get it to work which is quite frustrating. Any guidance or assistance on this issue would be greatly appreciated.

function createSky(){

    var imageList = "CubeMap"

    THREE.ImageUtils.crossOrigin = '';
    var faces  = ["HDR0001", 
                  "HDR0002", 
                  "HDR0003", 
                  "HDR0004", 
                  "HDR0005"]; 

    var imgType = ".jpg";
    var skyGeo  = new THREE.CubeGeometry (500, 500, 500);
    var matFacesArray = [];

    for (var i = 0; i < 6; i++) {
         matFacesArray.push( new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture( imageList + faces[i] + imgType ),        
            side: THREE.BackSide
         }));

    }      

    var sky = new THREE.MeshFaceMaterial ( matFacesArray );
    var skyBox = new THREE.Mesh ( skyGeo, sky );
    scene.add ( skyBox );    

}

Answer №1

Have you checked where your log for warnings/errors is located? It's odd that you're not receiving any notifications since THREE.ImageUtils.loadTexture is deprecated, use TextureLoader.load instead. This warning typically appears with newer versions of three js.

Additionally, what browser are you currently using? I've noticed that Firefox tends to be more lenient in displaying textures compared to Chrome. This issue is related to cross-origin image loading and can arise when attempting to test your code locally.

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

Storing values in localStorage with a specific format can be accomplished by following these steps

How can I save a localStorage value with special characters? I currently have the following value: ald:20221219_1833|atrv:lMh2Xiq9xN0-is9qy6DHBSpBL3ylttQQew but when I try to store it, it appears as if there is an arrow indicating that the value can be ex ...

Trouble keeping the dropdown submenu from staying open

Trying to figure out how to keep my dropdown menu open only when clicked. Currently, the submenu disappears if I move my mouse away from it. I attempted using e.stopPropagation without success. Is there a CSS or Javascript solution that can help with this ...

JavaScript - Error encountered when accessing information from elements in the DOM

Just started learning javascript and encountering a problem that I can't seem to solve. I'm attempting to assign the className of a <div> element to a variable, but I keep receiving this error message: scripts.js:30 Uncaught TypeError: Can ...

multer - the file uploaded by the request is not defined

I've been working on an app with Node, Express, and multer for image uploads. However, after submitting the form, req.file is coming up as undefined. I've spent hours trying to troubleshoot this issue but haven't been able to pinpoint the pr ...

Can the SVG def element be modified?

In my SVG file, there is a defs element structured as follows: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()"> <defs> <linearGradient id="grad" x1="174.6 ...

Utilizing JQuery to Modify XML File Content

Looking to retrieve data from an XML file using jQuery and display it in a textbox? If you want changes made in the textbox to reflect back in the original XML file, there are ways to achieve this. Here is some code that can help: <html><head&g ...

Unable to execute findOneAndUpdate as a function

I've been researching all morning and testing different solutions, but I'm still unable to resolve this issue. Every time I run the code below, I receive the error "TypeError: req.user.findOneAndUpdate is not a function": req.user.findOneAndUpd ...

What is the best method for adding or removing items using ID instead of classes?

Is there a way to change the highlight class to an id, so that clicking outside the products will not trigger the highlight effect? I have added the window.onload section with my desired changes, but I am unsure how to switch the class highlight to an id. ...

Error encountered when making axios call from Nativescript-Vue to local Laravel API [Status code null in failed request]

I am a newcomer to Nativescript, and in my current project, I am attempting to send an http request to my locally hosted Laravel server using php artisan serve on . I am utilizing a physical android device for testing rather than an emulator. After doing s ...

The animation for the login and registration modal is malfunctioning and not functioning as

I am currently working on implementing a login/register modal in React, inspired by a TypeScript example I came across. This is how the login section looks: https://i.sstatic.net/ECvv9.png The goal is to: When the "Sign up" button is clicked, it should ...

After logging in successfully, the React app needs a hard refresh to update the

I'm encountering a debugging challenge and would appreciate any assistance from the community. I've been working on my first React app and successfully implemented a Login feature, but after a user logs in, they have to hard refresh their browser ...

Add a third-party library file to Visual Studio

I'm currently working in Visual Studios and attempting to utilize the library provided at . However, I am encountering difficulties when trying to import the library. I have added the file to the project and attempted to use it within the Book.js (Vi ...

Is there a way to view the contents of a file uploaded from <input type="file" /> without the need to send it to a server?

Having trouble uploading a JSON file from my local disk to Chrome storage. Whenever I use the <input type="file"> tag and useRef on the current value, it only returns the filename prefixed with 'C:\fakepath...' ImportExport Component: ...

Retrieve the $scope object within an isolated directive

Is there a way to modify a $scope variable from within an isolated directive? I've experimented with the '@, =, &' syntax in the directive scope but haven't been successful. Here's a simplified version of my code: JS app.co ...

Filtering objects in AngularJS is a complex task, especially when you need to be able to search for a specific value but also consider if that value exists

Struggling to convey my thoughts in English, but here it goes. Imagine two objects linked by colorid: $scope.fruits = {{name:"apple",colorid:"1"},etc}; $scope.colors = {{id:"1",value:"red"}; I've created a table with search and filter function ...

Trouble with Express.js and Mongoose: Issue with find() method not returning results for specified variable

For the task I'm working on, my goal is to display items that are only visible to the user who posted them. To manage sessions, I am using Passport.js. The code I have written seems to be functioning well up until the end. app.get('/latestp ...

Selecting a database design pattern for varying database types

After creating a class to manage interactions with my database, I realized that I need separate classes for two different modes: admin and client. class MyDatabase { connect() { /* ... */ } } So, I decided to create two new classes: class MyDatabaseAd ...

Using the DatePicker component with non-escaped Latin alphabet characters in date-fns for ReactJS

While attempting to integrate the DatePicker component from Material UI into my React project, I encountered an error. Although many attributed the issue to a version discrepancy, what ultimately resolved the problem for me was assigning a value to the Da ...

Is there something incorrect with the incrementation in JavaScript?

for (let i = 0; i < 5; ++i){ alert(i); } for (let i = 0; i < 5; i++){ alert(i); } Both of these constructs get the same result: 0, 1, 2, 3, 4. But what are the underlying differences between them? And does the choice of increment in a for l ...

Generating a mesmerizing light streak illusion through real-time adjustments to the curvature of a TubeBufferGeometry

I am working on a third person game using react-three-fiber and I am looking to incorporate a trailing light effect that follows the player's movements. The idea is to have this light trail disappear after some time, so my initial plan involved using ...