I am attempting to create a skybox, yet it seems like I am overlooking a crucial element

Currently, I am attempting to create a skybox but have encountered difficulties with various tutorials. Initially, I tried to use an array approach to pass parameters for the material based on a previous example, but it seems that the method has been updated to TextureLoader() since then. Below is my code snippet:

// Implementing a skybox
    var skyBoxMaterials = [
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader('images/skybox/sky1.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader('images/skybox/sky2.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader('images/skybox/sky3.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader('images/skybox/sky4.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader('images/skybox/sky5.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader('images/skybox/sky6.jpg') }),
  ];
  var skyBoxGeom = new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1);
    skyBox = new THREE.Mesh(skyBoxGeom, skyBoxMaterials);
    skyBox.position.set(0, 25.1, 0);
    scene.add(skyBox);

Upon running the code, I encounter the error "Uncaught TypeError: Cannot read property 'x' of undefined" in the console, persisting until the server is stopped. Despite searching through examples, documentation, and similar questions, I have not found a solution. Any recommendations?

UPDATE: After further investigation, I came across a suitable example in the documentation under cubeGeometry, although the skybox still fails to render. Here is the updated code snippet:

// Creating a skybox
  var loader = new THREE.CubeTextureLoader();
  loader.setPath('images/skybox/');

  var textureCube = loader.load([
       'sky1.jpg', 'sky2.jpg',
        'sky3.jpg', 'sky4.jpg',
         'sky5.jpg', 'sky6.jpg'
     ]);

  var skyMaterials = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: 
  textureCube });
  var skyBoxGeom = new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1);
  skyBox = new THREE.Mesh(skyBoxGeom, skyMaterials);
  skyBox.position.set(0, 25.1, 0);
  scene.add(skyBox);

No error messages are present in the console, yet the cube fails to render. Interestingly, other items in the scene render correctly.

Answer №1

To utilize the .background property of THREE.Scene(), you can apply cube textures directly.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 300 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls( camera, renderer.domElement );

var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin( "" );
loader.setPath( 'https://threejs.org/examples/textures/cube/skybox/' );

var cubeTexture = loader.load( [
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
] );

scene.background = cubeTexture;

render();

function render() {
  requestAnimationFrame(render);
  renderer.render( scene, camera );
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer №2

Did you get your hands on the Three.js Master file? It contains all the working examples, support files, textures, and assets you need. This means you can kickstart your project with a functional example and expand from there. Ensure you run them from your local server (as you probably already know based on your previous post). There are specific examples that could be beneficial to you, such as Panorama Cube. Within the download's examples directory, you'll discover a file named 'webgl_panorama_cube.html' which will serve as your local copy of this example.

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

What is the most efficient way to prevent duplicate items from being added to an array in a Vue 3 shopping cart

I currently have a functional shopping cart system, but I am facing an issue where it creates duplicates in the cart instead of incrementing the quantity. How can I modify it to only increment the item if it already exists in the cart? Also, I would like t ...

The error message "TypeError: e.preventDefault is not a function" indicates that

I'm fairly new to JavaScript and jQuery, and I've incorporated two jQuery plugins into my code - jQuery form validator and jQuery form ajaxSubmit. Initially, everything was working fine with normal AJAX submission until I needed to post a file, w ...

Storing Scrapy results in separate JSON entities using a while loop

Using a while-loop to scrape various fields on a webpage, I aim to store the output for each loop iteration in separate json objects. While this process functions flawlessly on my local machine with Scrapy 0.24.6 and Python 2.7.5, it encounters issues on ...

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

When attempting to render 2 components based on the results of 2 fetch calls using Promise.allSettled(), I encounter difficulties if one of them throws an error

I have encountered an issue while using Promise.allSettled() in sending two fetch calls. I am rendering components based on the result - a component with data if it is fulfilled and an error component if rejected. However, when one of the fetch calls throw ...

What is the process for converting variables from browser script to Python code?

I ran the script below in my browser webdriver.execute_script("document.getElementsByClassName('bulk_item').length") My goal is to have the number that the script returns stored in a variable called elem for easy access. However, simp ...

Finding an element that lacks both a class and an id, and is not consistently present - what's the trick?

Currently, I am faced with a predicament in my code where a <li> element only appears under specific conditions, making it difficult to apply positioning. This element lacks an id and class attribute, which prevents me from targeting it accurately us ...

Converting SOAP to JSONX using XSLT with array complications

Currently, I am delving into the realm of XSLT and I find myself in need of assistance. Specifically, I am tasked with transforming a SOAP message into Jsonx format. The challenge lies in the "body" field where I need all children to be of type array, exce ...

Adding an image within the body of text in a Django model, where both the text and image coexist

I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...

How to remove the black border on a material-ui button

I am currently working with the material-ui datepicker and buttons. Whenever I click on the datepicker icon to select a date or any of the buttons, I notice a black border appearing. How can I remove this black border from the design? https://i.sstatic.ne ...

(Processing) Eliminating Previously Utilized Element from Array

Apologies for the poorly worded title. I'm working on a "War" game in Processing for my Programming course. I need help modifying my code to remove each used card from the deck/array. I've come across some references to "ArrayList" in online post ...

Navigating through events within React

I'm working on creating a login page, where upon clicking the submit button it should navigate to the Dashboard page. However, I seem to be encountering an issue with my code. After entering login details and clicking on the login button, the details ...

Controlling LED lights using Johnny-Five and Arduino in NW.js

I have a setup with my board that includes two buttons (each with pull-up resistors) and two LEDs. My goal is to make each button activate its corresponding LED while deactivating the other one. Here's the code I'm using: var five = require(&ap ...

What are the distinctions in how jQuery behaves when an element is assigned to a variable versus in Javascript?

I've noticed that when I assign a jQuery element to a variable, it doesn't match the element in a comparison. However, if I assign a JavaScript element, it does... test1 = $(".the_div"); console.log(test1 == $(".the_div")); // This logs false ...

The failure of jQuery AJAX error callback to execute

I'm currently facing an issue with an AJAX call that I have in my code. Here's the code snippet: $.ajax({ type: "get", url: "xxx.xxx.xxx/xxx.js", dataType: 'jsonp', success: function(data) { ...

Error message encountered: 'GlobalStyles' is not a valid export from the module '@material-ui/system' (referenced as 'SystemGlobalStyles')

./node_modules/@material-ui/core/GlobalStyles/GlobalStyles.js Error encountered while trying to import: 'GlobalStyles' is not exported from '@material-ui/system' (imported as 'SystemGlobalStyles'). I am currently grappling wi ...

The URL switches back and forth from "localhost:8100" to "localhost:8100/some-route" while displaying a blank white screen

After working on my ionic app without any issues, I restarted my computer only to find that when I tried to run the project again, I was met with a blank white screen on both the browser and device. Even when I reverted back to an earlier branch, the URL c ...

Unlimited scrolling with jQuery/Ajax

I am currently working on implementing infinite scroll functionality using ajax, php, and mysql in my web application. However, I am facing difficulty in loading new content only when the user reaches the end of the page. Currently, all the data is loaded ...

Embedding Google+ Sharing in an iframe

I'm currently working on a web application that needs to be compatible with PC, tablets, and mobile phones. I'm interested in integrating Google+ Sharing into the app. However, it appears that when using the url , there are issues with blocking ...

Instructions for selecting a checkbox using boolean values

According to the HTML specification, you should use the checked attribute in the <input type="checkbox"> tag to indicate that it is checked. However, I only have a boolean value of either true or false. Unfortunately, I am unable to manipulate the b ...