Spline 介绍

Spline是一个免费的在线3D模型协作设计软件。提供可实时协作的在线3D建模工具，可以帮助用户和团队成员快速进行创建3D场景、编辑材质和3D对象建模工作，为创造力打开了一扇新的大门。使用可靠的功能将帮助你创建最佳的3D设计。

Spline design 官方网站

运用

官方网站中有大量的示例图形，有兴趣的可以打开下方链接了解详情。

Spline Degign Examples 官方示例

常见的大屏展示

精美炫酷网站

实践说明

接下来我们尝试使用 React 学习了解Spline在web网站中的实践运用。

首先像这种炫酷图形肯定是由专业的设计师完成了全量的模型设计的，而在Spline的实例中，我们是无法对模型进行增减绘制的，所以我们是无法灵活创建的，任何模型都需要设计师预先添加。但是Spline给我们提供了可交互的API。

Spline 支持以下事件响应：

mouseDown
mouseHover
mouseUp
keyDown
keyUp
start
lookAt
follow

注意：需要响应任何事件时，则必须在模型上面添加响应的事件才能触发！！！

学习目标说明

既然图形是预先做好的，那我们只需要关注也只能专注于事件交互与数据交互上。无非就是以下一些交互功能

鼠标悬浮时交互
鼠标在特定图形上点击时
鼠标在图形上移动时
各种事件响应如果做数据交互
当然还有如何渲染到页面上

事件响应 - 官方文档
 npm中的文档

开发前的准备

明确学习目标之后，我们可以随便找一个简单又能覆盖常见场景的模型，这里我选择了键盘模型。web端使用 React 来渲染展示。

首先注册一个Spline账号，然后创建模型，选择官方示例的键盘模型，可以直接使用Google账号登录
在模型右侧属性栏中，添加可交互事件。
点击图形顶部操作菜单的 Export 导出模型，可以获得图形远程渲染地址

正式实践

项目搭建与图形导入

使用 React 官方脚手架创建项目

create-react-app spline-demo

打开spline-demo项目，安装@splinetool/react-spline、@splinetool/runtime官方包

npm install @splinetool/react-spline @splinetool/runtime

获取我们的模型访问地址：
在项目App.js中，修改为以下代码

import Spline from "@splinetool/react-spline";

function App() {
  return (
    <div>
      <Spline scene="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode" />
    </div>
  );
}

export default App;

运行项目 npm run start 即可查看渲染效果，如下图。

图形有点小，我们做下放大处理。

进入Spline编辑器
调整图形到合适的大小与视图位置
使用导出功能 Export，然后点击 Update Viewer 更新视图

更新完毕后，直接回到我们的 React 项目中，刷新web页面即可：

鼠标事件键盘事件

mouseDown、onWheel、mouseUp、mouseHover与键盘响应keyDown、keyUp都是非常相似的，就以mouseDown为例。

在 States 中添加显示状态 "兔子按键下沉"，并将图像中的兔子按键设计成下沉状态(选中坐标轴拖动即可)
在 Events 中添加交互事件，选中 Mouse Down 事件、开启Toggle切换、Actions选择"兔子按键下沉"
使用Export => update viewer 菜单功能更新视图

4. App.js中添加 onMouseDown事件

import Spline from "@splinetool/react-spline";

const style = {
  height: "100vh",
};

function App() {
  // 添加事件绑定
  const onMouseDown = (e) => {
    console.log("点击事件响应：", e);
  };

  return (
    <div style={style}>
      <Spline
        onMouseDown={onMouseDown}
        scene="https://prod.spline.design/OlbVH8WBtlZHjQhh/scene.splinecode"
      />
    </div>
  );
}

export default App;

web网站上面的交互结果示意图：

Follow - 鼠标跟随

一样是在图形上添加相应的 Follow功能，添加后update viewer 一下。

onLookAt 视线跟随

在图形上添加相应的 Look At功能，添加后update viewer 一下。想象这键盘就是个兔子，鼠标在哪里，兔子就转向看向哪里。视线跟随着鼠标的位置。

onLoad 加载完成

spline加载完成就会触发 onLoad事件，在onload事件回调参数中可以获得 spline 整体的一个实例对象。

const style = {
  height: "90vh",
};

const App = () => {

  const splineRef = useRef(null);
  const onLoad = (spline) => {
    splineRef.current = spline;
    console.log("spline", spline);
  };

  return (
    <div style={style}>
      <button onClick={onClick}>重新渲染</button>
      <Spline
        onLoad={onLoad}
        scene="https://prod.spline.design/OlbVH8WBtlZHjQhh/scene.splinecode"
      />
    </div>
  );
};

findObjectByName 搜索兔子按键

调用findObjectByName根据模型名称获取场景的子对象，并返回具有该名称的第一个对象。

const bunny = splineRef.current.findObjectByName("bunny");
console.log("bunny", bunny);

查看控制台，可以看到实例对象的字段信息，可以看到 uuid 和之前事件响应回来的实例 id 一致

findObjectById 获取兔子按键

调用findObjectById根据模型uuid获取场景的子对象，并返回具有该uuid的对象。

const bunny = splineRef.current.findObjectById("c792e64e-4f19-4638-b5d2-382c0efe0a13");
console.log("bunny", bunny);

更改模型位置信息

// 使用 findObjectById 获取实例
const bunny = splineRef.current.findObjectById("c792e64e-4f19-4638-b5d2-382c0efe0a13");
// 修改 Y 坐标值
bunny.position.y += 100;

隐藏模型

// 使用 findObjectById 获取实例
const bunny = splineRef.current.findObjectById("c792e64e-4f19-4638-b5d2-382c0efe0a13");
bunny.position.visible = false

emitEvent、emitEventReverse

这两是调用 Spline 中一些预设好的场景事件的
例如：触发兔子按键(bunny)的 mouseHover事件

splineRef.current.emitEvent('mouseHover', 'bunny');

导出功能 Exporting as Code：Vanilla JS、Three.js、react-three-fiber

大屏 Spline design 高大上的特效如何对接开发React