新登場: Vectary Canvas。AIで加速するアイデア創出のための、新しいスペースです。→ Canvas

3Dモデリングからウェブへの埋め込みまで

プロダクトデザインの完全チュートリアル。

いくつかのブーリアン演算を設定し、わずか数ステップでプロダクト全体を作成する方法を学びましょう。最後は、Webでの共有やARでの表示に備えて、シーンを最適化します。

1. シーンの準備

まずはケトルのベース形状から作成します。これが参照オブジェクトになります。 

環境設定

空間全体の方向を把握しやすくするために、グリッドをオンに設定しましょう。シーン内の何もない場所を右クリックし、メニューから「Show grid」を選択します。 

影を表示させるために、グランドプレーン(地面)を追加します。ライティングにはデフォルト設定ではなく、プリセットの「Skate park」を使用しましょう。この環境は非常に優れており、露出オーバーや露出アンダーになることなく、極めて自然なライティングと美しい反射を作り出すことができます。Vectaryの環境プリセットは非常に便利で、作業時間を大幅に短縮できます。

環境を変更するには、キーボードのESCキーを押してシーン内のすべての選択を解除します。右側のパネルから「Environment」をクリックしてください。ドロップダウンメニューから「Outdoor」を選択し、スクロールして「Skate park」を選びます。設定を調整しながら、最適な効果が得られるよう試してみましょう。このシーンでは、強度(intensity)を70、回転(rotation)を200、彩度(saturation)を-100、影(shadows)を75に設定しました。 

最適化されたライティング

ライティングの設定には、いくつかのメリットがあるディレクショナルライト(平行光源)を使用します。ライトが1つあるだけでシーン全体をカバーでき、強度(intensity)のコントロールや、影の鮮明度の調整も可能です。リアルさを生み出しシーンの仕上がりを向上させるために、影(shadows)を常にオンにすることを忘れないでください。 

最終的なプロジェクトをWebに埋め込むことが目的であるため、影を作り込みすぎないように注意してください。影はパフォーマンスに影響を与える可能性があります。実際、これが今回のシーンでディレクショナルライトを使用している理由です。一方向にのみ影を落とすため、パフォーマンスへの負荷が少なくなります。 

ライトの角度や色の調整も可能で、非常に効果的です。ターゲットポイントを約45度に設定し、デフォルトのホワイトを使用する代わりに、線形グラデーション(左上から右下)を適用して表情を豊かにします。 

エフェクトの追加

さらに一歩踏み込んで、 アンビエントオクルージョン(AO)、ソフトシャドウ、調整(Adjustments)といった他のエフェクトを使用してみましょう。 

AOを使用すると、2つのオブジェクトが近接している部分に影を追加できます。値を10%に設定し、半径(radius)を10に調整しましょう。自然な見た目の影を表現するには、ソフトシャドウ(Soft shadows)エフェクトが最適です。環境シャドウと組み合わせることで、さらに美しい仕上がりを得ることができます。

カラープロファイルは、シーンに劇的な違いをもたらします。パラメータの調整によって、シーン全体の見た目や雰囲気が大きく変わります。ここでは、カラープロファイルを「None」から「ACES」に変更しましょう。コントラストと彩度はそのまま維持し、露出(exposure)のみを85%に引き上げます。 

これで準備がすべて整いましたので、ここからはモデリングプロセス、特にブーリアン演算に集中していきましょう。 

2. 3Dモデリング

ケトルの本体部分は、ジグザグパターンのある外側のチューブ、内側のチューブ、そして内部用のシリンダー(円柱)のわずか3つの形状で構成されています。 

3Dパターンのあるケトル本体

まずはツールバーメニューからチューブ(Tube)オブジェクトを追加します。内径を調整し、高さを155に設定します。パネル右上にあるxyz座標と数値をガイドとして参考にしてください。 

シリンダー(Cylinder)についても同様の操作を行います。半径を調整し、チューブの内径にぴったり収まるようにします。両方を選択して「Taper」モディファイアを適用し、デフォルト値のままにします。

ケトル本体の最後の要素は、ブーリアン減算によって作成するジグザグパターンです。作成するには、2つ目のチューブが必要です。先ほどと同様に高さを調整し、次に半径を調整して、「Taper」モディファイアを適用します。シリンダーを配置して半径を調整し、少し回転させてと同じような角度にします。この小さなシリンダーにアレイ(Array)モディファイアを適用し、カウントを24に設定します。ブーリアンのラインを平行に保ちたい場合は、小さなシリンダーにもテーパー(taper)を適用して調整してください。今回は強度(strength)を55%に調整しました。

メインの形状が完成しました。次はマテリアルの設定です。中央のシリンダーを選択し、Hex値を入力します。ラフネス(roughness)を60%、メタルネス(metalness)を100%に設定します。ケトルの外側パーツにもHex値を入力し、ラフネスを60%、メタルネスを70%に設定しましょう。

プラスチックのスイッチ

