companynameJ

立体や3次元曲面に写真を貼り付ける
立方体

立方体に写真を貼り付ける

球体貼り付けはこちら
もともと平面である写真や静止画像を3次元的に変形することにより、新たな美的価値や面白さを生み出す方法は数多く存在します。

それらの方法のほとんどは、特別なアプリケーションソフトなどのツールを用いています。そういう専門的なツールを使えば、高度な3次元画像を作り出すことができますが、使用法を習熟する必要があります。

ここでご紹介する方法は、お客さまご自身で、専門的なツールを使わないで、お客さまの写真画像を簡単に無料で3次元画像に変換できるサービスです。

変換された画像を、お客さまご自身のメールやSNSに添付するなどしてご活用下さい。

  • 基本的な使い方


  1. 1.元画像の準備:

     お客さまご自身の写真画像を用意して下さい。ない場合は下に添付されているサンプル画像をお使い下さい。

  2. 2.元画像を立体に貼り付け:

     その写真画像を立体画像モデル(立方体)の上にドラッグ&ドロップするか、「画像選択」ボタンを押してお客さまのフォルダから画像ファイルを選択して下さい。詳しい使い方については下記の立方体貼り付けの解説をご覧ください。

  3. 3.変換画像の取得:

     貼り付けられた変換画像をお好きな位置にマウスなどで移動させて、静止画または動画撮影を行い、画像をダウンロードして下さい。取得画像は管理者(サーバー)には送信されません。詳しい使い方については下記の立方体貼り付けの解説をご覧ください。


立体画像モデル:立方体

回転動作

貼り付け範囲

サンプル画像1
サンプル画像2
sampleImage1 sampleImage2
cursorOK cursorNG
貼り付け方法
 下記のいずれかの方法をお使い下さい。
<ドラッグ&ドロップによる方法>
 お好みの写真画像をドラッグして立方体の上でドロップして下さい。先ずは下にあるサンプル画像をドラッグしてお試しください。 
<画像ファイルを指定する方法>
 画像選択ボタンをクリックしてお好みの写真画像ファイルを選択して下さい。
撮影画像の取得方法
 静止画撮影開始ボタンまたは動画撮影開始ボタンのクリックで撮影が開始され、静止画または動画撮影が終了すると撮影画像が表示されます。表示された画像の下にあるダウンロードボタンをクリックしてダウンロードして下さい。
 動画撮影の場合、ブラウザの開発ツールを使用していると(特にFirefox)処理時間が長くなりますのでご注意ください。Chromeの使用をお勧めします。

静止画撮影はこちら

動画撮影はこちら

0%

撮影画像

 
 

立方体貼り付けの解説

 

デフォルト球体画像モデル

初期状態は、球体に地球画像が貼り付けられていて、Y軸(上下軸)を回転軸として左から右方向に回転しています。
 

回転動作

【開始】回転が開始します。
【停止】回転が停止します。
 
回転軸は、マウス・タッチ操作、X軸に固定、Y軸に固定、Z軸に固定の4種類を選択できます。

【マウス・タッチ操作】立方体をマウスでドラッグ、あるいはタッチしてお好きな方向に移動させることにより回転軸が変更されます。
【X軸に固定】回転軸がX軸(左右軸)に固定されます。マウス・タッチ操作は不作動になります。
【Y軸に固定】回転軸がY軸(上下軸)に固定されます。マウス・タッチ操作は不作動になります。
【Z軸に固定】回転軸がZ軸(前後軸)に固定されます。マウス・タッチ操作は不作動になります。

 

貼り付け範囲

全面モードと一面モードが選択できます。初期状態は全面モードになっています。

【全面】全面モードになり、立方体の6面全体に一つの画像が貼り付けられます。
【一面】一面モードになり、立方体の6面の内の一つの面に一つの画像が貼り付けられます。
【リセット】貼り付け画像が全部解除されて元の地球画に戻ります。

 

<全面モードの貼り付け方法>
画像を直接貼り付ける。

お客さまのお好きな写真画像など任意の画像を立方体上にドラッグ(タッチ)&ドロップや画像コピーするか、
【画像ファイル選択】ボタンをクリックして画像ファイルを選択することにより、その画像を貼り付けることができます。
先ずはサンプル画像をドラッグ(タッチ)&ドロップしてお試し下さい。

この貼り付け操作は回転中、回転停止に拘わらず何度でも行うことができます。

 

<全面モードの貼り付けられる画像>

