web-dev-qa-db-ja.com

Three.jsおよびクロスドメインイメージの読み込み

私はこれが以前に尋ねられたことを知っています、そして、私はこれまで見つけた質問と答えを読みましたが、何も機能しません。

これをローカルサーバー（IIS）で実行しています。私はimgurから画像を読み込み、それをコードを使用してオブジェクトのテクスチャとして使用しようとしています：

_var savedImage = /[^?]*$/.exec(location.search)[0];
if (savedImage != "") { savedImageLoad("http://i.imgur.com/" + savedImage + ".jpg"); };

    function savedImageLoad(image) {
        var mapOverlay = new THREE.ImageUtils.loadTexture(image);
        sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});;
        sphere.geometry.buffersNeedUpdate = true;
        sphere.geometry.uvsNeedUpdate = true;
    }
_

しかし、それはエラーを与えています：

_Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-Origin image at http://i.imgur.com/uBD0g95.jpg may not be loaded.
_

_THREE.ImageUtils.crossOrigin = "anonymous";_、またはそのバリエーションを、コードの先頭、末尾、およびその他のさまざまなポイントに配置しようとしました。 web.configを追加しました

_<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>
_

しかし、それはうまくいきませんでした。また、これはbitbucket.orgでホストされているサイトでは機能しません。これは、コードに何かが欠けていると私に言います。

sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});;行でエラーが発生しているようです。コメントアウトした場合、エラーはありません（ただし、メッシュは更新されません）。

私はここで他に何をしようとするのに本当に困っています。どんな助けも感謝します。

javascriptthree.jscross-domain
35
Kurt

更新：非推奨のメソッド

この問題に出くわし、答えから解決策を適用して、THREE.jsの新しいリリースの非推奨メソッドのために機能しないことを見つけました。誰でも同じ問題が発生した場合に備えて、この回答を掲載しています。廃止されたにもかかわらず、元の回答でgmanが提供した情報は最も有用であり、読むことをお勧めします。

THREE.ImageUtils.loadTexture()

メソッドは、元の質問と回答から非推奨になりました。

テクスチャをロードする現在の方法：

// instantiate a loader
var loader = new THREE.TextureLoader();

//allow cross Origin loading
loader.crossOrigin = '';

// load a resource
loader.load('textures/land_ocean_ice_cloud_2048.jpg',
    // Function when resource is loaded
    function ( texture ) {},
    // Function called when download progresses
    function ( xhr ) {},
    // Function called when download errors
    function ( xhr ) {}
);
25
Michal

クロスドメインの問題に応じて、画像とJSONモデルのソリューションを見つけました。これは、Localhostでも常に機能します。

私の場合、Socket.ioで動作するように、ポート3001でNodeJSからゲームをロードしています。ポート80の3Dモデルが必要です。

すべてのモデルがディレクトリにあると仮定します：game/dist/models/**/*

PHPファイルgame/dist/models/json.phpを作成しました：

<?php

header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET');
header('Access-Control-Allow-Origin: http://localhost:3001');


if (isset($_GET['file']))
{
    switch($_GET['file'])
    {
        case 'house1':
            header('Content-Type: application/json');
            $file = 'houses/house1.json';
            $json = json_decode(file_get_contents($file),TRUE);
            echo json_encode($json, TRUE);
            die();
        break;
    }
}
?>

ThreeJS：

var loader = new THREE.ObjectLoader();  
    loader.load(distPath+"models/json.php?file=house1",function ( obj ) {
         scene.add( obj );
    });

楽しむ！

0
Stringified

エラーのスクリーンキャプチャ

VM266 three.min.js:127 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-Origin data, and may not be loaded.
    at Object.texImage2D (https://unpkg.com/[email protected]/build/three.min.js:127:99)
    at dg.r [as setTexture2D] (https://unpkg.com/[email protected]/build/three.min.js:103:189)

Codepenデモの作業中に同じ問題に遭遇したばかりです。 https://codepen.io/fritx/project/editor/AoLRoy

Three.jsを0.86から> = 0.87にアップグレードすることで解決しました

- <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
+ <script src="https://unpkg.com/[email protected]/build/three.min.js"></script><!-- >=0.87 (img.crossorigin) -->
0
Fritz Lin