Having trouble with CubeTextureLoader()? Perhaps I'm missing a step somewhere

Below is the code I am working with:

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

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

// Cube
var Cubegeometry = new THREE.BoxGeometry(1, 1, 1);
const CubeImgTexture = new THREE.CubeTextureLoader().setPath('imgs/textures/cube/').load([
  's1.png', 's5.png',
  's2.png', 's4.png',
  's3.png', 's6.png'
]);
var Cubematerial = new THREE.MeshStandardMaterial({
  map: CubeImgTexture
});
var CubeMesh = new THREE.Mesh(Cubegeometry, Cubematerial);
scene.add(CubeMesh);

camera.position.z = 5;
controls.update();

var animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

After running this code, the result is a blank screen and an error message stating that "Argument 6 is not valid for any of the 6-argument overloads."

https://i.sstatic.net/Zubx4.png

I am unsure of what this error implies. Can someone provide some insight?

Answer №1

The issue lies in this code block:

var Cubematerial = new THREE.MeshStandardMaterial({
  map: CubeImgTexture
});

A problem arises because you have not initialized a variable named CubeImgTexture. If your intention is to pass a cubeTexture into the .map property, it will lead to errors as the map property only accepts a regular texture. Perhaps you meant to assign it to the .envMap property instead?

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 Angular application is experiencing issues following an update from version 11 to version 12

I recently updated my Angular project following these steps: npm cache clean --force npm uninstall @angular/cli@latest @angular/core@latest npm install -g @angular/cli@latest @angular/core@latest After completing the above steps, I proceeded to delete th ...

What is the highest image size that desktop Chrome can accommodate?

Let's delve into a specific scenario amidst the vast possibilities. Assume the following technical specifications: Browser: Chrome Latest (Desktop) Hardware: Windows Standard PC with default Intel Graphics card Ram: 8GB Processor: i7 @ 3.40 GHz The ...

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

Executing function after completion of ajax call

I have 2 buttons and 3 links that trigger an ajax request. I want to display an alert only when the request initiated by one of the buttons is completed, but not when a link is clicked. Below is my code: HTML: <button id="ajax1">Ajax 1</button&g ...

Obtain Outcome from a Nested Function in Node.js

I'm grappling with the concept of manipulating the stack in JS and hoping this exercise will provide some clarity. Currently, I'm attempting to create a function that makes a SOAP XML call, parses the data, and returns it when called. While I c ...

I'm having trouble seeing the values displayed above the bars in Chart.js

Recently, I started learning about chart.js and encountered an issue where the bars were not displaying the values on top, along with a question on how to add a percentage sign after the value. I'm using chart.js version 3.3.2 from a CDN. Any assistan ...

Ways to achieve outcomes from functions employing concatMap within rxjs?

When calling two functions, I make use of fn1 and fn2. To execute them one after the other, I utilize concatMap. I choose not to use exhaustMap and switchMap as they can result in nested "callback-hell". exhaustMap(() => fn1().pipe( swit ...

Integrating Watson Conversation with Oracle Database

Hello everyone, I am currently working on a project where I need Watson to fetch a response manually set from our Oracle Databases. To achieve this, I am using async to access the database sequentially and return the response. Initially, I faced an issue ...

I can't figure out why I keep receiving an "Uncaught ReferenceError: THREE is not defined" message from three.js, especially after I made sure to include a requirejs shim

My code is throwing an error that says: Uncaught ReferenceError: THREE is not defined module game { export class Add3DScene extends dragonwings.Command { @inject('ResponsiveDiv') protected _responsiveDiv: components.Res ...

Failed to load CSS file in nodeJS application

I followed a tutorial to create a backend app using nodeJS and Express. My MongoDB connection with Mongoose is working fine. However, I am facing issues when trying to add a simple front-end using html/ejs/css. The endpoints are loading on localhost but on ...

The form is not being submitted due to issues with JavaScript/JQuery

In the process of creating a JavaScript function that can detect links in text and trigger a JqueryUI dialog box with options like "Yes", "No", and "Cancel", I encountered an issue. While everything seemed to be functioning properly - displaying the dial ...

Three.js - Exploring Camera Rotation and Transformations

I have a three.js scene where I can add and edit objects. Recently, I added a checkbox for "Rotate Camera" which is working well. However, the issue I am facing is that the transformControls attached to the object seem to rotate differently: when I stop th ...

Puppeteer is unable to detect the node.js handlebars helpers

I'm utilizing puppeteer in NodeJs to generate a PDF file. I use handlebars to render the template and pass variables during compilation for handlebars to access them. Here is the current code snippet: const browser = await puppeteer.launch({ he ...

Transform Json data from JavaScript format to a format that PHP can understand

I have a collection of json files that I need to parse and extract information from in order to store it in a database using PHP. The issue I'm encountering is that these json keys do not have quotes around them, like: [{f:{v:11,ib:5,gh:"res",bfr:7, ...

Invoking a C# function inside a cshtml file

Having trouble calling a function in my CSHTML page. In the script of my CSHTML page : <script type="text/javascript" > //var sLoggedInUser = <%# GetSession_LoggedInIdUser() %>; $(document).ready(function () { ale ...

``Maybe there is a way to fix the issue of jQuery not functioning properly

I am currently working on integrating jquery with Reactjs to add a class on click event. The functionality works fine when the page is refreshed, but it stops working if I navigate to the page after clicking on any menu item without refreshing. How can I ...

Why does one image render while the other with the same src does not?

Has anyone encountered a situation where there are 2 img tags with the same src, "images/export.png", but one displays correctly while the other doesn't? Any insights on how this discrepancy can occur? https://i.sstatic.net/z6rnW.png Here's som ...

Securing your folders with Next Auth middleware

I am currently developing a NextJS application and have implemented routers at pages/dashboard/* that I need to secure. My goal is to restrict access to these routes only to authenticated users. I am utilizing Prisma for data management, with Google as the ...

How can I convert an SVG vector file into shapes for Three.js?

I'm looking to showcase a 2D vector map on a three.js webgl canvas using a wireframe material. The original map is in dwg format and needs to be converted to svg. However, I haven't been able to find any SVG importers for three.js. Is there a s ...

Displaying the URL of a link on the screen using jQuery

I am looking for a solution to add a link address after the link itself in a table containing reference links for our staff. I have used CSS to achieve this in the past, but the address was not copyable by users. Instead, I am interested in using jQuery&ap ...