Currently grappling with a challenge in ThreeJS as I embark on a basic crash course. My hurdle lies within the Shader, specifically when attempting to texture a cube. Here's a snippet of my code where I create the cube:
var geometry = new THREE.BoxGeometry(1, 1, 1);
var cubeTexture = new THREE.TextureLoader();
cubeTexture.load("img/texture01.jpg");
var cubeMaterials = [
new THREE.MeshBasicMaterial({map: cubeTexture, side: THREE.DoubleSide}), // Right
new THREE.MeshBasicMaterial({map: cubeTexture, side: THREE.DoubleSide}), // Left
new THREE.MeshBasicMaterial({map: cubeTexture, side: THREE.DoubleSide}), // Top
new THREE.MeshBasicMaterial({map: cubeTexture, side: THREE.DoubleSide}), // Bottom
new THREE.MeshBasicMaterial({map: cubeTexture, side: THREE.DoubleSide}), // Front
new THREE.MeshBasicMaterial({map: cubeTexture, side: THREE.DoubleSide}) // Back
]
var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(cubeMaterials));
Upon execution, an error surfaces:
three.min.js:49 THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:262: 'mapTexelToLinear' : no matching overloaded function found
ERROR: 0:262: '=' : dimension mismatch
...
// Truncated for brevity
...
D = min( floor( D ) / 255.0, 1.0 );
74: return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
75: }
76: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184);
// More shader-related errors follow after this...
Even after experimenting by using only the material array and ditching THREE.MeshFaceMaterial, the issue persists. It seems likely that this error is tied to either the Shader or perhaps my webGL setup. Unfortunately, I'm at a loss on how to rectify it.
Your insights and guidance would be greatly appreciated. Thank you!