べんりや日記

住まいのこと、情報発信!

スマホ(iphon)で3Dデータを展開する 「オンライン 3D ビューワー」

2024-04-10 10:09:23 | 日々雑感
スマホに3Dデータが表示され、簡易的な形状チェックツールとして使えます!


前回は3DCADのデータをWindouw10の標準ツールを使ってパソコン上で確認する話をしましたが、今回はスマホ(iphon)に応用してみました。
ブラウザ上で動作する「オンライン 3D ビューワー」を使います。

「Online 3D Viewer」

Online 3D Viewer

A free and open source web solution to visualize and explore 3D models right in your browser. Supported file formats: 3dm, 3ds, 3mf, amf, bim, brep, dae, fbx, fc...

3dviewer.net

 

ブラウザ上で動作するので、アプリ等のダウンロードやインストールを行う手間が省け、ブラウザさえ動けば、アンドロイド系でもios系(iphonやipad)でも使えるという利点があります。

 1.オンライン 3D ビューワーをwindowsブラウザで使ってみる

まずは、PCのブラウザ上で使う手順をご説明します。

①3Dデータを用意する
今回は当社で用意した車庫の3Dデータを使ってみます。 ここをクリック
zip形式で圧縮された複数のファイルが入っていますので、解凍してパソコンの作業ファイル上に展開をしてください。

②オンライン 3D ビューワーを起動する
「オンライン 3D ビューワー」はここをクリックすると立ち上がります。



windows10のブラウザに表示される最初の画面


③用意した3Dデータを読み込ませる
今回は中央の枠内にドラックする方法で進めていきます。


真ん中の四角の枠の中にファイルをドラックします
ここでは3Dデータの「〇〇.obj」を入れます

パソコンで展開されたうちの「2.obj」のファイルを中央の枠内にドラックすると、次のような3Dモデルが表示されます。



「〇〇.obj」のデータが立体的に表示されます



左に文字化けしている文字列がありますが、「レイヤー名」が日本語で作成しているため、変な記号として表示されていますが、動作としては問題ありません。
私の3Dは「六角大王」ですが、他の3Dグラフィックツールでも、レイヤーを英語名で表記した方が良さそうです。

④3Dデータに色付けする
「〇〇.obj」は「ワイヤーデータ(線データ)」なので、面の色が灰色に表示されていますが、ここに色付けをするためには、「〇〇.mtl」というファイルを指定します。
指定するのは単純に、「枠内にドラック」するという単純作業で済みます。
パソコンで展開催された「2.mtl」ファイルをドラックすると、色付きの立体となります。



「〇〇.mtl」をドラックすると、面に色付けされます

ここまでいけば、それなりに色付けされた三次元モデルをグルグル色々な方向から見る事が可能になってきますが、
「〇〇.mtl」ファイルは面の色だけでなく、面に張り付けるテクスチャ用の画像ファイルも指定されています。
貼り付けする画像ファイルは「〇〇.bmp」や「〇〇.jpg」「〇〇.png」です。
貼り付けたい画像ファイルを順次「枠内にドラック」していくと、面に柄が貼り付けされていきます。



貼り付ける画像のファイルを順次ドラックしてやると、リアルになります。

アンドロイド系のスマホやクローム系PCはPCの操作編と同様に行えると思われるので、後回しにさせていただきます。(フツーはiphonが後回しなのでしょうが・・)


 2.オンライン 3D ビューワーをスマホで使ってみる

さて、PCでの動作が確認できたので、いよいよスマホ(iphon)上で3Dデータを表示させてみます。
手順としてはPC編と何ら変わりはありません。

①データを用意する
前述のPCの時と同じく、当社で用意した車庫の3Dデータを使ってみます。 ここをクリック
若しくは、下のQRコードを読み取ってクローム上でダウンロードします。




②圧縮データを展開する
iphonの「フォルダ」アプリを起動します。「ブラウズ」フォルダの中にダウンロードした圧縮ファイルが入っているので、これを解凍します。



「ファイル」アプリを開いて「ブラウズ」をタップします。
一番階層が上の状態です。
「このiphon内」を選択すると・・




