技能 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 銅級

Maintain this Skill? Claim it 🥉 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

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