技能 react-three-fiber

📦

react-three-fiber

Name: react-three-fiber
Author: shreyam1008

内容修订 r1 安全 ⚙️ 外部命令

Build and Optimize React Three Fiber Scenes

React Three Fiber scenes can waste CPU and GPU resources through inefficient animation, loading, and rendering. This skill guides implementation choices for frame loops, instancing, assets, and adaptive quality.

支持: Claude Codex Code(CC)

🥉 78 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "react-three-fiber" from https://skillstore.io/skills/shreyam1008-react-three-fiber.md and its manifest at https://skillstore.io/api/skills/shreyam1008-react-three-fiber/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/shreyam1008-react-three-fiber.md 已签名 manifest GET /api/skills/shreyam1008-react-three-fiber/manifest 已签名 lockfile GET /api/skills/shreyam1008-react-three-fiber/lockfile

测试它

正在使用“react-three-fiber”。 Review a React Three Fiber viewer that keeps rendering while idle.

预期结果:

Recommend demand rendering for the idle viewer.
Identify imperative changes that require frame invalidation.
Keep rendering active during animation and measure behavior on target devices.

正在使用“react-three-fiber”。 Review a scene with many repeated meshes and high draw-call counts.

预期结果:

Recommend sharing geometry and materials across repeated meshes.
Compare drei Instances with raw InstancedMesh for the expected object count.
Measure draw calls and CPU overhead before accepting the optimization.

正在使用“react-three-fiber”。 Review inconsistent motion and repeated allocations in an animation loop.

预期结果:

Recommend delta-based rotation and smoothing.
Move reusable temporary objects outside the frame loop.
Avoid routing continuous animation through React state updates.

安全审计

安全

v1 • 2026/10/2 打开版本化报告

All 32 static findings are false positives caused by Markdown code fences and inline code formatting in SKILL.md. The examples describe browser rendering and React APIs, not Ruby or shell command execution. No evidence found of prompt injection, credential access, data exfiltration, or unauthorized commands.

已扫描文件

102

分析行数

复核项

已忽略误报

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/shreyam1008-react-three-fiber/security.svg)](https://skillstore.io/skills/shreyam1008-react-three-fiber?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/shreyam1008-react-three-fiber?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/shreyam1008-react-three-fiber/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/shreyam1008-react-three-fiber.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

shreyam1008. (2026). react-three-fiber security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1

BibTeX 引用

@techreport{shreyam1008-shreyam1008-react-three-fiber-2026,
  author = {shreyam1008},
  title = {react-three-fiber security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-three-fiber security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "shreyam1008"
date-released: "2026-10-02"
url: "https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1"
identifiers:
  - type: other
    value: "skillstore:shreyam1008-react-three-fiber:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

Create a Product Viewer

Configure demand rendering, cached model loading, and progressive loading for a product viewer that becomes idle.

Optimize Repeated Scene Objects

Compare shared resources, drei instancing, and raw InstancedMesh updates for scenes with many repeated objects.

Review Rendering Bottlenecks

Inspect frame-loop allocations, draw calls, lighting, and adaptive quality choices before selecting performance changes.

试试这些提示

Set Up a Basic Viewer

Help me configure a React Three Fiber product viewer using drei. Recommend Canvas settings and explain when demand rendering needs invalidation.

Improve Mesh Animation

Review this React Three Fiber animation: [component]. Replace per-frame state updates and repeated allocations with delta-based mutation and reusable objects.

Plan Asset Loading

Review my React Three Fiber model-loading flow: [details]. Recommend caching, preloading, compression, and Suspense boundaries compatible with my installed versions.

Evaluate Scene Performance

Analyze this React Three Fiber scene: [scene and measurements]. Compare instancing, raw InstancedMesh, adaptive quality, lighting changes, and cleanup.

最佳实践

Profile React work, draw calls, allocations, and GPU costs before selecting an optimization.
Check React, React Three Fiber, drei, and Three.js versions and peer dependencies together.
Choose the frame loop deliberately and dispose resources created imperatively.

避免

Updating React state or allocating temporary objects on every animation frame.
Using demand rendering without invalidation for imperative changes or ongoing animation.
Applying universal draw-call limits or quality settings without measuring target devices.

常见问题

What does this skill cover?

It guides React Three Fiber and drei scene setup, animation, loading, instancing, adaptive quality, profiling, and cleanup.

Which AI tools are supported?

The marketplace lists support for Claude, Codex, and Claude Code.

Does the skill run benchmarks automatically?

No. It recommends profiling methods and metrics, but includes no benchmark scripts or automated measurements.

When should I use demand rendering?

Use it for scenes that become idle. Imperative mutations require invalidation, and ongoing animation needs repeated invalidation or a continuous loop.

Does instancing always solve performance problems?

No. Instancing can reduce draw calls, but React-backed instances still incur CPU costs. Measure alternatives for large populations.

Can I use this skill for any Three.js project?

Its focus is React Three Fiber and drei. It is not intended for every plain Three.js or general 3D task.

开发者详情

作者

shreyam1008

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/shreyam1008/shre-skills/tree/ba9787f41c2fe1be1062eeb6322bc339a1026383/skills/react-three-fiber

引用

bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5

维护新鲜度

2026/10/2

使用量

0 次下载 · 0 次浏览

文件结构

📄 SKILL.md

react-three-fiber

使用我的智能体安装

Agent 可读资源

测试它

安全审计

风险因素

复制报告链接

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 评分

你能构建什么

Create a Product Viewer

Optimize Repeated Scene Objects

Review Rendering Bottlenecks

试试这些提示

最佳实践

避免

常见问题

开发者详情