チュートリアル: 3Dモデルを回転させる

このチュートリアルでは、Kanzi アプリケーションでスワイプジェスチャーを使用して3Dモデルを回転させる方法を学びます。

Scroll View 2D ノードを作成し、回転させたいモデルを表示するカメラの回転に接続します。次に、Scroll View 2D ノードのプロパティを使用して、Scroll View ノードがモデルをどのように回転させるかを微調整します。

このビデオはチュートリアルの結果を示しています。

../../_images/rotation-completed.gif

このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。

チュートリアルを入手する

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Rotation チュートリアルの横にある ダウンロード をクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

  • <KanziWorkspace>/Tutorials/Rotation/Start ディレクトリにあるチュートリアルの開始地点のプロジェクト。

  • <KanziWorkspace>/Tutorials/Rotation/Completed ディレクトリにある完成したチュートリアル。

3D モデルの回転

3Dモデルを回転させるために Scroll View 2D ノードを使用するには：

  1. Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Rotation チュートリアルの横にある Open をクリックし、Start project を選択します。

    プロジェクトには、車のモデル、ライト、カメラ、および車の下の床を含む Car プレハブが含まれています。

    ../../_images/start7.png

  2. Node Tree で RootNode を Alt を押しながら右クリック し、Scroll View 2D を選択します。

    ユーザー入力や物理ベースのアニメーションからスクロールメッセージを生成する領域を定義するには、Scroll View ノードを使用します。

    ../../_images/create-scroll-view-2d1.png

  3. Node Tree で Viewport 2D ノードを Scroll View 2D ノードにドラッグします。

    ../../_images/viewport-in-scroll-view.png

  4. Node Tree で RootNode > Scroll View 2D > Viewport 2D > Car > Scene_Root > Camera_Root ノードを選択し、Properties で Layout Transformation プロパティの横にある image0 をクリックし、プロパティタイプに Rotation.Car.Camera.LayoutTransformation という名前を付けて、OK をクリックします。Kanzi Studio:

    • Layout Transformation プロパティから Rotation.Car.Camera.LayoutTransformation という名前のカスタムプロパティを作成します。

    • プレハブのルートノードである Car ノードに Rotation.Car.Camera.LayoutTransformation プロパティを追加し、Camera_Root ノードで Car ノードのプロパティへの #Template バインディングを作成します。

    • Car ノードで Rotation.Car.Camera.LayoutTransformation プロパティをよく使用されるプロパティとして表示します。

    Camera_Root ノードのレイアウト変換を、Car ノードの Rotation.Car.Camera.LayoutTransformation プロパティの値を設定することで行うことができます。

    ../../_images/camera_root-in-project.png ../../_images/publish-layout-transformation.png ../../_images/layout-transformation-binding.png

  5. Node Tree で RootNode > Scroll View 2D > Viewport 2D > Car ノードを選択し、プロパティで + Add Binding をクリックし、Binding Editor で以下を設定します。

    • Property から Rotation.Car.Camera.LayoutTransformation へ

    • Property Field から Rotation へ

    • Expression へ

      # Amount of pointer movement in pixels required to rotate the model 360 degrees.
pixelsPerRevolution = 3000.0

# Amount of pointer movement in pixels required to rotate the model 1 degree.
pixelsPerDegree = pixelsPerRevolution / 360.0

# The position of the Scroll View 2D node on the x axis.
scrollPositionX = {@../../ScrollViewConcept.ScrollPosition}.x
remainderPixels = mod(scrollPositionX, pixelsPerRevolution)

# Number of degrees to rotate.
degrees = remainderPixels / pixelsPerDegree

# Create the rotation in the Layout Transformation y axis.
createRotationY(degrees)

      このバインディング式では、pixelsPerRevolution 変数が車のモデルが完全に回転するために必要なポインタの移動量を設定します。ポインタを3000ピクセルドラッグすると、車のモデルは360度完全に回転します。

      Scroll Position プロパティを使用して、Scroll View 2D ノードの x 軸と y 軸の現在の値を確認できます。このバインディング式では、Scroll View 2D ノードの x 軸上の位置を取得して、y 軸上でカメラを回転させます。

      CreateRotationY バインディング関数を使用して、Layout Transformation の y 軸に回転を作成します。

    Save をクリックします。

    ../../_images/car-in-node-tree.png ../../_images/camera_root-binding.png

    ヒント

    Binding Editor でバインディングの式を書くとき、ノードとそのプロパティを式に追加する最も速くて正確な方法は、Properties から Binding Editor の Expression エディタにドラッグすることです。

    例えば、Scroll View 2D ノードの Scroll Position プロパティにバインドするには:

    1. Node Tree で Scroll View 2D ノードを選択します。

    2. Properties から Scroll Position プロパティを Binding Editor にドラッグし、Expression フィールドにドロップします。その後、.x を入力して Scroll Position プロパティ X プロパティフィールドにバインドします。

  6. Preview では、x 軸上でポインタをクリックしてドラッグすると、モデルを回転させることができます。

    ../../_images/rotation-intermediate.gif

  7. Scroll View ノードがスワイプしたポインターを離した後にオブジェクトをどのように移動させるかを調整するには、Node Tree で Scroll View 2D ノードを選択し、Properties で次を追加して設定します。

    • Sliding Acceleration から 20 まで

      Sliding Acceleration プロパティは、スワイプに使用するポインターを離した後のノードの加速度を設定します。Scroll View ノードによって制御されるノードがゆっくりと最終位置に到達するようにしたい場合は低い値を使用します。ノードが素早く最終位置に到達するようにしたい場合は高い値を使用します。

    • Sliding Drag から40まで

      Sliding Drag プロパティは、スワイプに使用するポインターを離した後に、ノードの動きにどれだけドラッグが影響するかを設定します。値が低いほどドラッグが強くなり、Scroll View ノードによって制御されるノードのスライドが速く停止します。

    ../../_images/scroll-view-in-project.png ../../_images/scroll-view-properties1.png

Preview 内でクリックしてポインタをドラッグすると、モデルが回転し、スムーズに停止します。

../../_images/rotation-completed.gif

次の作業

このチュートリアルでは、Scroll View コントロールを使用して3Dモデルを回転させる方法を学びました。回転を定義する Scroll View 2D ノードプロパティの値をさらに調整して、望む結果を得ることができます。例えば、Dragging Acceleration、Dragging Drag、および Dragging Impulse を使用して、モデルをスワイプする際にポインターを押し続けている間にモデルがどのように動くかを設定できます。

また、以下も行えます。

バインディングを使用して行えることの詳細については、バインディングの使用 を参照してください。

プレハブについて詳しく知るには、ノードプレハブの使用 を参照してください。

Kanzi アプリケーションの作成について詳しくは、チュートリアル を参照してください。

Kanzi Studio の機能について詳しく知るには、...を使用する をご覧ください。