技能 threejs-webgl
📦
threejs-webgl
內容修訂 r1 安全 🌐 網路存取⚙️ 外部命令
Build Interactive Three.js Scenes
Building browser-based 3D scenes requires coordinating rendering, assets, interaction, and performance. This skill provides Three.js examples, reference guides, and a WebGL starter to support implementation.
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "threejs-webgl" from https://skillstore.io/skills/freshtechbro-threejs-webgl.md and its manifest at https://skillstore.io/api/skills/freshtechbro-threejs-webgl/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「threejs-webgl」。 Create a simple interactive Three.js demo.
預期結果:
- Scene structure with a perspective camera, WebGL renderer, and orbit controls.
- Animated cube, sphere, and torus with PBR materials and shadow lighting.
- Resize handling and a checklist for checking the demo in a browser.
正在使用「threejs-webgl」。 My mobile scene slows down when hundreds of objects appear.
預期結果:
- A prioritized review of draw calls, geometry duplication, texture resolution, and shadow settings.
- An instancing proposal for repeated meshes, with shared materials and a lower pixel ratio.
- Before-and-after measurements for frame time, draw calls, and resource counts.
正在使用「threejs-webgl」。 Plan a viewer for my glTF product model.
預期結果:
- A model loading plan with progress, error handling, and camera framing.
- Material and lighting choices for the supplied product.
- Separate requirements for external decoder assets, animation updates, and resource cleanup.
安全審計
安全v1 • 2026/10/10 開啟版本化報告
All 75 static findings are false positives: documented CDN imports, Markdown formatting, GLSL strings, and graphics terminology. The version-pinned CDN imports load rendering dependencies, with no evidence of data exfiltration. No evidence found of prompt injection or malicious intent in the reviewed files.
8
已掃描檔案
2,538
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (50)
references/materials_guide.md:398-399 references/materials_guide.md:409-416 SKILL.md:18-29 SKILL.md:29-46 SKILL.md:46-97 SKILL.md:97-101 SKILL.md:101-111 SKILL.md:111-117 SKILL.md:117-138 SKILL.md:138-142 SKILL.md:142-179 SKILL.md:179-183 SKILL.md:183-204 SKILL.md:204-208 SKILL.md:208-243 SKILL.md:243-247 SKILL.md:247-268 SKILL.md:268-272 SKILL.md:272-290 SKILL.md:290-296 SKILL.md:296-318 SKILL.md:318-322 SKILL.md:322-325 SKILL.md:325-329 SKILL.md:329-347 SKILL.md:347-352 SKILL.md:352-366 SKILL.md:366-369 SKILL.md:369-372 SKILL.md:372-380 SKILL.md:380-383 SKILL.md:383-389 SKILL.md:389-394 SKILL.md:394-396 SKILL.md:396-399 SKILL.md:399-413 SKILL.md:413-418 SKILL.md:418-430 SKILL.md:430-451 SKILL.md:451-460 SKILL.md:460-468 SKILL.md:468-480 SKILL.md:480-489 SKILL.md:489 SKILL.md:492-498 SKILL.md:498-501 SKILL.md:501-508 SKILL.md:508-509 SKILL.md:509-510 SKILL.md:510-513
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/freshtechbro-threejs-webgl/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/freshtechbro-threejs-webgl?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/freshtechbro-threejs-webgl?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/freshtechbro-threejs-webgl/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/freshtechbro-threejs-webgl.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 引用
freshtechbro. (2026). threejs-webgl security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/freshtechbro-threejs-webgl/audits/1BibTeX 引用
@techreport{freshtechbro-freshtechbro-threejs-webgl-2026,
author = {freshtechbro},
title = {threejs-webgl security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/freshtechbro-threejs-webgl/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-webgl security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "freshtechbro"
date-released: "2026-10-10"
url: "https://skillstore.io/skills/freshtechbro-threejs-webgl/audits/1"
identifiers:
- type: other
value: "skillstore:freshtechbro-threejs-webgl:audit:1"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 中 82
架構
85
可維護性
87
內容
65
社群
78
規範符合度
你可以打造什麼
Prototype a Product Viewer
Adapt the WebGL starter to display a supplied product model with orbit controls, lighting, and selectable materials.
Explore Materials and Shaders
Compare PBR settings and adapt GLSL examples for interactive visual experiments.
Improve Mobile Rendering
Use the optimization checklist to investigate draw calls, texture memory, shadow cost, and repeated object rendering.
試試這些提示
Create a First Scene
Create a basic Three.js WebGL scene with a rotating cube, orbit controls, lighting, and resize handling. Explain the required dependencies.
Load a Product Model
Adapt the starter to load my supplied glTF product model. Add selectable material colors, shadows, and loading errors without assuming decoder assets are bundled.
Diagnose Performance
Review my supplied Three.js scene and profiling results for mobile performance. Prioritize instancing, texture sizes, pixel ratio, shadows, and disposal with measurable checks.
Integrate a Shader Effect
Integrate an animated GLSL material and render target into my supplied WebGL scene. Define uniform updates, cleanup, fallback behavior, and device verification.
最佳實務
- Match examples and addon imports to the installed Three.js version, and provide required model, texture, and decoder assets explicitly.
- Profile on target devices before changing geometry, texture resolution, shadow maps, or post-processing.
- Reuse geometry and materials, update camera dimensions on resize, and dispose unused rendering resources.
避免
- Treating generated WebGPU scaffolding as a complete application without verifying its render loop.
- Assuming every tool or asset mentioned in the documentation is included in the package.
- Allocating geometry every frame or enabling expensive shadows and effects without profiling.
常見問題
What does this skill include?
It includes Three.js guidance, API and material references, an optimization checklist, a scene generator, and an animated WebGL starter.
Which assistants can use this skill?
The marketplace metadata lists Claude, Codex, and Claude Code. The underlying examples use JavaScript and Python.
Does the starter work without internet access?
Not as bundled. It loads version-pinned Three.js modules from jsDelivr; use locally hosted dependencies for offline operation.
Is WebGPU support ready to use?
The skill provides WebGPU guidance and scaffolding. The generated animation function lacks a render call, so complete and verify it before use.
Are model validation and texture optimization tools included?
No. The documentation mentions these tools, but only the scene generator is present in the supplied scripts.
Does this skill include a React implementation?
No. It points to a separate React Three Fiber skill; its bundled starter uses plain JavaScript.
開發者詳細資訊
作者
freshtechbro授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
e406bf64b5db6e514879399e87b346fa7ff7c2fb
維護新鮮度
2026/10/11
使用量
0 次下載 · 0 次瀏覽
檔案結構