Unable to load skybox using CubeTextureLoader in three.js

I am struggling to figure out what I am doing wrong in this situation. My goal is to load a simple skybox, but I am not seeing any results. Most solutions I have found reference the THREE.ImageUtils.loadTextureCube method which is now deprecated. I can't seem to locate any examples using the new THREE.CubeTextureLoader.

It's worth noting that I am utilizing this in conjunction with the Three.js YouTube loader example available at: 

var loader = new THREE.CubeTextureLoader();
textureArray = ['galaxy_starfield.png', 'galaxy_starfield1.png', 'galaxy_starfield2.png', 'galaxy_starfield3.png', 'galaxy_starfield4.png', 'galaxy_starfield5.png'];
loader.setPath('./img/');
var textureCube = loader.load([
    'galaxy_starfield.png', 'galaxy_starfield1.png', 'galaxy_starfield2.png', 'galaxy_starfield3.png', 'galaxy_starfield4.png', 'galaxy_starfield5.png'
]);

var skyMaterial = new THREE.MeshBasicMaterial({
    color: 0x444444,
    map: new THREE.TextureLoader(textureArray),
    opacity: 0,
    transparent: true
});

var skyGeometry = new THREE.BoxGeometry(2000, 2000, 2000);

var skyMesh = new THREE.Mesh(skyGeometry, skyMaterial);
scene.add(skyMesh);

I'm unsure of where I went wrong. There are no visible errors (aside from one caused by ad blocker). Could there possibly be an issue with CubeTextureLoader?

All the references I've come across involve ImageUtils.loadTextureCube:

comparing methods of creating skybox material in three.js

Three.js skybox not loading completely or at all

javascriptthree.js

Answer №1

According to the instructions provided in the documentation, it is recommended to create the material using an envMap property assigned with your loaded cubeTexture.

var skyMaterial = new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    envMap: textureCube,
    side: THREE.BackSide
} );

The use of the side property ensures that the material is visible from within the cube.

In addition, there is no need for the skybox to be excessively large. Simply align it with your camera's position before each render.

skyBox.position.copy(camera.position);

Answer №2

While working on this issue, I encountered the same problem but managed to find a solution. The TextureLoader operates based on screen width and height, so if you are dealing with a resolution of 1920x1080, try implementing the following:

import star from ’ ‘https://cdn.spacetelescope.org/archives/images/screen/heic1310a.jpg’';
const skyboxTextureLoader = new THREE.CubeTextureLoader();
scene.background = skyboxTextureLoader.load([star, star, star, star, star, star]);

You can also use an image with dimensions of 1280px by 1280px. This should resolve the issue.

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

Using Socket.io within express routes

Can I incorporate socket.io into an express route? This is how I envision it: Server app.js: app.get('/cool_page/', users.cool_page); users.cool_page: if (5 > 3) { socket.emit('first_connection', "true statement"); } Clien ...

javascriptnode.jsexpresssocket.io

Tips for navigating through an array incrementally in a Controller using input provided by the user in the View

Greetings, I am currently working on a small website project using WAMPserver. The site is structured following an MVC design pattern. In one part of the process, I generate an array of strings in the controller. My goal is to display each element of this ...

phpjavascriptajax

What could be causing the controller to malfunction when the script is placed outside of the index.html file?

I find myself caught up in a dilemma. Whenever I attempt to replicate the tutorial from , by copying and pasting the code below: <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/a ...

javascriptangularjsangularjs-controller

How can you customize the bottom and label color for Material-UI TextField when in error or when in focus?

I need to customize the color of my Material UI TextField component for the following states: error focused Currently, I am using version 3.8.1 of @material-ui/core and working with the <TextField /> component. I would like to achieve this withou ...

javascriptreactjsecmascript-6material-ui

I'm having trouble understanding how to utilize startAt and endAt in Firebase version 9

Trying to implement geo querying in my firestore db with the new version of firebase has been challenging. The code examples provided in the documentation reference an older version, making it difficult for me to understand how to use ".startAt" and ".endA ...

