三维投影

2 min read

直接在 PinePaper 畫布上渲染 3D 物件 。 3D投影系統支持五種投影類型,五種原始形狀,GPU加速渲染,以及一個軌道相機.

概述

PinePaper 的 3D 投影系統是獨立的零依赖性文庫(~18KB minifed),它使 3D 原始形為畫布上的 2D 多边形 。 可以選擇物件、 拖曳、 動畫與普通的 2D 項目一起 .

投影類型

選擇如何將 3D 物件投射到 2D 畫布 :

投影 描述
前景 真實的深度與預期的短。 更遠處的物件看起來更小 配置視域( FOV) .
整形 沒有深度扭曲 。 平行線仍平行。 在技術/工程畫作中常见.
同位素 等角方位方位( 30° 斧頭) 。 在遊戲藝術中流行 和建筑圖.
内阁 斜向投影, 深度轴以半比例和45°畫出 .
木牌 斜向投影,深度轴按全比例和45°畫出.

原始

5 內置的 3D 形狀:

原始 描述
立方体 可配置大小
球體 可配置半徑和段數
汽缸 可配置半徑和高度
托魯斯 可配置的主要/小型射线
锥形 可配置半徑和高度

每根原始都支持自訂顏色和所有斧頭的旋轉 .

GPU 加速

自動選擇最佳後端介面 :

  1. WebGPU 计算——最快,可用時使用
  2. WebGL2 轉換回應 — 快速回落
  3. CPU——普遍退伍

GPU 加速自動啟動, 當一幕超过 150 個面孔 .

相機

轨道攝影機可以控制觀景角度:

  • 相機在3D空間
  • 目标 —— 攝影機看( 軌道中心)
  • 視域 – 視窗扭曲量( 只視窗模式)

選擇拖曳 3D 物件( D)

3D 物件可以選擇和拖曳在畫布上, 就像 2D 項目一樣 :

  • 點擊三维物件以選擇它
  • 拖曳以重新定位
  • 動畫在拖曳時自動暫停, 在放行時恢復
  • 拖曳位置在動畫框內持續

3D 投影顯示樣本

預建的樣本顯示了 3D 投影系統, 包括多種原始作品、 旋轉動畫以及不同的投影類型 。 在樣本庫中找到它 .

限制

  • 標準動畫預置(淡出、反彈、卷動、脈搏等)不支援在3D物件上。 3D 物件透過 TreeD 渲染管道使用自動動動畫系統 。 套用標準動畫到 3D 物件將沒有效果 .
  • 3D 物件會變成平坦的多邊形 —— 沒有纹理映射、 照明或陰影 .
  • 尚未有 3D 物件之間的碰撞測試 .

提示

  1. 圖和圖畫最吸引人
  2. 使用旋轉動畫 — 旋轉的 3D 物件具有強烈的深度感
  3. 与 2D 項目配合 —— 混合 3D 原始文字與形狀, 以表示圖形樣式的构成
  4. 攝影機距離 距離 相機距離

相關: [動畫] (/features/animations) | [关键框架編輯器] (/features/keyframes) | [em2Q]