Skip to main content

从 Spline 导入

作者: Dhroov MakwanaJonny Burger

Spline 允许在网络上设计 3D 模型。它允许将这些模型导出为 React Three Fiber 代码,这意味着可以直接在 Remotion 中使用和动画化。

本教程展示了如何使用 Spline 和 Remotion 设计、导出和动画化场景。

在 Spline 中创建 3D 模型

在这部分中,我将介绍在 Spline 中创建 3D 模型的所有步骤,如果您愿意,您也可以跳过此部分,直接访问构建好的模型 这里

  1. 访问 https://app.spline.design/,如有必要,创建一个新账户。

  2. 点击右上角的 New File 按钮创建一个新项目。

    空白工作区

  3. 点击场景中的方框,按 Backspace 键,因为我们不需要它。稍后我们也会删除定向光,但现在保留它。

  4. 可以使用顶部工具栏上的 + 图标添加新形状。点击它,向下滚动并选择 Torus

    顶部菜单 左侧菜单

  5. 当您的光标变成 + 时,在屏幕上的任意位置点击以放置圆环。

    空白圆环

note

可以通过点击并拖动同时按住 Alt(Windows)或 Option(Mac)键来更改相机旋转。

  1. 通过右键单击圆环,向下滚动并选择 Reset Position 来将圆环居中。或者,您可以在右侧的 Position 行的三个字段中输入 0。

  2. 通过在 Scale 行的三个字段中输入 2 来将圆环放大两倍。

    位置选项

  3. 您可以在形状部分尝试不同的字段来修改环面,但我们将继续使用默认属性。

    形状选项

  4. 滚动到右侧栏的材质部分,单击颜色选择器旁边的文本框,并输入3489DC或您喜欢的任何颜色。在 Spline 中,对 3D 对象的效果是作为图层应用的,让我们添加另一个效果。

  5. 单击材质部分的**+图标,从下拉菜单中选择噪音**

    噪音图层

  6. 您会注意到您之前选择的颜色已被黑白噪音取代,这是因为噪音图层覆盖了其下的所有图层。为了解决这个问题,请单击噪音行中 100 右侧的图标,并选择叠加

    叠加

  7. 最后,让我们更改噪音类型,以获得更好的视觉效果。单击噪音旁边的波浪线,选择Simplex Fractal并将Movement设置为 2。

    更改噪音类型

您的 3D 模型应该看起来像这样:

完成的环面

  1. 在左侧栏中单击Directional Light,然后按Backspace键,因为我们不再需要它。
  2. 在顶部菜单中单击导出。单击第一个下拉菜单并选择代码(实验性)。在第二个下拉菜单中选择react-three-fiber。最后,单击代码部分中的复制图标以复制生成的代码。

导出模型代码

使用 Remotion 对 3D 模型进行动画

  1. 运行npx create-video@latest从 React Three Fiber 模板创建一个新的 Remotion 项目。

    项目启动器

  2. 安装@splinetools/r3f-spline包:

    shell
    npm install @splinetool/r3f-spline
    shell
    npm install @splinetool/r3f-spline
  3. src/Torus.tsx 中创建一个新文件,其中包含从 Spline 复制的代码。

  4. 移除 OrthographicCamera 的导入,并移除 <OrthographicCamera> 组件,因为我们将使用 useThree 钩子来控制相机。

  5. src/Scene.tsx 中,用以下内容替换默认场景:

src/Root.tsx
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>
);
};
src/Root.tsx
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>
);
};
  1. src/Torus.tsx 中添加以下导入:
src/Torus.tsx
ts
import React, { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
src/Torus.tsx
ts
import React, { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
  1. useSpline() 调用下方的 Torus 函数内添加以下代码:
src/Torus.tsx
tsx
const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();
src/Torus.tsx
tsx
const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();

将相机定位到距离中心点 200 的 z 偏移处。

src/Torus.tsx
tsx
const camera = useThree((state) => state.camera);
useEffect(() => {
camera.position.set(0, 0, -400);
camera.near = 0.2;
camera.far = 1000;
camera.lookAt(0, 0, 0);
}, [camera]);
src/Torus.tsx
tsx
const camera = useThree((state) => state.camera);
useEffect(() => {
camera.position.set(0, 0, -400);
camera.near = 0.2;
camera.far = 1000;
camera.lookAt(0, 0, 0);
}, [camera]);
  1. 添加一些动画。在上述代码下方插入以下内容:
src/Torus.tsx
tsx
const constantRotation = interpolate(
frame,
[0, durationInFrames],
[0, Math.PI * 6],
);
 
const entranceAnimation = spring({
frame,
fps,
config: {
damping: 200,
},
});
src/Torus.tsx
tsx
const constantRotation = interpolate(
frame,
[0, durationInFrames],
[0, Math.PI * 6],
);
 
const entranceAnimation = spring({
frame,
fps,
config: {
damping: 200,
},
});
  • constantRotation 会导致 Torus 永久旋转。Math.PI * 2 等于完整的 360 度旋转。
  • entranceAnimation 使用弹簧动画在一定时间内从 0 到 1 进行动画。
  1. 找到 <mesh> 元素,并将其 scalerotation 参数替换为:
tsx
scale={entranceAnimation + 3}
rotation={[constantRotation / 2, constantRotation, 0]}
tsx
scale={entranceAnimation + 3}
rotation={[constantRotation / 2, constantRotation, 0]}
note

X 轴旋转是 Y 轴旋转的一半,因此在 Y 轴旋转两次时,我们的 Torus 将在 X 轴旋转一次。

  1. 完成!在 Remotion Studio 中查看旋转的 Torus。

  2. 如果要将视频导出为 MP4 视频文件,请运行:

shell
npm run build
shell
npm run build

最终结果 / 生成的视频

鸣谢

CONTRIBUTORS

另请参阅