3个dsvg
将 SVG 转换成交互式 React 3D 组件的最简单方法.
安装
npm install 3dsvg
同伴依赖性 : react, (中文(简体) ), react-dom, (中文(简体) ), three, (中文(简体) ), @react-three/fiber, (中文(简体) ), @react-three/drei
快速启动
import { SVG3D } from "3dsvg";
// 3D text
<SVG3D text="Hello" animate="spin" />
// SVG from your public folder
<SVG3D svg="/logo.svg" material="gold" animate="float" />
// Inline SVG markup
<SVG3D svg='<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5z"/></svg>' />
// Remote URL
<SVG3D svg="https://cdn.example.com/icon.svg" material="metal" />
下一个.js - 与 next/dynamic 安保部门安全:
const SVG3D = dynamic(
() => import("3dsvg").then((m) => ({ default: m.SVG3D })),
{ ssr: false }
);
演示词编辑器( E)
设计 三维对象可视化并导出嵌入式代码 3dsvg 设计。 。 。 .
道具
内容
提供其中之一 text 或者说 svg如果两者都给予, svg 优先处理.
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
text | string | —— 说 | 要以 三维格式翻译的文本 |
font | string | "DM Sans" | 谷歌字体名称( 见 可用字体(中文(简体) ) |
svg | string | —— 说 | SVG 标记或 URL (/logo.svg, (中文(简体) ), https://..., (中文(简体) ), ./path.svg(中文(简体) ) |
形状
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
depth | number | 1 | (0.5=平地;10=非常深地) |
smoothness | number | 0.2 | 曲线和贝壳质量, 0-1 |
color | string | "#ffffff" | 底色( 小时) |
材料
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
material | MaterialPreset | "default" | 材料预设(见下文) |
metalness | number | —— 说 | 覆盖预设的金属( 0-1) |
roughness | number | —— 说 | 覆盖预设粗糙度 (0-1) |
opacity | number | —— 说 | 覆盖预设不透明( 0– 1) |
wireframe | boolean | false | 线框渲染模式 |
材料预设 :
| 预设 | 金属 | 粗糙度 | 页:1 |
|---|---|---|---|
default | 0.15 (中文(简体) ) | 0.35 (简体中文) | 平衡起点 |
plastic | 0.0 数据 | 0.3 (韩语) | 平滑、非反射 |
metal | 0.9 (中文(简体) ) | 0.2 (韩语) | 破碎的金属 |
glass | 0.1 数据 | 0.05 (简体中文) | 有折射的透明 |
rubber | 0.0 数据 | 0.9 (中文(简体) ) | 马特,软 |
chrome | 1.0 国家 | 0.05 (简体中文) | 镜像倒影 |
gold | 1.0 国家 | 0.25 (中文(简体) ) | 自动应用金锡 |
clay | 0.0 数据 | 1.0 国家 | 满分 |
emissive | 0.0 数据 | 0.5 (韩语) | 自发发光 |
holographic | 0.8 (简体中文) | 0.1 数据 | 透明而有清衣 |
纹理
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
texture | string | —— 说 | 映射到 三维表面的图像 URL |
textureRepeat | number | 1 | 纹理瓦片数倍 |
textureRotation | number | 0 | 弧度纹理旋转 |
textureOffset | [number, number] | [0, 0] | 页:1 [x, y] |
当纹理被设定时,基色被上覆为白色,因此纹理在完全忠贞时会得到.
照明
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
lightPosition | [number, number, number] | [5, 8, 5] | 关键光位置 [x, y, z] |
lightIntensity | number | 1.2 | 关键亮度 |
ambientIntensity | number | 0.3 | 环境填充光 |
shadow | boolean | true | 显示联系人阴影 |
相机
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
rotationX | number | 0 | 初始 X 旋转(弧度) |
rotationY | number | 0 | 初始 Y 旋转(弧度) |
zoom | number | 8 | 相机距离 |
fov | number | 50 | 视野(度) |
相机在窄/相相上自动调整——它按比例放大,使3D对象总是适合可见区域.
互动
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
interactive | boolean | true | 师傅切换.. false 禁用拖放、缩放和轨道 |
cursorOrbit | boolean | true | 对象潜入光标 |
orbitStrength | number | 0.15 | 对象跟随光标的强度(弧度) |
draggable | boolean | true | 允许拖动旋转 |
scrollZoom | boolean | false | 允许卷轴缩放( 默认情况下关闭, 这样嵌入不会劫持页面卷轴) |
resetOnIdle | boolean | false | 不活动后返回默认位置 |
resetDelay | number | 2 | 重置触发前秒数 |
动画
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
animate | AnimationType | "none" | 循环动画类型(见下文) |
animateSpeed | number | 1 | 速度乘数 |
animateReverse | boolean | false | 倒转方向 |
动画类型 : none • 妇女 spin • 妇女 float • 妇女 pulse • 妇女 wobble • 妇女 spinFloat • 妇女 swing
介绍
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
intro | string | "zoom" | 内置动画 : zoom • 妇女 fade • 妇女 none |
introDuration | number | 2.5 | 持续时间( 秒) |
introFrom | object | { zoom: 18, opacity: 0 } | 开始状态 |
introTo | object | { zoom: 8, opacity: 1 } | 结束状态 |
版式
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
width | string | number | "100%" | 容器宽度 |
height | string | number | "100%" | 集装箱高度 |
background | string | "transparent" | 帆布背景颜色 |
className | string | —— 说 | 包装器上的 CSS 课 |
活动
| Prop | 类型 | 说明 |
|---|---|---|
onReady | () => void | 当WebGL 上下文准备就绪, 第一个帧被打开时开火 |
onAnimationComplete | () => void | 动画完成后会起火 |
onLoadingChange | (loading: boolean, progress: number) => void | 在几何处理过程中随加载状态和进度而起火 (0-100). 用它来显示自定义加载 UI . |
几何处理是同步的——复杂的SVG分批处理,以保持浏览器的响应性. 这个 onLoadingChange 回调让您跟踪进度并显示加载指标 :
<SVG3D
svgString={complexSvg}
onLoadingChange={(loading, progress) => {
if (loading) console.log(`Processing: ${progress}%`);
else console.log("Done");
}}
/>
可用字体
DM Sans · Bebas Neue · 游戏展会 · 正确 · 黑色操作 1 · 永久标记 · Rubik Mono One · Pacifico · Oswald · Archivo Black
许可证
麻省理工学院 - 雷纳托·科斯塔
赚到的 蓝莓 🫐