1. トップページ
  2. コラム
  3. Blenderを使ってWebサイトに使用するモデルを作ってみた

Blenderを使ってWebサイトに使用するモデルを作ってみた

こんにちは。web制作会社デザイントランスメディアの小川です。

前回はthree.jsを使用してWebサイトに3Dモデルを表示させる方法についてまとめました。
今回はその3DWebサイトに使用する3Dモデルを、3D制作ソフトを学びながら実際に制作してみました。

使用する3D制作ソフトは「Blender」です。
オープンソースソフトウェアとなっており、無償で提供されているため誰でも公式サイト(下記URL)からダウンロードできます。
https://www.blender.org/download/
ツールを理解し使いこなせばどんなに詳細で複雑な造形のものでも制作することが可能です。

モデリングをする上では特にショートカットを覚えておくことが重要です。
最初に覚えておくと便利なショートカットをまとめてみました。ぜひ参考にしてください。

▶︎ 視点移動:ユーザーがモデルを見る視点の操作方法です。
・回転 スクロールボタン+ドラッグ
・ズーム スクロールボタンをスクロール
・平行移動 スクロール+シフト+ドラッグ

▶︎ 選択:モデルの一部や複数のモデルを選択する様々な方法です。
・独立したモデルを全選択 カーソルを合わせてL
・広範囲選択 丸型:C+ドラッグ、四角:左クリック+ドラッグ
・輪投げ選択 Ctrl+右クリック+ドラッグ
・ループ選択 Ctrl+Alt+クリック
・複数選択 Shift+クリック
・選択解除 Shift+クリック または Ctrl+クリック

▶︎ 編集ツール:モデルを選択したあとに行うツールです。
・移動 G
・回転 R
・拡大縮小 S
⭐︎上記と合わせて覚えると便利なショートカットがこちら
+ X:X軸に沿って編集
+ Y:Y軸に沿って編集
+ Z:Z軸に沿って編集

▶︎ カット:モデルの辺となる線を自由に生成します。
・自由選択 K → Enter または スペースで確定 
・ループカット Ctrl + R

そして今回は出来上がったのがこちら、弊社HPで最初に目にするこのマークです。

次回からは、このようなモデルをwebサイトで活用する様々な方法について着目していこうと思います。最後までお読みいただきありがとうございました。

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!

この記事を書いた人

小川 真弥