CODEWITHSUNDEEP
javascriptthree.js
Michael
Michael

Reputation: 33

Three.js: Map and Attributes undefined & using images locally

I am writing a WebGL - Three.js application that uses textures and have been using the tutorials at http://stemkoski.github.com/Three.js/. When I try to run the page locally I get the following 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 know that Cross-Origin Resource Sharing Policy is related to using images locally. However, it still occurs even in a Chrome window opened with the target:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Could I be I am using an outdated switch? What I do is open up the Chrome browser via the shortcut and then look through address history for the location of my index.html file.

Here is some of the code I wrote and what I think is most-related to the issues at hand.

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

I thought this question: Problems with MeshFaceMaterial since revision 54 (Update 2) might also be related to what I am facing, however, I am not sure how to implement the answer. Where would the calls to THREE.GeometryUtils.setMaterialIndex go?

Thanks for your help.

Upvotes: 2

Views: 2405

Answers (3)

Pawel
Pawel

Reputation: 18212

XAMPP will solve your problems. I've been using this for 5+ years, super easy.

https://www.apachefriends.org/index.html

Upvotes: 1

StuGrey
StuGrey

Reputation: 1477

A good alternative to using a --allow-file-access-from-files or a local webserver is to use the Public folder in Dropbox.

It removes the security problems of using the flag and the hassle of starting a local webserver whenever you want to view your page.

You can work on your page locally and once it is synced you can view the page by visiting the public link that dropbox automatically generates for the file.

Upvotes: 1

Tapio
Tapio

Reputation: 3456

--allow-file-access-from-files (and other flags) will only work if you don't have any other tabs/windows open when launching it. However, this makes the rest of your browsing experience less secure, so the real solution for running things locally is using a little local web server to serve the files. There are many examples at three.js wiki and even in the three.js sources.

Looking at THREE.CubeGeometry sources, it seems to already have different material indices set for each face. For alternative approach, here's my cubemap based code for skybox.

Upvotes: 0

Related Questions