スキル threejs-geometry
📦

threejs-geometry

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

Build and Optimize Three.js Geometry

Three.js geometry work requires careful choices about vertex data, draw calls, and renderer compatibility. This skill provides focused examples for shapes, custom buffers, instancing, and WebGPU adaptations.

対応: Claude Codex Code(CC)
Maintain this Skill? Claim it 📊 73 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
Review the Skillstore skill "threejs-geometry" from https://skillstore.io/skills/cloudai-x-threejs-geometry.md and its manifest at https://skillstore.io/api/skills/cloudai-x-threejs-geometry/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

テストする

「threejs-geometry」を使用しています。 How should I render 1,000 colored boxes efficiently?

期待される結果:

  • Use InstancedMesh when all boxes share geometry and a compatible material.
  • Assign each transform and color, then mark the instance matrix and color buffers for upload.
  • Refresh bounding volumes after movement and use the raycast instance identifier to select individual boxes.

「threejs-geometry」を使用しています。 My large points and closed line disappear or look different under WebGPU. What should change?

期待される結果:

  • The WebGPU backend renders point primitives at one pixel regardless of material size.
  • Use an instanced Sprite with PointsNodeMaterial for larger points.
  • Replace LineLoop with Line and repeat the first point at the end to close the shape.

「threejs-geometry」を使用しています。 What must I update after changing vertex positions?

期待される結果:

  • Mark the position attribute for upload after editing its values.
  • Recompute vertex normals when the surface shape changes.
  • Refresh the bounding box and bounding sphere for culling and raycasting.

セキュリティ監査

安全

All 72 static findings are false positives caused by Markdown code fences or inline code, not Ruby or shell execution. The source provides Three.js geometry examples, including a relative font asset request. No evidence found of prompt injection, credential access, data exfiltration, or malicious instructions.

1
スキャンされたファイル
501
解析済み行数
0
レビュー項目
0
誤検知を無視
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/cloudai-x-threejs-geometry/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/cloudai-x-threejs-geometry/security.svg)](https://skillstore.io/skills/cloudai-x-threejs-geometry?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/cloudai-x-threejs-geometry?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cloudai-x-threejs-geometry/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/cloudai-x-threejs-geometry.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形式の引用

cloudai-x. (2026). threejs-geometry security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cloudai-x-threejs-geometry/audits/1

BibTeX形式の引用

@techreport{cloudai-x-cloudai-x-threejs-geometry-2026, author = {cloudai-x}, title = {threejs-geometry security audit report (audit version 1)}, institution = {Skillstore}, year = {2026}, number = {1}, url = {https://skillstore.io/skills/cloudai-x-threejs-geometry/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: "threejs-geometry security audit report (audit version 1)" version: "unspecified" type: report authors: - name: "cloudai-x" date-released: "2026-11-07" url: "https://skillstore.io/skills/cloudai-x-threejs-geometry/audits/1" identifiers: - type: other value: "skillstore:cloudai-x-threejs-geometry:audit:1" description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由 証拠の信頼度: 中
55
アーキテクチャ
65
保守性
87
コンテンツ
65
コミュニティ
70
仕様準拠

作成できるもの

Prototype Interactive 3D Shapes

Choose built-in or path-based geometry and add text, edges, and wireframes to a browser scene.

Optimize Repeated Scene Objects

Compare instancing, batching, and static merging while managing transforms, colors, bounds, and shared resources.

Adapt Visualizations for WebGPU

Replace unsupported line loops, adapt point sizing, and express per-instance offsets with TSL nodes.

これらのプロンプトを試す

Create a Basic Shape
Use threejs-geometry to create a rotating box in Three.js r186 with WebGLRenderer and MeshNormalMaterial. Include scene, camera, and render-loop setup.
Build Custom Vertex Data
Create an indexed quad using BufferGeometry with positions, normals, UVs, and normalized byte colors. Explain attribute sizes and updating one vertex safely.
Optimize Repeated Meshes
Replace 1,000 identical box meshes with InstancedMesh, preserving transforms and colors. Include runtime updates, bounds refresh, raycast instance identification, and shared-resource disposal guidance.
Adapt a Scene for WebGPU
Adapt a Three.js r186 scene with large points, closed lines, and custom instance offsets for WebGPURenderer. Use sprite-based points, repeated endpoints, and TSL positionLocal.

ベストプラクティス

  • Confirm your Three.js version and renderer backend before applying examples, especially for WebGPU-specific behavior.
  • Match attribute layouts and index state before merging or batching geometries; refresh bounds after geometry or instance movement.
  • Share geometry deliberately, choose segment counts carefully, and dispose resources only when their users no longer need them.

回避

  • Creating separate draw calls for thousands of identical meshes without considering InstancedMesh.
  • Editing vertex or instance data without upload flags or refreshed bounding volumes.
  • Assuming WebGL point sizes, line loops, or ShaderMaterial code transfer unchanged to WebGPURenderer.

よくある質問

What does this skill provide?
It provides a Three.js geometry reference with JavaScript examples for shapes, custom buffers, instancing, batching, morph targets, and renderer differences.
Which Three.js version does it target?
The source targets Three.js r186. Check API compatibility before using its examples with another release.
Does it cover both WebGL and WebGPU?
Yes. Most examples use WebGLRenderer, while a dedicated section explains WebGPURenderer differences and TSL adaptations.
Does the package include a runnable application or font files?
No. It contains one Markdown reference file. Configure Three.js separately and supply the font asset required by the text example.
When should I use instancing instead of batching?
Use InstancedMesh for repeated copies of one geometry. BatchedMesh supports different geometries sharing a material, with performance depending on the rendering backend.
Can I use this skill with Claude, Codex, or Claude Code?
The report lists Claude, Codex, and Claude Code as supported tools. State your Three.js version and renderer when requesting geometry changes.

開発者情報

作成者

cloudai-x

ライセンス

不明

Skillstore リビジョン

r1

バージョンに関する注意

作者はバージョンを宣言していません。

参照

c993c6abcbffafea2683d7748b53b3dfaf438415

メンテナンスの新しさ

2026/11/9

利用状況

0 ダウンロード · 0 閲覧

ファイル構成

📄 SKILL.md

cloudai-x のその他のスキル

すべて表示
すべて表示
📦

threejs-skills

77

Three.js WebGLエクスペリエンスを作成する

作成者 sickn33

ブラウザ向けの3Dシーン構築は、セットアップ、ライティング、コントロール、パフォーマンスを連携させる必要があるため、エラーが発生しやすい作業です。このスキルは、信頼性の高いシーン、アニメーション、インタラクションのための実用的なThree.jsパターンを提供します。

コーディング&開発 表示