Three.jsのマッピング画像を外部から読み込み

[marumaru]

お世話になります。

現在、Three.jsで以下のようなページを作成しています。

https://anlio.jp/pages/new-look-book

マッピング画像を外部URLから読み込もうとしてもクロスドメインの関係ではじかれてしまうため、現在はAPIでassetに画像を入れています。

ただ、この方法ですとAPIでの画像登録に時間がかかり運用しづらいため外部URLからマッピング画像を読み込みたいです。

Three.jsと外部サーバーにはクロスドメインの設定は行っているのですが、どうもShopify側ではじかれているようです。

何か方法はありますでしょうか？

よろしくお願いします。

[junichiokamura · Accepted solution]

テーマに直接 img タグなどで外部画像ファイルを読み込むことは可能だと思うのですが、具体的に弾かれている状況はどういったものでしょうか？

実際のコードやブラウザ上のエラーなど共有いただけると回答が得やすいと思います。

[marumaru]

ご返事ありがとうございます。

再度確認したところ、画像を持っているサーバーの設定が漏れていました。

NGINXの

location ~* \.(jpg|jpeg|gif|png|css|js|swf|ico|pdf|svg|eot|ttf|woff)$ {

部分に

add_header Access-Control-Allow-Origin https://”ドメイン”;

の設定を加えたところ、Shopify内ページのThree.js側でマッピング画像が取得できるようになりました。

Shopifyと関係ない部分で失礼しました。