Currently, I am developing a WebGL application using Three.js that involves textures. To enhance my understanding, I have been referring to the tutorials available at . However, when attempting to run the application locally, I encountered several errors.
Uncaught TypeError: Cannot read property 'map' of undefined Three.js:2728
Cross-origin image load denied by Cross-Origin Resource Sharing policy. index.html:1
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
Cross-origin image load denied by Cross-Origin Resource Sharing policy. index.html:1
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
I understand that the Cross-Origin Resource Sharing Policy issue is related to utilizing images from local sources. Even after launching Chrome with the switch:
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
The problem persists. Could it be due to an outdated browser parameter? My current process involves opening Chrome through a shortcut and browsing through the address history to locate my index.html file.
Below is a snippet of the code causing these problems:
var materialArray = [];
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-xpos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-xneg.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-ypos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-yneg.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-zpos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-zneg.png" ) } ) );
for ( var i = 0; i < 6; i++ )
{
materialArray[ i ].side = THREE.BackSide;
}
var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
ShapeShifter.skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
ShapeShifter.scene.add( ShapeShifter.skybox );
There is a possibility that a similar query titled: Problems with MeshFaceMaterial since revision 54 (Update 2) provides insights into this issue. However, implementing the suggested solution regarding calls to THREE.GeometryUtils.setMaterialIndex remains unclear. How should I proceed?
Your assistance is much appreciated.