threejs-webgl
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.
๋ด ์์ด์ ํธ๋ก ์ค์น
์ด ์์ฒญ์ ์์ด์ ํธ์ ๋ณต์ฌํ์ธ์. ๊ณต์ 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.์์ด์ ํธ๋ ๊ณ์ํด์ ๊ณํ์ ํ์ํ๊ณ ๋ณด์ ์ ์ฑ ์์ ์๊ตฌํ๋ ํ์ธ์ ์์ฒญํด์ผ ํฉ๋๋ค.
์์ด์ ํธ๊ฐ ์ฝ๊ธฐ ์ฌ์ด ๋ฆฌ์์ค
AI ์์ด์ ํธ, ํฌ๋กค๋ฌ, ์คํฌ๋ฆฝํธ๊ฐ ์ ์ฒด ํ์ด์ง ๋์ ์ ๋ฆฌ๋ ์ปจํ ์คํธ๋ง ํ์ํ ๋ ์ด ๋งํฌ๋ฅผ ์ฌ์ฉํ์ธ์.
ํ ์คํธํด ๋ณด๊ธฐ
"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.
๋ณด์ ๊ฐ์ฌ
์์ 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)
โ๏ธ ์ธ๋ถ ๋ช ๋ น์ด (50)
์ด ๋ณด๊ณ ์ ๊ณต์ ๋ฐ ์ธ์ฉ
๋ฒ์ ์ด ์ง์ ๋ ํ๊ฐ ๋ณด๊ณ ์, ์ค๋ฆฝ ๋ฐฐ์ง, ์๋ฒ ๋ ์นด๋ ๋ฐ ์ธ์ฉ์ ๊ณต์ ํ์ธ์. 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 ์ ์
์ด ์ ์์ ์ด์ ์ฆ๊ฑฐ ์ ๋ขฐ๋: ์ค๊ฐ๋ง๋ค ์ ์๋ ๊ฒ
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 basic Three.js WebGL scene with a rotating cube, orbit controls, lighting, and resize handling. Explain the required dependencies.
Adapt the starter to load my supplied glTF product model. Add selectable material colors, shadows, and loading errors without assuming decoder assets are bundled.
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 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?
Which assistants can use this skill?
Does the starter work without internet access?
Is WebGPU support ready to use?
Are model validation and texture optimization tools included?
Does this skill include a React implementation?
๊ฐ๋ฐ์ ์ธ๋ถ ์ ๋ณด
์์ฑ์
freshtechbro๋ผ์ด์ ์ค
MIT
Skillstore ๋ฆฌ๋น์
r1
๋ฒ์ ์๋ด
์์ฑ์๊ฐ ๋ฒ์ ์ ์ ์ธํ์ง ์์์ต๋๋ค.
๋ฆฌํฌ์งํ ๋ฆฌ
https://github.com/freshtechbro/claudedesignskills/tree/1da73febff0c3e1dfefc07f8a5ef8f7d1dfdb6cd/.claude/skills/threejs-webgl์ฐธ์กฐ
e406bf64b5db6e514879399e87b346fa7ff7c2fb
์ ์ง๋ณด์ ์ต์ ์ฑ
2026. 10. 11.
์ฌ์ฉ๋
0 ๋ค์ด๋ก๋ ยท 0 ์กฐํ
ํ์ผ ๊ตฌ์กฐ
๐ assets/
๐ starter_scene/
๐ index.html
๐ main.js
๐ README.md
๐ references/
๐ api_reference.md
๐ materials_guide.md
๐ optimization_checklist.md
๐ scripts/
๐ setup_scene.py
๐ SKILL.md