全面モードで貼り付けられる画像は、平面から立体に変換されることになるので、地図図法のように正距円筒図として処理されます。

このため、縦方向中央の赤道に当たる位置の線画像は貼り付けられる画像と同じ線画像になりますが、上下の北極南極に当たる位置に向かうにつれて横方向の画像が圧縮されます。

また、横縦比(アスペクト比)は2:1の画像として貼り付けられるため、貼り付け画像が2:1のアスペクト比でない場合は、2:1に自動的にリサイズされて処理されます。

例えば640×480画素の画像 (アスペクト比4:3)であれば、縦方向が480から320に圧縮されて縮まることになります。

 

<一面モードの貼り付け方法>
1.貼り付け面を指定する。

貼り付けたい面をマウスでクリック、あるいはタッチして貼り付けたい面を指定します。

すると、その指定された面が緑色に変化し、貼り付け準備状態になります。

位置1~4のボタンを選択すると、4種類の貼り付け位置を指定できます。

貼り付けられる画像の左上隅を赤丸で示しています。

この貼り付け位置指定は貼り付け後でも行うことができます。

位置1
position1_1
位置2
position1_2
位置3
position1_3
位置4
position1_4

一度指定した面と異なる面をクリック、あるいはタッチすると、その新しい面が緑色に変化して新たな貼り付け準備状態になります。

以前指定した面は貼り付け準備状態が解除されて元の地球画像に戻ります。

 

貼り付け準備状態である面をもう一度クリック、あるいはタッチすると、貼り付け準備状態が解除されて元の地球画像に戻ります。

 

この貼り付け準備状態にある地球画像の位置は変化しません。

貼り付けた画像の場合に位置が変化します。

 

2.画像を貼り付ける。

お客さまのお好きな写真画像など任意の画像を立方体上にドラッグ(タッチ)&ドロップや画像コピーするか、【画像ファイル選択】ボタンをクリックして画像ファイルを選択することにより、その画像をその指定された面に貼り付けることができます。

そのドラッグ(タッチ)&ドロップなどは、貼り付け準備状態にある面にドロップする必要はなく、立方体上にドロップすれば貼り付け準備状態にある面に貼り付けられます。

この貼り付け操作は回転中、回転停止に拘わらず、貼り付け準備状態にある面に対して何度でも行うことができます。

位置1
position2_1
位置2
position2_2
位置3
position2_3
位置4
position2_4

貼り付けが完了した面をクリック、あるいはタッチすると、貼り付け準備状態に戻ります。

 

貼り付け準備状態では、位置1~4のボタンを選択すると、上記「貼り付け面を指定する」と同様に4種類の貼り付け位置を指定できます。

貼り付け位置が変更されると薄く表示されている貼り付け画像の位置も変化します。

位置1
position3_1
位置2
position3_2
位置3
position3_3
位置4
position3_4

この貼り付け準備状態にある面をもう一度クリック、あるいはタッチすると、貼り付け準備状態が解除されて貼り付け位置変更が反映された貼り付け画像に戻ります。

この貼り付け準備状態にある面に別の画像を貼り付けると、貼り付け位置変更が反映された貼り付け画像が得られます。

 

<一面モードの貼り付けられる画像>

一面モードで貼り付けられる画像は、平面のまま処理されます。

立方体の貼り付け面は正方形ですので、横縦比(アスペクト比)は1:1の画像として貼り付けられます。貼り付け画像が1:1のアスペクト比でない場合は、1:1に自動的にリサイズされて処理されます。

例えば640×480画素の画像 (アスペクト比4:3)であれば、横方向が640から480に圧縮されて縮まることになります。

 

静止画撮影
【静止画撮影開始】静止画撮影が開始され、撮影画像ボックス内に静止画撮影画像が表示されます。
回転中、回転停止に拘わらず、【静止画撮影開始】ボタンが押された時点の立方体の画像が撮影されます。

 

【キャンセル】静止画撮影が中止されます。

 

【ダウンロード】静止画撮影画像がダウンロードされます。
静止画撮影画像は背景が透明のPNGファイルになっています。

 

動画撮影
【動画撮影開始】動画撮影が開始され、【動画撮影開始】ボタンが押された時点から1回転分の動画が撮影されます。
回転停止状態の場合には、自動的に回転が開始されます。
動画撮影中はプログレスバーで進捗状況が表示されます。
動画撮影が終了すると、撮影画像ボックス内に動画撮影画像が表示されます。

 

