質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

意見交換

クローズ

2回答

571閲覧

【Webサイト制作】立体的な3Dモデルを表示する方法

s-ueshi

総合スコア6

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

0グッド

0クリップ

投稿2023/11/13 02:21

編集2023/11/13 04:33

0

0

実現したいこと

・3Dモデルを作成して、サイト上で表示
・回転をかけてモデルの裏・表が見えるように

前提

リッチなWebサイト上を作成したいです。
実現したいことは上記の通りですが、ノウハウがございません。
blenderやThree.jsを使用して実現することがモダンなのかと思いますが、
代案があるのかどうか、皆様に伺いたいです、

条件

・手元には静止画があり、これを立体的に表現したい
・対象モデルは表面・裏面で見た目が異なる
(レモンやリンゴ、ピンポン球みたいにどこから見ても同じわけではない)

調査したこと

・モデル作成をBlenderで作成する以外に
3D生成サービス「kaedim」を利用する案も検討しました。
ただ、一部人力での作業工程があるそうなので候補として優先度低めです。

補足情報(参考サイト)

▽チルアウト
https://butfirstchillout.com/

▽Blenderでの作成
https://cgbox.jp/2023/04/12/blender-image-3d/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

回答2

#1

yambejp

総合スコア114878

投稿2023/11/13 03:47

3Dは負荷が高く環境に依存するので、予めレンダリングしておいて映像として見せるのが妥当です。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#2

TYY

総合スコア11

投稿2023/11/21 03:41

タイトルでは「3Dモデルを【表示】する方法」とありますが、本文を読むとどうも「3Dモデルを【作成】する方法」について模索しているように思えます。
それぞれについて分けて考えてみます。

【作成】について:

  • 「写真 3Dモデリング」等で検索すれば、最近の様々な手法が見つかります。まだまだ発展途上中ですが、一枚の写真から生成するような技術も生まれてきています。
  • 写真を撮るところから可能なのであれば、周囲の様々な角度から十数枚〜数十枚程度の写真を撮影して放り込めば3Dモデルを生成してくれるサービスもあります。
  • 自分で(もしくは依頼して誰かが)3Dモデルを作成するのであれば、Blender 等を用いてモデリングすることになります。

【表示】について:

  • 作成した3DモデルをUIを含めて実装したいのであれば、パッと思いつくのはThree.js を利用しての実装となりますが、他にも使えるライブラリがあると思います。
  • 自分でJavaScript とWebGL 等でコツコツ実装することも可能でしょう。
  • 「3Dモデル Webサイト UI 実装」あたりの用語で検索してみてください。

※作成された3DモデルをそのままWeb に載せると重すぎる場合は調整が必要で、3Dモデルのデータを全く触らないで済ませるわけにはいかない気がしています。(また、別回答にもあるように負荷が重くなります。調整しても基準を満たすスピードや、環境の差異を吸収できないような場合は、目的によっては手段としてそもそも3Dモデルを操作できる必要があるのか確認・検討してみてはどうでしょう?)

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問