Need help adding a cube texture background

Questions
1

I would greatly appreciate any assistance that anyone can provide with respect to adding a cubetexture background to a three.js project. I used the three.js web editor for the initial design, so the resulting code and files look very different from what I’m finding in existing online documentation, tutorials and examples. Nothing that I have tried works.

Please advise as to how I can add a rotating cube texture background. The image files for the cube texture are located in the github repository.

github repo: https://github.com/joshstruve/threejsproject

live demo: https://joshstruve.github.io/threejsproject/

Any advice or assistance would be greatly appreciated. To be clear, this is my first three.js project.

2

Here’s an example: https://threejs.org/examples/?q=cube#webgl_materials_cubemap
And here’s a code that may help you with adding the cubemap:

(Lines 43 and 57)

3

Thank you for your feedback. I tried this solution, as well as others, and can’t get this to work. I’m starting to think that it would be easier to start from scratch instead of using the web editor. I notice that the resulting app.json file has a “Texture” background set, but that is not showing either.

4

Also - try using square / power-of-two textures for the cubemap.
I noticed you are using rectangular texture for each side. I didn’t have a chance to go through the cubemap code in Threejs, but using non-square textures may break something there (afair it does break PMREMGenerator for example and all you’d see is black texture.)