技能 threejs-webgl

📦

threejs-webgl

Name: threejs-webgl
Author: freshtechbro

内容修订 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)

🥇 83 黄金

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 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、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/freshtechbro-threejs-webgl.md 已签名 manifest GET /api/skills/freshtechbro-threejs-webgl/manifest 已签名 lockfile GET /api/skills/freshtechbro-threejs-webgl/lockfile

测试它

正在使用“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.

已扫描文件

2,538

分析行数

复核项

已忽略误报

风险因素

🌐 网络访问 (2)

assets/starter_scene/index.html:77 assets/starter_scene/index.html:78

⚙️ 外部命令 (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_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/freshtechbro-threejs-webgl/security.svg)](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/1

BibTeX 引用

@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 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

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.