A Geometry (pyramid) is defined here with four vertices and 4 faces -
var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vector3(0,100,0), new THREE.Vector3(-100,-100,100), new THREE.Vector3(0,-100,-100), new THREE.Vector3(100,-100,100));
geom.faces.push( new THREE.Face3( 0, 2, 1), new THREE.Face3( 0, 1, 3), new THREE.Face3( 0, 3, 2), new THREE.Face3( 1, 2, 3) );
geom.computeFaceNormals();
The RawShaderMaterial used for this geometry is shown below -
var geomMaterial = new THREE.RawShaderMaterial({
vertexShader: [
'precision highp float;',
'precision highp int;',
'uniform mat4 modelViewMatrix;',
'uniform mat4 projectionMatrix;',
'attribute vec3 position;',
'attribute vec2 uv;',
'varying vec2 interpolatedUV;',
'void main() {',
'interpolatedUV = uv;',
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'}'
].join('\n'),
fragmentShader: [
'precision highp float;',
'precision highp int;',
'uniform sampler2D texSampler;',
'varying vec2 interpolatedUV;',
'void main() {',
'gl_FragColor = texture2D(texSampler, interpolatedUV);',
'}'
].join('\n'),
uniforms: {
texSampler: {
type: 't',
value: new THREE.ImageUtils.loadTexture("images/test.png")
}
}
});
Despite having "images/test.png" accessible from the script, only a white pyramid is displayed without the expected texture.
Please advise on what could have caused this issue?
UPDATE:
After further investigation, it was discovered that providing UV mapping for the custom geometry is essential. This information has been incorporated as follows -
var uvs = [];
uvs.push(new THREE.Vector2(0.5, 1.0));
uvs.push(new THREE.Vector2(0.5, 0.0));
uvs.push(new THREE.Vector2(0.0, 0.0));
uvs.push(new THREE.Vector2(1.0, 0.0));
geom.faces.push( new THREE.Face3( 0, 2, 1));
geom.faceVertexUvs[0].push(uvs[0], uvs[2], uvs[1]);
geom.faces.push( new THREE.Face3( 0, 1, 3));
geom.faceVertexUvs[0].push(uvs[0], uvs[1], uvs[3]);
geom.faces.push( new THREE.Face3( 0, 3, 2));
geom.faceVertexUvs[0].push(uvs[0], uvs[3], uvs[2]);
geom.faces.push( new THREE.Face3( 1, 2, 3));
geom.faceVertexUvs[0].push(uvs[1], uvs[2], uvs[3]);
Despite the UV mapping inclusion, the issue persists with the white pyramid rendering and the additional error message -
THREE.BufferAttribute.copyVector2sArray(): vector is undefined 0 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 1 ... THREE.BufferAttribute.copyVector2sArray(): vector is undefined 11
Any insights on how to resolve this?