1 个不稳定版本

0.2.1	2022年10月25日

#1213 在 WebAssembly

MIT 许可证

1.5MB
5K SLoC

Yew Spline

Yew Spline 是基于 @splinetool/runtime NPM package 的 Yew 运行时组件，因此您可以在 Yew 中显示 Spline 场景。

Spline 是一个 3D 编辑器，允许您创建可交互的 3D 场景，在网页上查看。更多信息请访问 https://spline.design/。

如何使用

首先将 yew_spline 添加到您的 cargo.toml 中

[dependencies]
yew = "0.19.3^"
yew_spline = "..."

然后在您的 Html 中使用组件

示例

使用 splinecode URL

use yew::prelude::*;
use yew_spline::spline::Spline;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Spline scene={"https://prod.spline.design/123/scene.splinecode"} />
    }
}

使用本地 splinecode 文件
如果您下载 splinecode 文件以在本地使用而不是从 Spline 服务器加载，您必须在 index.html 文件中将该目录链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yew Spline</title>

    <link data-trunk rel="copy-dir" href="./src/assets">
</head>
<body>
    
</body>
</html>

在这个示例中，我有标准的 src 文件夹，但我有一个包含 spline 文件的 assets 文件夹。

use yew::prelude::*;
use yew_spline::spline::Spline;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Spline scene={"assets/spline/scene.splinecode"} />
    }
}

许可证

Yew Spline 是 MIT 许可。请参阅许可证

依赖项

~12MB
~219K SLoC