react-three-fiber
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.
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の 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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「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.
セキュリティ監査
安全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.
リスク要因
⚙️ 外部コマンド (32)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](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/1BibTeX形式の引用
@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.
これらのプロンプトを試す
Help me configure a React Three Fiber product viewer using drei. Recommend Canvas settings and explain when demand rendering needs invalidation.
Review this React Three Fiber animation: [component]. Replace per-frame state updates and repeated allocations with delta-based mutation and reusable objects.
Review my React Three Fiber model-loading flow: [details]. Recommend caching, preloading, compression, and Suspense boundaries compatible with my installed versions.
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?
Which AI tools are supported?
Does the skill run benchmarks automatically?
When should I use demand rendering?
Does instancing always solve performance problems?
Can I use this skill for any Three.js project?
開発者情報
作成者
shreyam1008ライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5
メンテナンスの新しさ
2026/10/2
利用状況
0 ダウンロード · 0 閲覧
ファイル構成
📄 SKILL.md