【動画撮影停止】動画撮影が停止され、【動画撮影開始】ボタンが押された時点から1回転分より短い任意の時間の動画が撮影されます。

 

【キャンセル】動画撮影が中止されます。

 

【ダウンロード】動画撮影画像がダウンロードされます。
動画撮影画像は背景が透明のWEBMファイルになっています。

 

※動画ファイルについて: 
動画ファイル生成にはブラウザのMediaRecorderAPIを使用しています。但し、ブラウザがFirefoxの場合には、当ツールの要件を充たすため暫定的にLPGLv3ライセンスのFFmpegライブラリを使用しています。

立体貼り付けを使う

立体貼り付け:立方体の使用例

 

・全面に貼り付ける例:

 下の画像を全面貼り付けしてみます。
 

サンプル画像1
post_sampleimage1
サンプル画像2
post_sampleimage2

 

全面貼り付けした立方体を適当な位置で静止画撮影しました。
 

静止画撮影画像1
post_stillimage1
静止画撮影画像2
post_stillimage2

 

 

その全面貼り付けした立方体を動画撮影しました。
 

動画撮影画像1
動画撮影画像2

 

・一面に貼り付ける例:

6個の画像を一面貼り付けしてみます(サンプル画像3、サンプル画像4)。
 

静止画撮影画像3
post_stillimage3
静止画撮影画像4
post_stillimage4

 

その一面貼り付けした立方体を動画撮影しました。
 

動画撮影画像3
動画撮影画像4

 

サンプル画像3は北海道旅行での写真で、サンプル画像4は手持ちの動物写真です。簡易的にY軸やX軸で回転させていますが、これらサンプル画像をヒントに、お客さまにおいてより美しく面白い作品を創り出して頂ければ幸いです。

 

sub1title

closeicon

サンシャインブルー工房創設者、管理人の 青木ガンバロ と申します。
団塊世代の一技術者としてかつては開発業務に没頭しておりました。今はたそがれ期に入り、世間では簡単なことであっても、自分にとっては知らない、経験していないことが山ほどあると気付かされます。
限りある時間に、少しでもそういう未経験のテーマに挑戦してみようと思い、本工房を立ち上げることにしました。
 
いろいろな分野の学習を続けていると、何度も躓いてしまいます。素朴な疑問が湧いてくるのですが、その解答を得るのに手こずります。
膨大な情報の中から欲しい情報を探るのが難しくなっていると感じます。
 
技術を中心としたさまざまな課題を解きほぐし、より本質的な内容を明らかにすることによって、同じように学ぼうとする方々が、素早く答にたどり着けるような情報を発信していければと考えております。
 
このホームページもその挑戦の一つとして独学で制作してきました。
Web技術の多岐にわたる学習が必要であったり、関連する規格やツールなどの仕組みも進化して更新されていくので、最善解に近づくのは容易ではありません。
当初から躓きの連続でありましたが、多くの親切な方々の的確な記事にも助けられて進めてきました。
まだ多くの疑問点が残っております。逐次改善していくつもりです。
 
これまで多くの友人、先輩方の支えがあったお陰で何とか過ごしてくることができました。
人びとの繋がりの大切さを痛感しております。
どこまで頑張れるか分かりませんが、残る力を絞って進んでまいります。
これからも、皆さまのご援助、ご協力をよろしくお願い申し上げます。

sub2title

closeicon

2019-  4-16

・サンシャインブルー工房の個人事業開業

2022-12-22

・ホームページを公開

・ブログ「立方体に写真を貼り付けるツールを作りました」を公開

・ブログ「球体に写真を貼り付けるツールを作りました」を公開

2023-  2-  3

・ブログ「3DにおけるJPEGとは?」を公開

2023-  3-  1

・ブログ「3D画像ファイルの画像とは?」を公開

2023-  4-16

・ブログ「3D画像ファイルのカメラデータとは?」を公開

2023-  5-22

・ブログ「3D画像ファイルの点群とは?」を公開

2023-  6-28

・ブログ「3D画像ファイルのGeoTIFFとは?」を公開

2023-  7-28

・「役立つーる」ページを新設し、最初のオンラインツールGeoTIFFリーダーを公開

・ブログ「GeoTIFFリーダーを作りました」を公開

2023-  8-16

・ブログ「点群におけるLASとは?」を公開

2023-  9- 1

・ブログ「Googleアースに使われるKMLとは?」を公開

