我是ThreeJS的新手，目前正在执行一个基本的速成课程，但在尝试将纹理应用到立方体时卡在着色器上。下面是我的代码片段，创建了多维数据集：
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));
当我运行它时，我收到了这个错误：
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)
我已尝试仅使用材质数组（删除THREE.MeshFaceMaterial），但问题仍然存在。所以我认为这个错误与Shader或我的webGL有关，但我不知道从哪里开始修复它。
我希望得到你的帮助。非常感谢你！
答案 0 :(得分：0)
MeshFaceMaterial现已弃用。在ThreeJS Deprecated List中查看，其中显示＆＃34;使用数组代替＆＃34;。
因此，不要在其中创建带有数组的新MeshFaceMaterial，而只需在第二个参数中传入数组：
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);