I'm attempting to generate a cube using three.js with unique textures on each face, resembling a dice. This is being developed in a sandbox environment where a rotating cube with dice images (1-6) on each side will be created. Once completed, I plan to integrate this into a browser-based game. While I have only tested this example in Chrome, I am considering switching to a canvas renderer for wider browser compatibility.
After exploring various questions on Stack Overflow and conducting extensive research online, I thought I had the solution (which seemed relatively straightforward), but I am struggling to make it work.
Although I am new to three.js, I have prior experience with JavaScript.
Some of the resources I consulted include:
Stack Overflow - three.js cube with different texture on each face
Stack Overflow - three.js cube with different texture faces
evanz - Test three.js cube
and enriquemorenotent.com - three.js building a cube with different materials on each face
Here is my code:
[Insert code snippet here]The error I am encountering is:
Uncaught TypeError: Cannot read property 'map' of undefined
on line 19546 of three.js (non-minified version) which refers to the bufferGuessUVType(material) function where 'material' is undefined. This suggests that there might be an issue with one or more of my material definitions.
I am using three.js r58.
Currently, there is only JavaScript code without any HTML or CSS components.
While I can successfully create a rotating cube with the same image on all sides, I am facing difficulties in assigning different images to each face, specifically images of dice dots from 1 to 6.
If necessary, I can create a fiddle with more time.