まず、2つの立方体(Cube)を追加してサイズを調整し、ブーリアン和(boolean union)モディファイアを使用して2つを結合します。穴を開けるには、その形状を複製してケトル本体のブーリアングループに移動します。これにより、本体からその形状が自動的に差し引かれます。2種類のマテリアルを使用するため、スイッチをもう一度複製します。スイッチの位置を調整し、穴にぴったり収まるようにサイズをわずかに変更します。次に、マテリアルを1つにマージし、屈折(refraction)と厚み(thickness)を調整します。スイッチの内側部分を選択します。マテリアルを調整するには、まず色を選択し、エミッション(emission)を100に設定して発光させます。位置とスケールを調整して、もう一方の形状の内側に収めます。これで、周囲に透明なプラスチックが覆っているような外観になります。

ケトルの蓋

本体で使用したのと同様の原理を応用します。まずはベースとなる小さなシリンダーから始めましょう。次に、それを複製してサイズを調整します。さらにシリンダーを追加し、ブーリアン差(booleans subtract)とラジアルグリッド(radial grid)モディファイアを使って形状を切り抜きます。

ハンドル

ツールバーの立方体(Cube)から作成を開始します。美しく丸みを帯びた角を作れるよう、十分に長さを出します。最初の形状と交差させるように、もう1つの立方体を追加してください。位置と仕上がりに納得がいったら、それを複製し、Z軸方向にスケールを調整してベベル(bevel)モディファイアを適用します。これにより、ハンドルの上部と下部が作成され、視覚的にずっと魅力的なデザインになります。マテリアルをマージし、スポイト(eye dropper)ツールを使ってケトル本体からマテリアルを取得します。エッジを成形して丸みを持たせるために、蓋で使ったのと同じテクニックを使用します。シリンダーを追加し、スケールと位置を調整したら、「Skew」モディファイアを使用して形状をさらに変形させましょう。 

完成まであと一歩です。シーンに別のシリンダーを追加し、スケールと位置を調整します。ブーリアン差(boolean subtract)とラジアルアレイグリッド(radial array grid)モディファイアを適用して、最終的な形状を完成させましょう。本体からマテリアルのプロパティをコピーし、位置を調整します。これで、イメージ通りの完璧な姿がはっきりと見えてきました。

ですが、詳細を追加する前に、プロジェクトメニューに移動してすべてのオブジェクトに適切な名前を付けましょう。そうしておくと、後から変更を加えるのが非常に簡単になります。簡単なステップですが、長期的には大きな助けになります。

ブランディングの詳細

このような製品には通常ロゴがありますので、ここでもロゴを追加しましょう。メニューから「3D Text」を選択します。ここでは、デフォルトフォントである「Open Sans」を使用しています。太さは700、文字間隔は0.3に設定します。縮小して回転させ、boolean subtract(減算)モディファイアを使用してハンドルの上部から削り取ります。アップデートされたbooleanモディファイアには「separate by material(素材ごとに分離)」機能が搭載されており、booleanグループ内で使用されている各素材を維持できます。3Dテキストはその良い例です。 これにbevel(ベベル)モディファイアを適用します。ベベルのセグメント数は少なく抑えておきましょう。補足:3Dテキストを移動する際は、ベベルをオフにしておくことをお勧めします。 

ケトルの注ぎ口

最後のパーツはケトルの注ぎ口です。これは3つの立方体と、2つの異なるboolean演算から作成されています。メインの形状は「intersect(交差)」を使用して作成し、穴は「boolean subtract(減算)」を使用して開けています。形状の最後の調整として、taper(テーパー)とbevel(ベベル)のモディファイアを追加しました。 

3. デザインを3DとARで表示する


ターンテーブル用カメラと表示制限の追加

これでデザインを披露する準備が整いました。ですが、その前にシーンにカメラを追加しましょう。カメラは表示角度をコントロールします。ウェブ上で公開する際に非常に便利な機能です。これを行うには、カメラのピボットターゲットをケトルの中心に合わせてください。 

デザインが埋め込まれると、ターンテーブルが自動的にシーンを回転させます。再生時間(duration)とイージング(easing)を設定しましょう。また、回転時のカメラの表示制限を設定します。これにより、閲覧者のカメラ角度が制限され、ターンテーブルのカメラの動きは特定の角度に達したときに自動的に方向が切り替わるようになります。

ARの追加

このシーンをウェブサイトに埋め込み、ARビューアーを有効にするには、まずAdvanced(詳細)メニューからシーンにARを追加する必要があります。すべてのモデルが生成されるまでお待ちください。 

背景を透明にして3Dを埋め込む

背景を透明に変更します。ツールバーの共有ボタンをクリックします。「Share to the web」を有効にして、埋め込みコードをコピーします。コピーしたコードを、埋め込みたいウェブサイトに貼り付けます。ARでモデルを表示するには、右上のARボタンをクリックしてください。スマートフォンでQRコードをスキャンし、モデルを表示させたい場所にカメラを向けます。これで完了です。お茶でもいかがですか?

Vectaryでデザインと埋め込みを始める準備はできましたか?
作成を始める