「このiphon内」のフォルダが表示されます。
「chrome」のフォルダを選択します。




「chrome」フォルダ内にある、ZIPファイルを解凍します

圧縮ファイル「1.zip」がダウンロードされているので、これを解凍します。
「1.ZIP」ファイルを「タップ」すると、左隣の「1」というフォルダが出来上がります。この中に3Dデータが入っています。

参考までに、「1」フォルダをタップして中身を確認すると・・


「1」フォルダの中身は3Dデータと貼り付け用の画像データです

このデータはPC用のデータと全く同じものなので、同じ3DデータをPCでもスマホ(iphon)でも使えるという事になるわけです。(それがミソ)
これで準備はOKです。

③オンライン 3D ビューワーを起動する
iphonの場合はここをクリックすると立ち上がります。
若しくは、下のQRコードを読み取ってクローム上で動かしてみてください。






QRコードを読み取ると「chromeで開く」と表示されるので、そこをタップします。


オンライン3Dビューワーが起動します。
PC編で見た画面がそのままiphonに表示されているので、ワクワク感が高まりますね。


PCの画面上と同じ表示になっています


④用意した3Dデータを読み込ませる
②で展開したデータを3Dビューワーに読み込ませます。
PC編では真ん中の枠にフォルダをドラックすれば、3Dモデルが表示されたのですが、Windowsと違ってファイルのドラックが出来ない為、「ファイルを開く」方法を使います。


左上のファイル・アイコンをタップします




メニューが出るので一番下の「ファイルを選択」をタップします


「ファイルを選択」とすると、「ファイル」アプリの画面に移行します。
ここで一番下の「ブラウズ」を選択すると、図のような画面となり、ここで「1」のフォルダ内に入ります。
(iphonだと普段は階層フォルダなど考えずに使用しているのですが、こういうプログラムを走らせている時はパソコンの延長なのだと自覚できます。)


解凍した「1」のフォルダの中に入ります


「1」のフォルダ内に3Dデータが入っています。




PCでは順次ファイルをドラックしていたのですが、ここでは一括で「全てを選択」します。



全て選択したら、右上の「開く」アイコンをタップします。
すると・・


3Dモデルが表示された!


あとは、指で画面をなぞれば、3Dモデルがグルグル回転します。2本指を使うと「視点移動」が可能です。
このプログラムは他の建築系CADソフトの閲覧プログラムに比べると格段にサクサク動くので、作成した3Dデータの表示用・チェックツールとしては申し分がないと考えています。
今回はiphonに焦点を当てましたが、アンドロイド系のスマホやタブレット端末、クロームPC等は、PC操作編とiphon操作編を応用すれば可能になると思われます。

 3.スマホが簡易的なCADデータの閲覧装置となる

こういったツールを使う事で、お客さんとの事前の形状打ち合わせが容易となると考えられます。
専用の3D閲覧ソフトやアプリをインストールしなくても手軽に導入できる利点もあります。
ブラウザ上で動くのでPCでなくてもスマホやタブレット端末で幅広く利用できるのも魅力です。

コロナ禍でオンラインの設備が充実してきた背景もあり、便利な時代になったものです。
そのうちに「VR」表示のプログラムも出てきそうですが、3DデータをWindows10,11で標準のOBJ形式にしておけば、VRへもスムーズに移行できると考えています。


Windows10標準の「3Dビューアー」をCAD表示アイテムとして使う - べんりや日記

Windows10標準の「3Dビューアー」をCAD表示アイテムとして使う - べんりや日記

Windows10に標準装備されている「3Dビューアー」の活用法です最近は業者用ではなく、一般用の住宅シュミレーションソフトが出回っていてプロ顔負けのプレゼンが可能となっ...

goo blog

 



べんりや日記 もくじ - べんりや日記

べんりや日記 もくじ - べんりや日記

このブログを開いてから、家づくりや環境、食について様々な想いを書き綴ってまいりましたが、その情報量の膨大さに書いている本人も何処に何を話題にしていたか整理がつか...

goo blog



もくじへ・・


コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする