3Dプロジェクション
PinePaper のキャンバスに 3D オブジェクトを直接レンダリングします。 3Dプロジェクションシステムは、5つのプロジェクションタイプ、5つのプリミティブ形状、GPU加速レンダリング、および軌道カメラをサポートしています.
プロフィール
PinePaperの3Dプロジェクションシステムは、キャンバス上の3Dポリゴンとして3Dプリミティブをレンダリングするスタンドアロンゼロ依存ライブラリ(〜18KBミニファイド)です。 オブジェクトは、通常の2Dアイテムと一緒に選択、ドラッグ、アニメーションすることができます.
投影タイプ
3Dオブジェクトを2Dキャンバスに表示する方法を選択します
| プロジェクト | コンテンツ |
|---|---|
| パースペクティブ | 偽造による現実的な深さ。 遠く離れたオブジェクトは小さくなります。 ビュー(FOV)の構成可能なフィールド. |
| オルタナティブ | 深さの歪み無し。 並列線は並行して残っています。 技術的な/工学デッサンで共通. |
| イソメトリック | 角軸軸方向(30°軸)。 人気のゲームアート そして建築図. |
| キャビネット | 深さの軸線が半分のスケールおよび45°で引かれる斜めの投射. |
| キャバリア | 深さの軸線がフルスケールおよび45°で描画される斜めの投射. |
プリミティブ
5つの作り付けの3Dの形:
| プリミティブ | コンテンツ |
|---|---|
| キューブ | 構成可能なサイズ |
| スフィア | 構成可能な半径および区分の計算 |
| シリンダー | 構成可能な半径および高さ |
| トーラス | 構成可能な主要な/minorの半径 |
| コーン | 構成可能な半径および高さ |
各プリミティブは、すべての軸にカスタム色と回転をサポートしています.
GPUアクセラレーション
レンダリングは自動的に最もよい利用できるバックエンドを選びます:
- WebGPUの計算 —利用できるとき最も速く、使用されて
- WebGL2はフィードバックを変形させます —速いフォールバック
- CPU** — ユニバーサルフォールバック
シーンが150面を超えると、GPUアクセラレーションが自動的に活性化します.
カメラ
軌道のカメラは視野角を制御することを可能にします:
- 位置 — カメラが3D空間にある場所
- Target — カメラが見える場所(軌道センター)
- ビューの修正 — 視点の歪み量(パースペクティブモードのみ)
3Dオブジェクトの選択とドラッグ
3Dオブジェクトは2Dアイテムと同様に、キャンバスで選択可能でドラッグできます
- 3Dオブジェクトをクリックして選択します
- ドラッグして再配置
- ドラッグ&リスタート時に自動停止
- アニメーションフレームを渡るドラッグされた位置は主張します
3D映写ショーケーステンプレート
プレビルドされたテンプレートは、複数のプリミティブ、回転アニメーション、および異なるプロジェクションタイプの3D投影システムを示しています。 テンプレートライブラリで見つけます.
制限事項
- 標準アニメーションプリセット(フェード、バウンス、スクロール、パルスなど)は3Dオブジェクトではサポートされていません。 3Dオブジェクトは、3Dレンダリングパイプラインを介して独自の回転アニメーションシステムを使用します。 3Dオブジェクトに標準アニメーションを適用しても効果はありません.
- 3Dオブジェクトは、フラットポリゴンのフィリングとしてレンダリングします。テクスチャマッピング、照明、影はありません.
- 3Dオブジェクト間の衝突検出はまだ利用できません.
ニュース
- イソメトリックで始める — 図やイラストに最も視覚的にアピール
- 回転アニメーションを使用 — 3Dオブジェクトを回転させると、深さが強い
- 2D項目とのCombine — 3Dのプリミティブをテキストと形状を組み合わせてインフォグラフィックスタイルの構成
- カメラの間隔を調節して下さい — 劇的な深さのためのより近い平面の視野のためにカメラを更に動かして下さい
※関連:** アニメーション | キーフレームエディタ | テンプレート