ThreeJS: 'mapTexelToLinear' : no matching overloaded function found

Question

I'm new to ThreeJS and currently following a basic crash course, but stuck at the Shader when trying to apply texture to a cube. Below is a snippet of my code, creating 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));

When I run it, I got this error:

three.min.js:49 THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:262: 'mapTexelToLinear' : no matching overloaded function found
ERROR: 0:262: '=' : dimension mismatch
ERROR: 0:262: 'assign' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'
 1: precision highp float;
2: precision highp int;
3: #define SHADER_NAME MeshBasicMaterial
4: #define GAMMA_FACTOR 2
5: #define USE_MAP
6: #define DOUBLE_SIDED
7: uniform mat4 viewMatrix;
8: uniform vec3 cameraPosition;
9: #define TONE_MAPPING
10: #ifndef saturate
11:     #define saturate(a) clamp( a, 0.0, 1.0 )
12: #endif
13: uniform float toneMappingExposure;
14: uniform float toneMappingWhitePoint;
15: vec3 LinearToneMapping( vec3 color ) {
16:     return toneMappingExposure * color;
17: }
18: vec3 ReinhardToneMapping( vec3 color ) {
19:     color *= toneMappingExposure;
20:     return saturate( color / ( vec3( 1.0 ) + color ) );
21: }
22: #define Uncharted2Helper( x ) max( ( ( x * ( 0.15 * x + 0.10 * 0.50 ) + 0.20 * 0.02 ) / ( x * ( 0.15 * x + 0.50 ) + 0.20 * 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) )
23: vec3 Uncharted2ToneMapping( vec3 color ) {
24:     color *= toneMappingExposure;
25:     return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
26: }
27: vec3 OptimizedCineonToneMapping( vec3 color ) {
28:     color *= toneMappingExposure;
29:     color = max( vec3( 0.0 ), color - 0.004 );
30:     return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );
31: }
32: 
33: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); }
34: 
35: vec4 LinearToLinear( in vec4 value ) {
36:     return value;
37: }
38: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
39:     return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );
40: }
41: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
42:     return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );
43: }
44: vec4 sRGBToLinear( in vec4 value ) {
45:     return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.w );
46: }
47: vec4 LinearTosRGB( in vec4 value ) {
48:     return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.w );
49: }
50: vec4 RGBEToLinear( in vec4 value ) {
51:     return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
52: }
53: vec4 LinearToRGBE( in vec4 value ) {
54:     float maxComponent = max( max( value.r, value.g ), value.b );
55:     float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
56:     return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
57: }
58: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
59:     return vec4( value.xyz * value.w * maxRange, 1.0 );
60: }
61: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
62:     float maxRGB = max( value.x, max( value.g, value.b ) );
63:     float M      = clamp( maxRGB / maxRange, 0.0, 1.0 );
64:     M            = ceil( M * 255.0 ) / 255.0;
65:     return vec4( value.rgb / ( M * maxRange ), M );
66: }
67: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
68:     return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
69: }
70: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
71:     float maxRGB = max( value.x, max( value.g, value.b ) );
72:     float D      = max( maxRange / maxRGB, 1.0 );
73:     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, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
77: vec4 LinearToLogLuv( in vec4 value )  {
78:     vec3 Xp_Y_XYZp = value.rgb * cLogLuvM;
79:     Xp_Y_XYZp = max(Xp_Y_XYZp, vec3(1e-6, 1e-6, 1e-6));
80:     vec4 vResult;
81:     vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
82:     float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
83:     vResult.w = fract(Le);
84:     vResult.z = (Le - (floor(vResult.w*255.0))/255.0)/255.0;
85:     return vResult;
86: }
87: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
88: vec4 LogLuvToLinear( in vec4 value ) {
89:     float Le = value.z * 255.0 + value.w;
90:     vec3 Xp_Y_XYZp;
91:     Xp_Y_XYZp.y = exp2((Le - 127.0) / 2.0);
92:     Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
93:     Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
94:     vec3 vRGB = Xp_Y_XYZp.rgb * cLogLuvInverseM;
95:     return vec4( max(vRGB, 0.0), 1.0 );
96: }
97: 
98: vec4 envMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
99: vec4 emissiveMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
100: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
101: 
102: uniform vec3 diffuse;
103: uniform float opacity;
104: #ifndef FLAT_SHADED
105:    varying vec3 vNormal;
106: #endif
107: #define PI 3.14159265359
108: #define PI2 6.28318530718
109: #define PI_HALF 1.5707963267949
110: #define RECIPROCAL_PI 0.31830988618
111: #define RECIPROCAL_PI2 0.15915494
112: #define LOG2 1.442695
113: #define EPSILON 1e-6
114: #define saturate(a) clamp( a, 0.0, 1.0 )
115: #define whiteCompliment(a) ( 1.0 - saturate( a ) )
116: float pow2( con
Pe  @   three.min.js:49
qg  @   three.min.js:65
acquireProgram  @   three.min.js:75
t   @   three.min.js:153
k   @   three.min.js:156
Xd.renderBufferDirect   @   three.min.js:179
n   @   three.min.js:152
u   @   three.min.js:151
Xd.render   @   three.min.js:186
render  @   app.js:45
GameLoop    @   app.js:53
(anonymous)

I have tried using the material array only (removing the THREE.MeshFaceMaterial), but the problem still persists. So I figure this error has something to do with the Shader or my webGL, but I don't know where to start fixing it.

I hope to receive your help. Thank you very much!

Answer 1

MeshFaceMaterial is now deprecated. See it in ThreeJS Deprecated List , where it says "use an array instead".

So, instead of creating a new MeshFaceMaterial with an array in it, just pass in the array in the second argument:

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, cubeMaterials);