2024-  1-16

・ブログ「3D画像ファイルのアニメーションとは?」を公開

2024-  2- 8

・ブログ「ボーンアニメーションのオフセット行列とは?」を公開

2024-  7- 13

・ブログ「3D画像モデルの回転表示とは?」を公開

sub3title

closeicon






    皆さまからの、ご要望、ご依頼、ご質問、ご意見、ご提案などをお待ちしております。
    当方の事情や、お問い合わせの内容によりましては、返信を差し上げることができない場合もあります。あらかじめご了承ください。

    姓 例)日本

    名 例)太郎

    せい 例)にほん

    めい 例)たろう

    例)xxx@abcde.co,jp

    例)いろはに会社


     

    お問い合わせをいただき、ありがとうございます。

    messageOKこのお問い合わせの送信が完了しました。

    お問い合わせがエラーになりました。再度お試しください。

    messageNGこのお問い合わせの送信が失敗しました。

    sub4title

    closeicon
    1.著作権について
    当サイトは、お客さまご自身の画像が貼り付けられてダウンロードされた画像の情報を除き、当サイトに掲載されている、文章・画像・動画等の著作物の情報を無断転載することを禁止致します。
    当サイトは、ブラウザがFirefoxである場合に動画ファイルの生成のためにLPGLv3ライセンスのFFmpegライブラリを使用しています。
    2.リンクについて
    以下の場合を除き、当サイトを他のWebサイトに自由にリンクすることができます。
    (リンクをお断りするWebサイト)
    違法または反社会的な情報を提供するWebサイト
    当サイトの関係者や提供する情報に対して誹謗、中傷する内容を有するWebサイト
    当サイトであることが不明確であるWebサイト
    sub5title

    closeicon
    1.個人情報保護方針
    当サイトは、お客様からお預かりする個人情報の重要性個人情報の重要性を認識し、個人情報の保護に関する法律、その他の関係法令を遵守し、個人情報を安全かつ適切に取り扱います。
    2.個人情報の取得と利用目的
    個人情報を取得させていただくにあたっては、取得情報と利用目的を以下に定め、必要な個人情報のみを、適法かつ公正な手段により取得させていただきます。
     2.1.お問い合わせやご注文時の情報
    (取得情報)
    お客様ご自身によるお問い合わせやご依頼のための入力情報
    (利用目的)
    お客様へのご依頼に対応するため。
     2.2.ご利用履歴情報
    (取得情報)
    アクセス解析ツールGoogle Analyticsを用いた個人を特定しないトラフィックデータ
    (利用目的)
    ご利用状況の分析により当サイトの一層の改善や拡充を図るため
    このGoogle Analyticsの規約に関する詳細は、ここをクリックしてください。
     2.3.広告管理情報
    (取得情報)
    広告表示ツールGoogle AdSenseを用いた個人を特定しない広告管理データ
    (利用目的)
    お客様の興味に応じた商品やサービスの広告配信のため
    このGoogle AdSenseの規約に関する詳細は、ここをクリックしてください。
    3.個人情報の第三者への開示
    当サイトは、お客様からお預かりした個人情報を、個人情報保護法その他の法令に基づき開示が認められる場合、または、お客様からの同意を得た場合を除き、第三者に提供することはありません。
    4.クッキー(Cookie)について
    クッキー(Cookie)とは、当サイトにアクセスした際にお客様のブラウザに送信され、お客様のコンピューターに保存される情報のことです。
    当サイトでは、利用履歴の収集および広告の管理のためにそのクッキーを使用しています。
    当サイトが使用するクッキーのデータは、個人情報を含むものではありませんが、お客様がブラウザを操作することにより、クッキーの使用を制限(オプトアウト)することや、保存されたクッキーの情報を削除することも可能です。ただし、そのブラウザの設定によっては、当サイト一部の機能が使用できなくなる恐れがありますのでご注意ください。
    5.個人情報保護方針の変更
    当サイトは、法令の制定、改正等により、本個人情報保護方針を適宜見直し、予告なく変更する場合があります。本個人情報保護方針の変更は、変更後の内容が閲覧可能となった時点で有効になります。
    6.免責事項
    当サイトは、正確な情報を掲載するよう努めておりますが、誤情報の混入、情報の陳腐化が起こることがあります。当サイトに掲載された内容や、他のサイトに移動された場合の移動先サイトで提供される情報によって生じた損害等の一切の責任を負いかねますのでご了承ください。