Remotion LabRemotion Lab
›工具›從 Spline 匯入 3D 模型

從 Spline 匯入 3D 模型

使用 Spline 設計 3D 模型並匯出為 React Three Fiber 程式碼，在 Remotion 中製作 3D 動畫影片

從 Spline 匯入 3D 模型

作者：Dhroov Makwana 和 Jonny Burger

Spline 讓您可以在網頁上設計 3D 模型，並將這些模型匯出為 React Three Fiber 程式碼，可以直接在 Remotion 中使用並製作動畫。

本教程展示如何在 Spline 中設計、匯出並在 Remotion 中製作 3D 場景動畫。

在 Spline 中建立 3D 模型

以下是在 Spline 中建立圓環（Torus）3D 模型的完整步驟。您也可以跳過此部分，直接使用預建模型。

設定場景

  1. 前往 https://app.spline.design/，必要時建立新帳號。
  2. 點擊右上角的 New File 按鈕建立新專案。
  3. 點擊場景中的方塊並按 Backspace 刪除它（我們不需要它）。

新增圓環形狀

  1. 使用頂部工具欄的 + 圖示新增形狀，向下捲動並選擇 Torus。
  2. 當游標變成 + 時，點擊螢幕任意位置放置圓環。

相機旋轉可以透過在按住 Alt（Windows）或 Option（Mac）鍵的同時點擊並拖曳來改變。

定位和縮放

  1. 透過右鍵點擊圓環並選擇 Reset Position 將其置中，或在 Position 行的三個欄位中輸入 0。
  2. 在 Scale 行的三個欄位中輸入 2，將圓環縮放兩倍。

設定材質

  1. 在右欄的 Material 區域，點擊顏色選擇器旁的文字框並輸入 3489DC 或您喜歡的顏色。
  2. 點擊 Material 區域的 + 圖示，從下拉菜單選擇 Noise。
  3. 調整 Noise 圖層的混合模式為 Overlay，使顏色和噪點效果共存。
  4. 點擊 noise 旁的波浪線，選擇 Simplex Fractal 並將 Movement 設為 2。

匯出模型程式碼

  1. 刪除左欄的 Directional Light。
  2. 點擊頂部選單的 Export，選擇 Code (Experimental)，再選擇 react-three-fiber，最後點擊複製圖示。

在 Remotion 中製作 3D 動畫

1. 建立新專案

使用 React Three Fiber 模板建立新的 Remotion 專案：

npx create-video@latest

選擇 React Three Fiber 模板。

2. 安裝 Spline 套件

npm install @splinetool/r3f-spline

3. 建立 Torus 元件

在 src/Torus.tsx 中貼上從 Spline 複製的程式碼，並進行以下調整：

  • 移除 OrthographicCamera 的導入和 <OrthographicCamera> 元件（將使用 useThree 鉤子管理相機）

4. 新增 Remotion 導入

在 src/Torus.tsx 中新增以下導入：

import React, { useEffect } from 'react';
import { useThree } from '@react-three/fiber';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

5. 設定相機和動畫

在 Torus 函數中，useSpline() 呼叫之後新增以下程式碼：

const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();
 
// 定位相機
const camera = useThree((state) => state.camera);
useEffect(() => {
  camera.position.set(0, 0, -400);
}, [camera]);
 
// 持續旋轉動畫
const constantRotation = interpolate(
  frame,
  [0, durationInFrames],
  [0, Math.PI * 4]
);
 
// 入場動畫
const entranceAnimation = spring({
  fps,
  frame,
  config: { damping: 200 },
});
  • constantRotation：讓圓環持續旋轉
  • entranceAnimation：使用彈性動畫從 0 到 1 的過渡效果

6. 套用動畫到網格

找到 <mesh> 元素，替換其 scale 和 rotation 屬性：

<mesh
  scale={entranceAnimation + 3}
  rotation={[constantRotation / 2, constantRotation, 0]}
>

X 軸旋轉是 Y 軸的一半，所以 Y 軸每轉兩圈，圓環在 X 軸轉一圈。

7. 更新場景元件

在 src/Scene.tsx 中更新場景：

import { ThreeCanvas } from '@remotion/three';
import { useVideoConfig } from 'remotion';
import { Torus } from './Torus';
 
export const Scene: React.FC = () => {
  const { width, height } = useVideoConfig();
  return (
    <ThreeCanvas width={width} height={height}>
      <Torus />
    </ThreeCanvas>
  );
};

8. 匯出影片

npx remotion render

相關資源