My First Threejs

C 64 completed
Web App
web_app / json · tiny
37
Files
11,652
LOC
2
Frameworks
6
Languages

Pipeline State

completed
Run ID
#371985
Phase
done
Progress
1%
Started
Finished
2026-04-13 01:31:02
LLM tokens
0

Pipeline Metadata

Stage
Skipped
Decision
skip_scaffold_dup
Novelty
44.00
Framework unique
Isolation
Last stage change
2026-04-16 18:15:42
Deduplication group #47268
Member of a group with 30 similar repo(s) · framework reactcanonical #6398 view group →
Top concepts (2)
Project DescriptionWeb Frontend
Source: Repobility analyzer · https://repobility.com

AI Prompt

Create an interactive 3D haunted house scene using Next.js and React Three Fiber. I need it to feature a textured house with PBR materials, 30 procedurally placed gravestones, and skeleton models draped over them. Please include effects like orbiting ghost lights, fabric ghosts with vertex-animated cloth deformation, and firefly particles with bloom post-processing. The scene should also have a cinematic drone-shot camera intro, a click-to-start overlay, and a debug panel using Leva for real-time tweaking of properties. Make sure to use the Stars background and handle the WebGL context correctly within Next.js.
react next.js three.js r3f threejs web-app 3d pbr typescript animation
Generated by gemma4:latest

Catalog Information

This project is an interactive 3D haunted house scene built with Next.js and React Three Fiber, designed to showcase various features of Three.js.

Description

The Haunted House is a 3D interactive scene created using Next.js and React Three Fiber. It features textured walls, procedurally placed gravestones, skeleton models, ghost lights, firefly particles, and more. The project demonstrates various techniques such as PBR texture workflow, loading GLTF models with SkeletonUtils, real-time vertex animation for cloth simulation, post-processing effects, procedural placement with collision detection, and WebGL context management in Next.js.

الوصف

هذا المشروع هو مشهد ثلاثي الأبعاد متفاعل يصور بيت مسكون بناءً على Next.js و React Three Fiber. ويحتوي على جدران مصفوفة، قبور محسوبة بشكل تكراري، أطواد عظمية، ضوء رؤوس، جزعات نارية، وتأثيرات أخرى. يظهر المشروع تقنيات مختلفة مثل إجراء عمليات PBR للرسومات، تحميل النماذج GLTF مع SkeletonUtils، تحريك الأنسجة في الوقت الفعلي لتحقيق التأثيرات الملمسية، تأثيرات بعد الإنتاج، توزيع القباب بشكل تكراري مع تجنب الاصطدام، وإدارة سياق WebGL في Next.js.

Novelty

7/10

Tags

3d-scene interactive-graphics procedural-generation collision-detection real-time-animation post-processing-effects

Technologies

nextjs react tailwind threejs

Claude Models

claude-opus-4.6

Quality Score

C
63.5/100
Structure
55
Code Quality
99
Documentation
35
Testing
0
Practices
83
Security
100
Dependencies
60

Strengths

  • Code linting configured (eslint)
  • Low average code complexity \u2014 well-structured code
  • Good security practices \u2014 no major issues detected
  • Properly licensed project

Weaknesses

  • No tests found \u2014 high risk of regressions
  • No CI/CD configuration \u2014 manual testing and deployment

Recommendations

  • Add a test suite \u2014 start with critical path integration tests
  • Set up CI/CD (GitHub Actions recommended) to automate testing and deployment

Security & Health

5.1h
Tech Debt (B)
A
OWASP (100%)
PASS
Quality Gate
A
Risk (1)
Repobility · MCP-ready · https://repobility.com
MIT
License
1.1%
Duplication
Full Security Report AI Fix Prompts SARIF SBOM

Languages

json
84.8%
typescript
13.3%
css
1.1%
markdown
0.4%
javascript
0.2%
text
0.1%

Frameworks

React Next.js

Concepts (2)

Page rendered by Aljefra Mapper · scored by Repobility (https://repobility.com)
CategoryNameDescriptionConfidence
Same scanner, your repo: https://repobility.com — Repobility
auto_descriptionProject DescriptionMy first Three.js project — an interactive 3D haunted house scene built with Next.js and React Three Fiber.80%
auto_categoryWeb Frontendweb-frontend70%

Quality Timeline

1 quality score recorded.

View File Metrics

Embed Badge

Add to your README:

![Quality](https://repos.aljefra.com/badge/96199.svg)
Quality BadgeSecurity Badge
Export Quality CSVDownload SBOMExport Findings CSV