Can you identify the issue in this Three.js skybox code?

My attempt to create a SkyBox with ThreeJS code was unsuccessful. Instead of rendering properly, it quickly flashed for a second and then turned black. The code I used is shown below:

<html>
<head>

</head>
<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        camera.position.z=5;

        var geometry=new THREE.CubeGeometry(10000,10000,10000);
        var cubeMaterials=camera
        [
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/grass-texture.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide})
        ];

        //var cubeMaterial=new THREE.MeshBasicMaterial(cubeMaterials);
        var cube=new THREE.Mesh(geometry,cubeMaterials);
        scene.add(cube);

        renderer.render(scene,camera);


    </script>
</body>
</html>

I am unsure of why the above code is not functioning correctly. Can someone identify the issue within this code snippet?

Answer №1

    const cubeMaterials = camera
    [

This statement is incorrect.

Visit this link for more information on Cube Texture Loader in Three.js documentation.

Answer №2

Make sure that the rendering is done only after all textures are loaded. I have made changes to your code by incorporating the LoadingManager to provide you with a potential solution.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry=new THREE.CubeGeometry(10000,10000,10000);

const manager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(manager);

const tex1 = loader.load( 'https://threejs.org/examples/textures/crate.gif' );
const tex2 = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );

manager.onLoad = function() {

const cubeMaterials= [
new THREE.MeshBasicMaterial({map:tex1, side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:tex1, side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:tex1, side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:tex2, side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:tex2, side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:tex2, side:THREE.DoubleSide})
];

const cube=new THREE.Mesh(geometry,cubeMaterials);
scene.add(cube);

renderer.render(scene,camera);

};
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e1fde7f0f0d5a5bba4a4a2bba4">[email protected]</a>/build/three.js"></script>

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

The login page continues to show an error message for incorrect credentials unless the submit button is clicked

My current project involves a React component called "Signin.js". Within this component, there are login input fields as I am working on creating a login system using Node.js, Express.js, and MySQL. To achieve this, I have set up a post request that sends ...

Modify a data value when another one is updated

Within my Vue.js data, I have a component that generates form inputs. You can view a live version of this component here. The data structure is as follows: data: { providerData: { archive_cost: { legend: 'Warehouse cost&apos ...

Typescript and Mongoose Schema - Common Design Mistakes

I am encountering two issues while defining a schema using mongoose and typescript. Below is the code snippet I'm having trouble with: import { Document, Schema, Model, model} from "mongoose"; export interface IApplication { id: number; name ...

A method for performing precise division on numbers in JavaScript, allowing for a specific precision level (such as 28 decimal places)

I've searched extensively for a library that can handle division operations with more than 19 decimal places, but to no avail. Despite trying popular libraries like exact-math, decimal.js, and bignumber.js, I have not found a solution. How would you ...

Using Jquery to run a jquery script stored in a variable within jQuery syntax

This question may seem a bit confusing, so allow me to explain further. I am trying to execute a jquery script that is written in a text file obtained through an ajax request. For example, the code I receive from the ajax request looks like this: ($($(" ...

What could be the reason for my NextJS 'getStaticProps' function not executing as expected?

My primary reason for using Next.js is the 'getStaticProps' function, but unfortunately, it seems to not be running as expected. I attempted to create a new app from scratch using "npx create-next-app@latest" with no success. I then tried withou ...

Using ServiceWorker with React and Typescript

If you are working on a javascript-based React project, adding a Service Worker is simply a matter of updating serviceWorker.unregister() to serviceWorker.register() in index.jsx. Here is an example project structure: - src |- index.jsx |- serviceWo ...

Press the delete button located on the child component to trigger an action in the

I'm in the process of developing a simple to-do application from scratch in order to familiarize myself with ReactJS. One challenge I'm facing is implementing the delete functionality for todos, as I want to keep the button within the Todo compon ...

Refresh tab controllers in Angular JS on every click event

Is there a way to refresh the tab controller every time a tab is clicked? Here's the current code: $scope.tabs = [ { id: 'tab1', title: 'tab1', icon: 'comments', templateUrl: 'tab1/tab1.tpl.html&ap ...

End of ImageButton tag

I am currently working on this code : <div runat="server" class="slide"> <img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' /> <div id='details<%# Eval("C ...

Is it possible for my Java Applets to be compatible with Chrome 45?

Our web application utilizes three Java Applets for various functions. We are aware that Chrome 45 will no longer support NPAPI. Upon visiting Oracle's page, it is stated that Java Plugin depends on NPAPI. I have tested my Applets on Chrome 43 and 4 ...

Safari browser experiencing issues with Google Maps API functionality

Whenever I perform the following actions: var map = new GMap2(document.getElementById(mapCanvas)); var directions = new GDirections(map); directions.load("INSERT DIRECTIONS HERE"); Everything functions properly when using Firefox on a Linux platform, but ...

Firestore - Using arrayUnion() to Add Arrays

Is there a way to correctly pass an array to the firebase firestore arrayUnion() function? I encountered an issue while attempting to pass an array and received the following error message: Error Error: 3 INVALID_ARGUMENT: Cannot convert an array value ...

Looking to transfer the name of the clicked link to a modal in order to execute a PHP/SQL query within the modal window

I am currently utilizing Twitter Bootstrap's modal feature. Within my table, I am mapping MAC addresses to vendor names using the following code: <tbody> <?php foreach ($rowarr as $k => $v) { ?> & ...

Having trouble with the anchor tag not functioning properly

I'm looking to create a unique video experience by having an iframe video play automatically and opening a third-party video player in a lightbox style when clicked. Currently, the video autoplays, but I want it so that when the user clicks on the vi ...

Utilize a single script to control various buttons

At work, I have a soundboard that I like to use to prank my coworkers. The soundboard has multiple buttons, each playing a different sound when clicked. Currently, I have to write a separate script for each button, which has led to 47 scripts on the page. ...

Debugging Success Message Display Issue in JavaScript

$.ajax({ type: "POST", url:'/saveLayout', data: {id : layoutId, section : arrSection}, success: function(response){ $('#successMsg').addClass("errorBox"); document.getEleme ...

Having difficulty invoking a JavaScript function through PHP

My goal is to achieve the following: <html> <script type="text/javascript" src="jquery.js"></script> <a id="random">before</a> <script> function test(a) { document.getElementById('random').innerHTM ...

Learn how to implement code splitting in a React application with webpack by exporting components using the syntax "export * from '...'"

In my React app, I recently implemented code splitting which has been working well. However, when analyzing the bundle size, I noticed an issue with how my components folder is loaded in the initial chunk. It includes all components, even those that are on ...

Can anyone explain why I keep encountering an endless loop when using react hooks?

Having a bit of trouble with fetching data from a JS file that is mimicking an API with some endpoint methods. When I console log the data, everything seems fine, but for some reason, I keep running into an infinite loop when using hooks. I've tried t ...