Skip to main content

从 Spline 导入

作者: Dhroov Makwana 和 Jonny Burger

🌐 Authors: Dhroov Makwana and Jonny Burger

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

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

🌐 This tutorial shows how to design, export and animate a scene with Spline and Remotion.

在 Spline 中创建 3D 模型​

🌐 Create the 3D model in Spline

在这一部分，我将讲解在 Spline 中创建 3D 模型的所有步骤，如果你愿意，也可以跳过这一部分，直接访问已经建立的模型 这里。

🌐 In this part I will go over all the steps for creating a 3D model in Spline, if you wish to, you can also skip this part and directly access the built model here.

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

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

    空白工作区

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

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

    顶端菜单 左侧菜单

  5. 一旦你的光标变成 +，点击屏幕上的任何位置来放置圆环。

    空环

note

在按住 Alt （Windows）或 Option （Mac）键的同时，点击并拖动可以更改相机旋转。

  1. 通过右键点击环面，将其居中，向下滚动并选择 Reset Position。或者，你也可以在右侧位置行的三个字段中输入 0。

  2. 在缩放行的所有三个字段中输入 2，将圆环缩放两倍。

    位置选项

  3. 你可以在 Shape 部分尝试不同的字段来修改圆环，但我们将继续使用默认属性。

    形状选项

  4. 向下滚动到右栏的 材质 部分，点击颜色选择器旁边的文本框并输入 3489DC 或你喜欢的任何颜色。在 Spline 中，3D 对象的效果是以图层的形式应用的，让我们再添加一个效果。

  5. 点击 材质 部分的 + 图标，然后从下拉菜单中选择 噪声

    噪声层

  6. 你会注意到你之前选择的颜色已经被黑白噪点替代，这是因为噪点图层覆盖了它下面的所有图层。要解决这个问题，点击噪点行中数字100右侧的图标，然后选择叠加。

    覆盖

  7. 最后，让我们更改噪声类型，只是为了更好的视觉效果。点击噪声旁边的曲线线条，选择简单分形，并将运动设置为2。

    更改噪声类型

你的3D模型应该看起来像这样：

🌐 Your 3D model should look like this:

Completed Torus

  1. 点击左列中的 Directional Light，然后按下 Backspace 键，因为我们不再需要它。
  2. 点击顶部菜单中的 Export。点击第一个下拉菜单并选择 Code (Experimental)。在第二个下拉菜单中选择 react-three-fiber。最后，点击代码区域的复制图标以复制生成的代码。

Export Model Code

使用 Remotion 动画化 3D 模型​

🌐 Animating 3D Model using Remotion

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

    项目启动器

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

    npm install @splinetool/r3f-spline

  3. 在 src/Torus.tsx 创建一个新文件，并粘贴你从 Spline 复制的代码。

  4. 移除 OrthographicCamera 导入和 <OrthographicCamera> 组件，因为我们将使用 useThree 钩子来处理相机。

  5. 在 src/Scene.tsx 中，用以下内容替换默认场景：

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

将相机定位以从 200 的 z 偏移量查看中心点。

🌐 Position the camera to look at the center point from 200 z offset.

src/Torus.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

const constantRotation = interpolate(
  frame,
  [0, durationInFrames],
  [0, Math.PI * 6],
);

const entranceAnimation = spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});
  • constantRotation 会导致环体无限旋转。Math.PI * 2 等于完整的360度旋转。
  • entranceAnimation 使用弹簧动画随时间从 0 动画到 1。
  1. 找到 <mesh> 元素并将其 scale 和 rotation 参数替换为：
scale={entranceAnimation + 3}
rotation={[constantRotation / 2, constantRotation, 0]}
note

X轴的旋转是Y轴旋转的一半，因此Y轴每转两圈，我们的圆环在X轴上将旋转一圈。

  1. 就这样！在 Remotion Studio 中看到一个旋转的环面。

  2. 如果你想将你的视频导出为 MP4 视频文件，请运行：

npx remotion render

最终结果 / 生成的视频​

🌐 Final Result / Generated Video

鸣谢​

🌐 Credits

CONTRIBUTORS

另请参阅​

🌐 See also

Last updated on