2

私はWebGLを書いています-テクスチャを使用するThree.jsアプリケーションで、http： //stemkoski.github.com/Three.js/のチュートリアルを使用しています。ページをローカルで実行しようとすると、次のエラーが発生します。

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

クロスオリジンリソースシェアリングポリシーは、ローカルでの画像の使用に関連していることを知っています。ただし、ターゲットで開いたChromeウィンドウでも発生します。

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

古いスイッチを使用している可能性はありますか？私がしていることは、ショートカットを介してChromeブラウザーを開き、アドレス履歴を調べてindex.htmlファイルの場所を探すことです。

これが私が書いたコードのいくつかであり、私が思うものは目前の問題に最も関連しています。

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

私はこの質問を考えました：リビジョン54（アップデート2）以降のMeshFaceMaterialの問題も、私が直面していることに関連している可能性がありますが、答えを実装する方法がわかりません。THREE.GeometryUtils.setMaterialIndexの呼び出しはどこに行きますか？

ご協力いただきありがとうございます。

4

3 に答える 3

1

またはローカルWebサーバーを使用する代わりに、 Dropbox--allow-file-access-from-filesのパブリックフォルダーを使用することをお勧めします。

これにより、フラグを使用する際のセキュリティ上の問題と、ページを表示するときにローカルWebサーバーを起動する手間がなくなります。

ページをローカルで操作でき、同期されたら、dropboxがファイル用に自動的に生成するパブリックリンクにアクセスしてページを表示できます。

于 2013-03-25T20:41:26.457 に答える
1

XAMPPはあなたの問題を解決します。私はこれを5年以上使用していて、とても簡単です。

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

于 2015-03-31T00:34:00.187 に答える
0

--allow-file-access-from-files（および他のフラグ）は、起動時に他のタブ/ウィンドウを開いていない場合にのみ機能します。ただし、これにより、残りのブラウジングエクスペリエンスの安全性が低下するため、ローカルで実行するための実際のソリューションは、ファイルを提供するために小さなローカルWebサーバーを使用することです。three.js wikiや、three.jsソースにも多くの例があります。

THREE.CubeGeometry ソースを見ると、面ごとに異なるマテリアルインデックスがすでに設定されているようです。別のアプローチとして、スカイボックス用のキューブマップベースのコードを次に示します。

于 2013-03-25T09:48:20.040 に答える