javascriptfirebasegoogle-cloud-firestore

Creating a textarea with tagging functionality akin to Youtube

I'm interested in developing a textarea that emulates the tagging box on Youtube. The desired functionality includes: Ability to input any text Automatically turning words into tags upon hitting space Capability to delete tags using backspace or by ...

javascriptjqueryhtmlcss

app.js is not properly identifying the navigator's language

This is the code snippet for my controller app.controller('languagesCtrl', function($scope) { var lang = window.navigator.language || window.navigator.userLanguage; if (lang === 'it' || 'it-it' || 'it-IT') { ...

javascriptangularjsangularjs-scopeoperators

Locally hosted website failing to transfer login details to external domain

Having trouble with an ajax call that is supposed to retrieve data from a web page, but instead returns a jQuery parse Error. Even though I can access the page directly, the ajax call doesn't seem to be working and storing the result properly. Below ...

javascriptjqueryasp.netajaxcross-domain

I'm working on updating a field within a Firestore document using ReactJS

I am encountering an issue while attempting to update a field within a document in Firestore using ReactJS. Interestingly, others have successfully done it without any errors. app.js const app = initializeApp(firebaseConfig); const auth = getAuth(app); co ...

javascriptreactjsfirebasegoogle-cloud-firestore

How do I show a variable within my react-native render function?

I attempted to showcase information fetched by a function in my React Native rendering application. Even though I successfully retrieved the data, I am encountering issues when trying to display it on the app. This is the snippet of my code: import Reac ...

javascriptreactjsreact-native

What is the explanation for the outcome "-9 >> 2 = -3"?

What is the reason behind 9 >> 2 = 2 compared to -9 >> 2 = -3 ? Wouldn't it make more sense for it to be -2 instead? ...

javascript

Ways to align this element in the middle

<div id="1" style="display:block"> <div class="radio"> <label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label> </div> <div class="radio"> <label>< ...

javascripthtmlcss

Press the identical button arrangement with selenium using python

How do I click on buttons with the same classes one by one? This is the Python code I am using: clk_but1 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]"))) driver.execute_s ...

javascriptseleniumbootstrap-4

Utilizing JavaScript with an ASP.NET dropdownlist: A step-by-step guide

Although I'm not currently using ajax.net, I am open to exploring it as a potential solution. Currently, I have an auto-complete control on my screen that is populating an asp.net dropdownlist with values through JavaScript (jQuery). In order to make ...

asp.netjavascriptjqueryajaxwebforms

Tips for retrieving the newly created instance in Sequelize

I have been experimenting with sequelize for my new project, but I am facing difficulties in returning the created instance. Any help would be appreciated. Below is my create method : exports.create = (req, res) => { let user = { "user ...

javascriptnode.jspromiseormsequelize.js

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

Exploring how to incorporate Express middleware into Firebase Functions for handling HTTPS requests

Encountering a challenge while using Express middleware with Firebase Functions. In this sample, a function is linked to the app() instance as shown below: app.get('*', (req, res) => { res.send(`Hello ${req.user.name}`); }); exports.autho ...

javascriptexpressfirebasegoogle-cloud-functions

Allow clicking through the iframe, while still able to interact with its contents

I am facing a challenge of making an iframe click-through, while ensuring that the body of the iframe remains clickable. I have attempted to achieve this using the following code: iframe.style.width = '100%' iframe.style.height = '100%&apos ...

javascripthtmlcssiframeclick-through

Trouble with using $.ajax to call a PHP function

Hey everyone, I hate to ask for help but I'm really stuck on this issue. I've tried everything and followed all the scenarios on this site, but I just can't seem to get it working. I even added alerts and echoes, but the function doesn' ...

javascriptphpjqueryajax

Conceal form after submission - Django 1.6

I'm currently working on a Django 1.6 project where I have this form: <form action="/proyecto/" method="POST" id="myform"> {% csrf_token %} <table> <span class="Separador_Modulo">& ...

javascriptjqueryhtmldjango