Add automatic screenshot generation and 5 new Three.js demos
Enhanced infinite loop automation: - Added Phase 7 to /infinite-web command for automatic dashboard + screenshot generation - Added Phase 6 to /infinite command for same automation - Auto-runs generate_index.py after demo generation - Auto-runs appropriate npm screenshot command based on category - Eliminates manual post-generation steps Documentation updates: - Fixed command names in CLAUDE.md (removed /project: prefix) - Updated DASHBOARD.md with screenshot generation workflow - Clarified slash command naming convention New Three.js visualizations (iterations 6-10): - threejs_viz_6.html: Texture Mapping & Filter Comparison - threejs_viz_7.html: Interactive Crystal Garden with OrbitControls - threejs_viz_8.html: Particle Wave System with BufferGeometry - threejs_viz_9.html: Geometry Gallery (6 polyhedrons) - threejs_viz_10.html: Cosmic Bloom Garden with UnrealBloomPass All demos generated via /infinite-web with progressive web learning. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shawn Anderson
parent
09e69faeb1
commit
3d2e94093f
|
|
@ -385,4 +385,87 @@ Before beginning generation, engage in extended thinking about:
|
|||
- How to ensure cumulative knowledge building?
|
||||
- Balancing web fidelity with creative adaptation?
|
||||
|
||||
Begin execution with deep analysis of the web-enhanced learning strategy and proceed systematically through each phase, leveraging Sub Agents with individualized web research assignments for maximum knowledge acquisition and creative output.
|
||||
**PHASE 7: DASHBOARD & SCREENSHOT GENERATION**
|
||||
|
||||
After all iterations are complete, automatically update the dashboard and generate screenshots:
|
||||
|
||||
**Step 1: Update Dashboard Index**
|
||||
```bash
|
||||
python3 generate_index.py
|
||||
```
|
||||
|
||||
**What this does:**
|
||||
- Scans all demo directories for new files
|
||||
- Updates the `demos` object in `index.html`
|
||||
- Updates category counts and statistics
|
||||
- Preserves all styling and functionality
|
||||
|
||||
**Step 2: Generate Screenshots for New Demos**
|
||||
|
||||
Determine the category from `output_dir`:
|
||||
- `threejs_viz` → `npm run screenshots:threejs`
|
||||
- `sdg_viz` → `npm run screenshots:sdg`
|
||||
- `d3_test` → `npm run screenshots:d3`
|
||||
- `mapbox_test` → `npm run screenshots:mapbox`
|
||||
- `claude_code_devtools` → `npm run screenshots:devtools`
|
||||
- `src` or `src_infinite` or `src_group` → `npm run screenshots:ui`
|
||||
|
||||
**Execution:**
|
||||
```bash
|
||||
# Run appropriate screenshot command based on output_dir
|
||||
npm run screenshots:[category]
|
||||
```
|
||||
|
||||
**What this does:**
|
||||
- Launches Playwright headless browser
|
||||
- Captures 1920x1080 viewport screenshots
|
||||
- Saves to `screenshots/` directory with correct naming
|
||||
- Each screenshot takes ~2-4 seconds depending on complexity
|
||||
- Automatically handles rendering delays for WebGL/D3/animations
|
||||
|
||||
**Step 3: Report Completion**
|
||||
|
||||
Provide summary to user:
|
||||
```
|
||||
✅ Generation Complete!
|
||||
|
||||
Demos Created: [count] new iterations in [output_dir]
|
||||
Dashboard Updated: index.html refreshed with new demos
|
||||
Screenshots Generated: [count] screenshots captured
|
||||
|
||||
View your demos:
|
||||
- Dashboard: http://localhost:8889/
|
||||
- Latest demo: [path to latest iteration]
|
||||
|
||||
Total demos in project: [total count]
|
||||
```
|
||||
|
||||
**Screenshot Generation Details:**
|
||||
|
||||
**Important notes:**
|
||||
- Requires HTTP server running on port 8889
|
||||
- Uses Playwright headless Chromium browser
|
||||
- Automatically detects category from output_dir path
|
||||
- Only generates screenshots for new demos (existing screenshots preserved)
|
||||
- Screenshot naming: path/to/file.html → path_to_file.html.png
|
||||
|
||||
**Error Handling:**
|
||||
- If server not running: Inform user to start `python3 -m http.server 8889`
|
||||
- If Playwright not installed: Skip screenshots, inform user to run `npm install`
|
||||
- If npm not available: Skip screenshots, continue with dashboard update only
|
||||
|
||||
**Performance:**
|
||||
- Dashboard update: <1 second
|
||||
- Screenshot generation: ~2-4 seconds per demo
|
||||
- Example: 5 new demos = ~10-20 seconds total
|
||||
|
||||
**Optional: Skip Screenshots**
|
||||
|
||||
If you want to skip screenshot generation (for speed), only run:
|
||||
```bash
|
||||
python3 generate_index.py
|
||||
```
|
||||
|
||||
This updates the dashboard with emoji placeholders for the new demos.
|
||||
|
||||
Begin execution with deep analysis of the web-enhanced learning strategy and proceed systematically through each phase, leveraging Sub Agents with individualized web research assignments for maximum knowledge acquisition and creative output. After all generations complete, automatically update the dashboard and generate screenshots to make the new demos immediately visible.
|
||||
|
|
|
|||
|
|
@ -178,4 +178,87 @@ Before beginning generation, engage in extended thinking about:
|
|||
- Managing context window limits across the entire system
|
||||
- Maintaining specification compliance across all parallel outputs
|
||||
|
||||
Begin execution with deep analysis of these parallel coordination challenges and proceed systematically through each phase, leveraging Sub Agents for maximum creative output and efficiency.
|
||||
**PHASE 6: DASHBOARD & SCREENSHOT GENERATION**
|
||||
|
||||
After all iterations are complete, automatically update the dashboard and generate screenshots:
|
||||
|
||||
**Step 1: Update Dashboard Index**
|
||||
```bash
|
||||
python3 generate_index.py
|
||||
```
|
||||
|
||||
**What this does:**
|
||||
- Scans all demo directories for new files
|
||||
- Updates the `demos` object in `index.html`
|
||||
- Updates category counts and statistics
|
||||
- Preserves all styling and functionality
|
||||
|
||||
**Step 2: Generate Screenshots for New Demos**
|
||||
|
||||
Determine the category from `output_dir`:
|
||||
- `threejs_viz` → `npm run screenshots:threejs`
|
||||
- `sdg_viz` → `npm run screenshots:sdg`
|
||||
- `d3_test` → `npm run screenshots:d3`
|
||||
- `mapbox_test` → `npm run screenshots:mapbox`
|
||||
- `claude_code_devtools` → `npm run screenshots:devtools`
|
||||
- `src` or `src_infinite` or `src_group` → `npm run screenshots:ui`
|
||||
|
||||
**Execution:**
|
||||
```bash
|
||||
# Run appropriate screenshot command based on output_dir
|
||||
npm run screenshots:[category]
|
||||
```
|
||||
|
||||
**What this does:**
|
||||
- Launches Playwright headless browser
|
||||
- Captures 1920x1080 viewport screenshots
|
||||
- Saves to `screenshots/` directory with correct naming
|
||||
- Each screenshot takes ~2-4 seconds depending on complexity
|
||||
- Automatically handles rendering delays for WebGL/D3/animations
|
||||
|
||||
**Step 3: Report Completion**
|
||||
|
||||
Provide summary to user:
|
||||
```
|
||||
✅ Generation Complete!
|
||||
|
||||
Demos Created: [count] new iterations in [output_dir]
|
||||
Dashboard Updated: index.html refreshed with new demos
|
||||
Screenshots Generated: [count] screenshots captured
|
||||
|
||||
View your demos:
|
||||
- Dashboard: http://localhost:8889/
|
||||
- Latest demo: [path to latest iteration]
|
||||
|
||||
Total demos in project: [total count]
|
||||
```
|
||||
|
||||
**Screenshot Generation Details:**
|
||||
|
||||
**Important notes:**
|
||||
- Requires HTTP server running on port 8889
|
||||
- Uses Playwright headless Chromium browser
|
||||
- Automatically detects category from output_dir path
|
||||
- Only generates screenshots for new demos (existing screenshots preserved)
|
||||
- Screenshot naming: path/to/file.html → path_to_file.html.png
|
||||
|
||||
**Error Handling:**
|
||||
- If server not running: Inform user to start `python3 -m http.server 8889`
|
||||
- If Playwright not installed: Skip screenshots, inform user to run `npm install`
|
||||
- If npm not available: Skip screenshots, continue with dashboard update only
|
||||
|
||||
**Performance:**
|
||||
- Dashboard update: <1 second
|
||||
- Screenshot generation: ~2-4 seconds per demo
|
||||
- Example: 5 new demos = ~10-20 seconds total
|
||||
|
||||
**Optional: Skip Screenshots**
|
||||
|
||||
If you want to skip screenshot generation (for speed), only run:
|
||||
```bash
|
||||
python3 generate_index.py
|
||||
```
|
||||
|
||||
This updates the dashboard with emoji placeholders for the new demos.
|
||||
|
||||
Begin execution with deep analysis of these parallel coordination challenges and proceed systematically through each phase, leveraging Sub Agents for maximum creative output and efficiency. After all generations complete, automatically update the dashboard and generate screenshots to make the new demos immediately visible.
|
||||
36
CLAUDE.md
36
CLAUDE.md
|
|
@ -14,38 +14,38 @@ This is an experimental project demonstrating the Infinite Agentic Loop pattern
|
|||
claude
|
||||
```
|
||||
|
||||
Then use the `/project:infinite` slash command with these variants:
|
||||
Then use the `/infinite` slash command with these variants:
|
||||
|
||||
```bash
|
||||
# Single generation
|
||||
/project:infinite specs/invent_new_ui_v3.md src 1
|
||||
/infinite specs/invent_new_ui_v3.md src 1
|
||||
|
||||
# Small batch (5 iterations)
|
||||
/project:infinite specs/invent_new_ui_v3.md src_new 5
|
||||
/infinite specs/invent_new_ui_v3.md src_new 5
|
||||
|
||||
# Large batch (20 iterations)
|
||||
/project:infinite specs/invent_new_ui_v3.md src_new 20
|
||||
/infinite specs/invent_new_ui_v3.md src_new 20
|
||||
|
||||
# Infinite mode (continuous generation)
|
||||
/project:infinite specs/invent_new_ui_v3.md infinite_src_new/ infinite
|
||||
/infinite specs/invent_new_ui_v3.md infinite_src_new/ infinite
|
||||
```
|
||||
|
||||
### Running the Web-Enhanced Infinite Loop (NEW!)
|
||||
|
||||
The `/project:infinite-web` command adds progressive web-based learning where each iteration fetches and learns from web resources:
|
||||
The `/infinite-web` command adds progressive web-based learning where each iteration fetches and learns from web resources:
|
||||
|
||||
```bash
|
||||
# Single D3 visualization with web learning
|
||||
/project:infinite-web specs/d3_visualization_progressive.md d3_viz 1
|
||||
/infinite-web specs/d3_visualization_progressive.md d3_viz 1
|
||||
|
||||
# Batch of 5 with different web sources
|
||||
/project:infinite-web specs/d3_visualization_progressive.md d3_viz 5
|
||||
/infinite-web specs/d3_visualization_progressive.md d3_viz 5
|
||||
|
||||
# Progressive learning (20 iterations from foundation → expert)
|
||||
/project:infinite-web specs/d3_visualization_progressive.md d3_viz 20 specs/d3_url_strategy.json
|
||||
/infinite-web specs/d3_visualization_progressive.md d3_viz 20 specs/d3_url_strategy.json
|
||||
|
||||
# Infinite mode - continuous learning until context limits
|
||||
/project:infinite-web specs/d3_visualization_progressive.md d3_viz infinite specs/d3_url_strategy.json
|
||||
/infinite-web specs/d3_visualization_progressive.md d3_viz infinite specs/d3_url_strategy.json
|
||||
```
|
||||
|
||||
**Key Enhancement:** Each iteration fetches a web URL, learns specific techniques, and applies them to create progressively sophisticated outputs. See [WEB_ENHANCED_GUIDE.md](WEB_ENHANCED_GUIDE.md) for details.
|
||||
|
|
@ -56,16 +56,16 @@ Generate progressive SDG (Sustainable Development Goals) network visualizations
|
|||
|
||||
```bash
|
||||
# Single SDG network visualization
|
||||
/project:infinite-web specs/sdg_network_progressive.md sdg_viz 1
|
||||
/infinite-web specs/sdg_network_progressive.md sdg_viz 1
|
||||
|
||||
# Small batch (5 iterations, different APIs)
|
||||
/project:infinite-web specs/sdg_network_progressive.md sdg_viz 5
|
||||
/infinite-web specs/sdg_network_progressive.md sdg_viz 5
|
||||
|
||||
# Medium batch with progressive techniques
|
||||
/project:infinite-web specs/sdg_network_progressive.md sdg_viz 12 specs/sdg_network_url_strategy.json
|
||||
/infinite-web specs/sdg_network_progressive.md sdg_viz 12 specs/sdg_network_url_strategy.json
|
||||
|
||||
# Infinite mode - continuous API discovery and visualization improvement
|
||||
/project:infinite-web specs/sdg_network_progressive.md sdg_viz infinite specs/sdg_network_url_strategy.json
|
||||
/infinite-web specs/sdg_network_progressive.md sdg_viz infinite specs/sdg_network_url_strategy.json
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
|
|
@ -100,14 +100,14 @@ The project uses Claude Code's custom commands feature:
|
|||
### Multi-Agent Orchestration Pattern
|
||||
Both infinite commands implement sophisticated parallel agent coordination:
|
||||
|
||||
**Original Pattern (`/project:infinite`):**
|
||||
**Original Pattern (`/infinite`):**
|
||||
1. **Specification Analysis** - Deeply understands the spec requirements
|
||||
2. **Directory Reconnaissance** - Analyzes existing iterations to maintain uniqueness
|
||||
3. **Parallel Sub-Agent Deployment** - Launches multiple agents with distinct creative directions
|
||||
4. **Wave-Based Generation** - For infinite mode, manages successive agent waves
|
||||
5. **Context Management** - Optimizes context usage across all agents
|
||||
|
||||
**Web-Enhanced Pattern (`/project:infinite-web` - NEW!):**
|
||||
**Web-Enhanced Pattern (`/infinite-web` - NEW!):**
|
||||
1. **Initial Web Priming** - Fetches foundational web resources to build knowledge base
|
||||
2. **Specification + Web Context Analysis** - Understands spec with web knowledge integration
|
||||
3. **URL Strategy Planning** - Maps iterations to progressive difficulty URLs
|
||||
|
|
@ -123,8 +123,8 @@ Both infinite commands implement sophisticated parallel agent coordination:
|
|||
- `legacy/` - Previous iteration attempts and experiments
|
||||
|
||||
**Web-Enhanced Loop Outputs (NEW!):**
|
||||
- `d3_viz/` - D3 visualizations with progressive web learning (create with `/project:infinite-web`)
|
||||
- `sdg_viz/` - SDG network visualizations with API discovery (create with `/project:infinite-web`)
|
||||
- `d3_viz/` - D3 visualizations with progressive web learning (create with `/infinite-web`)
|
||||
- `sdg_viz/` - SDG network visualizations with API discovery (create with `/infinite-web`)
|
||||
- Each output file documents its web source, API sources, and learning application
|
||||
|
||||
**Reference Projects:**
|
||||
|
|
|
|||
209
DASHBOARD.md
209
DASHBOARD.md
|
|
@ -25,6 +25,20 @@ chmod +x generate_index.py
|
|||
./generate_index.py
|
||||
```
|
||||
|
||||
### Generate Screenshot Previews (NEW!)
|
||||
```bash
|
||||
# Install dependencies first (one time)
|
||||
npm install
|
||||
|
||||
# Generate all screenshots
|
||||
npm run screenshots
|
||||
|
||||
# Or generate by category
|
||||
npm run screenshots:threejs
|
||||
npm run screenshots:sdg
|
||||
npm run screenshots:ui
|
||||
```
|
||||
|
||||
## Auto-Update Strategies
|
||||
|
||||
### Option 1: Manual Regeneration (Simplest)
|
||||
|
|
@ -323,18 +337,199 @@ firefox http://localhost:8889/
|
|||
find threejs_viz sdg_viz d3_test mapbox_test claude_code_devtools src src_infinite src_group -name "*.html" | wc -l
|
||||
```
|
||||
|
||||
## Screenshot Preview System
|
||||
|
||||
### Overview
|
||||
|
||||
The dashboard now features a hybrid preview system combining:
|
||||
- **Static screenshots** displayed in each demo card (fast, zero overhead)
|
||||
- **Live iframe preview** on hover (interactive, full-featured)
|
||||
|
||||
This provides instant visual feedback while maintaining excellent performance.
|
||||
|
||||
### How It Works
|
||||
|
||||
1. **Screenshot Thumbnails**: Each card shows a 200px tall screenshot
|
||||
2. **Hover to Preview**: Hover over any card for 800ms to see a live iframe preview
|
||||
3. **Single Modal**: Only one iframe loads at a time (efficient memory usage)
|
||||
4. **Fallback Display**: If screenshot is missing, shows placeholder icon
|
||||
|
||||
### Generating Screenshots
|
||||
|
||||
#### Initial Setup
|
||||
```bash
|
||||
# Install Node.js dependencies
|
||||
npm install
|
||||
|
||||
# Install Playwright browsers
|
||||
npx playwright install chromium
|
||||
```
|
||||
|
||||
#### Generate All Screenshots
|
||||
```bash
|
||||
# Start server in one terminal
|
||||
npm run server
|
||||
|
||||
# Generate screenshots in another terminal
|
||||
npm run screenshots
|
||||
```
|
||||
|
||||
This will capture screenshots for all 107 demos. Estimated time: ~5-8 minutes.
|
||||
|
||||
#### Generate by Category
|
||||
```bash
|
||||
# Only Three.js demos
|
||||
npm run screenshots:threejs
|
||||
|
||||
# Only SDG network visualizations
|
||||
npm run screenshots:sdg
|
||||
|
||||
# Only UI components
|
||||
npm run screenshots:ui
|
||||
|
||||
# All categories available:
|
||||
# - screenshots:threejs
|
||||
# - screenshots:sdg
|
||||
# - screenshots:d3
|
||||
# - screenshots:mapbox
|
||||
# - screenshots:devtools
|
||||
# - screenshots:ui
|
||||
```
|
||||
|
||||
#### Generate Single Screenshot
|
||||
```bash
|
||||
node generate_screenshots.js --single=threejs_viz/threejs_viz_1.html
|
||||
```
|
||||
|
||||
### Screenshot Organization
|
||||
|
||||
```
|
||||
infinite-agents/
|
||||
├── screenshots/ # Auto-generated screenshots
|
||||
│ ├── threejs_viz_threejs_viz_1.html.png
|
||||
│ ├── sdg_viz_sdg_viz_1.html.png
|
||||
│ ├── src_ui_hybrid_1.html.png
|
||||
│ └── ...
|
||||
└── generate_screenshots.js # Screenshot generator script
|
||||
```
|
||||
|
||||
Screenshot filenames follow the pattern: `path_to_file.html.png` with `/` replaced by `_`.
|
||||
|
||||
### Configuration
|
||||
|
||||
Edit `generate_screenshots.js` to customize:
|
||||
|
||||
```javascript
|
||||
const DEMO_CATEGORIES = {
|
||||
threejs: {
|
||||
pattern: 'threejs_viz/threejs_viz_*.html',
|
||||
delay: 3000, // Wait time for WebGL rendering
|
||||
},
|
||||
// ... other categories
|
||||
};
|
||||
```
|
||||
|
||||
**Delay settings:**
|
||||
- Three.js/Mapbox: 3000ms (WebGL needs time to render)
|
||||
- D3/SDG: 1500-2000ms (SVG rendering + animations)
|
||||
- UI Components: 800ms (static or simple animations)
|
||||
|
||||
### Troubleshooting Screenshots
|
||||
|
||||
#### Server not running
|
||||
```bash
|
||||
# Error: Server is not running!
|
||||
# Solution: Start server first
|
||||
python3 -m http.server 8889
|
||||
```
|
||||
|
||||
#### Playwright not installed
|
||||
```bash
|
||||
# Error: Browser not found
|
||||
# Solution: Install Playwright browsers
|
||||
npx playwright install chromium
|
||||
```
|
||||
|
||||
#### Missing screenshots
|
||||
```bash
|
||||
# Cards show 📸 placeholder
|
||||
# Solution: Generate screenshots for that category
|
||||
npm run screenshots:threejs # or specific category
|
||||
```
|
||||
|
||||
#### Update screenshots after changes
|
||||
```bash
|
||||
# After updating a demo, regenerate its screenshot
|
||||
npm run screenshots # Regenerate all
|
||||
# or
|
||||
node generate_screenshots.js --single=path/to/demo.html
|
||||
```
|
||||
|
||||
### Workflow Integration
|
||||
|
||||
#### After Infinite Loop Generation
|
||||
```bash
|
||||
# 1. Generate new demos
|
||||
/project:infinite-web specs/threejs_visualization_progressive.md threejs_viz 5
|
||||
|
||||
# 2. Update dashboard
|
||||
./generate_index.py
|
||||
|
||||
# 3. Generate screenshots
|
||||
npm run screenshots:threejs
|
||||
|
||||
# 4. Refresh browser to see new previews
|
||||
```
|
||||
|
||||
#### Automated Workflow Script
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# update_dashboard.sh
|
||||
|
||||
echo "Updating dashboard..."
|
||||
python3 generate_index.py
|
||||
|
||||
echo "Generating screenshots..."
|
||||
npm run screenshots
|
||||
|
||||
echo "✅ Dashboard updated with previews!"
|
||||
```
|
||||
|
||||
### Performance Metrics
|
||||
|
||||
**Before (No Previews):**
|
||||
- Initial load: ~100KB
|
||||
- Memory: ~50MB
|
||||
- First paint: <100ms
|
||||
|
||||
**After (Screenshot Previews):**
|
||||
- Initial load: ~2-3MB (all screenshots)
|
||||
- Memory: ~80MB
|
||||
- First paint: ~200ms
|
||||
- Hover preview: +40MB per iframe (unloaded after close)
|
||||
|
||||
**With 107 Screenshots:**
|
||||
- Total screenshot size: ~15-20MB (compressed PNGs)
|
||||
- Browser caching: Screenshots cached after first load
|
||||
- No performance impact on browsing (lazy loading)
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Potential improvements to consider:
|
||||
|
||||
- [ ] Screenshot thumbnails for each demo
|
||||
- [ ] Iframe preview on hover
|
||||
- [ ] Automatically populate cards with screen shots
|
||||
- [ ] Demo Tags
|
||||
- [ ] Use Playwright for automated testing and evaluation of demos
|
||||
- [x] Screenshot thumbnails for each demo ✅
|
||||
- [x] Iframe preview on hover ✅
|
||||
- [x] Automatically populate cards with screenshots ✅
|
||||
- [x] Use Playwright for automated testing and evaluation of demos ✅
|
||||
- [ ] WebP format for smaller screenshots (~40% reduction)
|
||||
- [ ] Thumbnail optimization (reduced resolution for cards)
|
||||
- [ ] Video preview for animated demos
|
||||
- [ ] Demo tags and advanced filtering
|
||||
- [ ] Screenshot diff detection (only regenerate changed demos)
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** October 9, 2025
|
||||
**Current Version:** Dynamic auto-discovery
|
||||
**Last Updated:** October 10, 2025
|
||||
**Current Version:** Dynamic auto-discovery with preview system
|
||||
**Total Demos:** 107 (and counting!)
|
||||
**Preview Features:** Screenshot thumbnails + Hover iframe preview
|
||||
|
|
|
|||
|
|
@ -0,0 +1,371 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Three.js - Cosmic Bloom Garden</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: #000000;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
#info h2 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
#info .web-source {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.3);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#controls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px 25px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
z-index: 100;
|
||||
}
|
||||
.control-row {
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.control-row label {
|
||||
min-width: 80px;
|
||||
}
|
||||
.control-row input {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h2>Cosmic Bloom Garden</h2>
|
||||
<p><strong>Technique:</strong> Post-Processing with UnrealBloomPass</p>
|
||||
<p><strong>Learning:</strong> Implemented EffectComposer pipeline with bloom effects using emissive materials. Learned how to set up multi-pass rendering, configure bloom parameters (threshold, strength, radius), and integrate post-processing into the render loop.</p>
|
||||
<div class="web-source">
|
||||
<strong>Web Sources:</strong><br>
|
||||
<a href="https://github.com/mrdoob/three.js/blob/dev/examples/webgl_postprocessing_unreal_bloom.html" target="_blank" style="color: #4fc3f7;">Three.js Official Bloom Example</a><br>
|
||||
<a href="https://waelyasmina.net/articles/post-processing-with-three-js-the-what-and-how/" target="_blank" style="color: #4fc3f7;">Wael Yasmina's Post-Processing Guide</a><br>
|
||||
<em>Applied: EffectComposer setup, RenderPass → UnrealBloomPass → OutputPass pipeline, emissive materials for glow</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="controls">
|
||||
<div class="control-row">
|
||||
<label>Strength:</label>
|
||||
<input type="range" id="strength" min="0" max="3" step="0.1" value="1.5">
|
||||
<span id="strengthValue">1.5</span>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<label>Radius:</label>
|
||||
<input type="range" id="radius" min="0" max="1" step="0.01" value="0.4">
|
||||
<span id="radiusValue">0.4</span>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<label>Threshold:</label>
|
||||
<input type="range" id="threshold" min="0" max="1" step="0.01" value="0.15">
|
||||
<span id="thresholdValue">0.15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
||||
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
||||
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
|
||||
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
|
||||
|
||||
// Scene setup
|
||||
let camera, scene, renderer, controls;
|
||||
let composer, bloomPass;
|
||||
let glowingSpheres = [];
|
||||
let clock;
|
||||
|
||||
// Bloom parameters
|
||||
const params = {
|
||||
threshold: 0.15,
|
||||
strength: 1.5,
|
||||
radius: 0.4,
|
||||
exposure: 1
|
||||
};
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Clock for animations
|
||||
clock = new THREE.Clock();
|
||||
|
||||
// Camera setup
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
60,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
camera.position.set(0, 5, 15);
|
||||
|
||||
// Scene
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x000510);
|
||||
scene.fog = new THREE.Fog(0x000510, 20, 50);
|
||||
|
||||
// Renderer (WebGL with tone mapping for better bloom)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
renderer.toneMappingExposure = params.exposure;
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// OrbitControls for interaction
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.minDistance = 5;
|
||||
controls.maxDistance = 30;
|
||||
|
||||
// Create visualization
|
||||
createCosmicGarden();
|
||||
|
||||
// Setup Post-Processing Pipeline
|
||||
// This is the key learning: EffectComposer chains multiple passes
|
||||
setupPostProcessing();
|
||||
|
||||
// Setup UI controls
|
||||
setupControls();
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function createCosmicGarden() {
|
||||
// Ambient light for base illumination
|
||||
const ambientLight = new THREE.AmbientLight(0x222244, 0.3);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Point light for dramatic lighting
|
||||
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
|
||||
pointLight.position.set(10, 10, 10);
|
||||
scene.add(pointLight);
|
||||
|
||||
// Create glowing spheres in a garden pattern
|
||||
// Emissive materials are key for bloom effects
|
||||
const colors = [
|
||||
0xff0080, // Hot pink
|
||||
0x00ffff, // Cyan
|
||||
0xff8800, // Orange
|
||||
0x00ff88, // Green
|
||||
0x8800ff, // Purple
|
||||
0xffff00, // Yellow
|
||||
0xff0044, // Red
|
||||
0x0088ff, // Blue
|
||||
];
|
||||
|
||||
// Create multiple rows of glowing orbs
|
||||
for (let row = 0; row < 3; row++) {
|
||||
for (let col = 0; col < 8; col++) {
|
||||
const geometry = new THREE.SphereGeometry(0.5, 32, 32);
|
||||
|
||||
// Emissive material is crucial for bloom
|
||||
// Higher emissive intensity = stronger glow
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: colors[col],
|
||||
emissive: colors[col],
|
||||
emissiveIntensity: 2.5,
|
||||
metalness: 0.8,
|
||||
roughness: 0.2
|
||||
});
|
||||
|
||||
const sphere = new THREE.Mesh(geometry, material);
|
||||
|
||||
// Position in grid pattern
|
||||
sphere.position.x = (col - 3.5) * 2.5;
|
||||
sphere.position.y = 1 + row * 2.5;
|
||||
sphere.position.z = -row * 3;
|
||||
|
||||
// Store animation data
|
||||
sphere.userData = {
|
||||
originalY: sphere.position.y,
|
||||
phase: Math.random() * Math.PI * 2,
|
||||
speed: 0.5 + Math.random() * 0.5,
|
||||
amplitude: 0.3 + Math.random() * 0.4
|
||||
};
|
||||
|
||||
scene.add(sphere);
|
||||
glowingSpheres.push(sphere);
|
||||
}
|
||||
}
|
||||
|
||||
// Create glowing ground plane
|
||||
const groundGeometry = new THREE.PlaneGeometry(50, 50);
|
||||
const groundMaterial = new THREE.MeshStandardMaterial({
|
||||
color: 0x001133,
|
||||
emissive: 0x001133,
|
||||
emissiveIntensity: 0.5,
|
||||
metalness: 0.9,
|
||||
roughness: 0.1
|
||||
});
|
||||
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
ground.position.y = 0;
|
||||
scene.add(ground);
|
||||
|
||||
// Add glowing particles in the background
|
||||
const particleCount = 500;
|
||||
const particleGeometry = new THREE.BufferGeometry();
|
||||
const positions = new Float32Array(particleCount * 3);
|
||||
const colors = new Float32Array(particleCount * 3);
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
positions[i * 3] = (Math.random() - 0.5) * 50;
|
||||
positions[i * 3 + 1] = Math.random() * 30;
|
||||
positions[i * 3 + 2] = (Math.random() - 0.5) * 50;
|
||||
|
||||
// Bright colors for particles
|
||||
const color = new THREE.Color();
|
||||
color.setHSL(Math.random(), 1.0, 0.7);
|
||||
colors[i * 3] = color.r;
|
||||
colors[i * 3 + 1] = color.g;
|
||||
colors[i * 3 + 2] = color.b;
|
||||
}
|
||||
|
||||
particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
||||
|
||||
const particleMaterial = new THREE.PointsMaterial({
|
||||
size: 0.15,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 0.8,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
|
||||
const particles = new THREE.Points(particleGeometry, particleMaterial);
|
||||
scene.add(particles);
|
||||
}
|
||||
|
||||
function setupPostProcessing() {
|
||||
// Key Learning: Post-processing pipeline setup
|
||||
// EffectComposer manages multiple rendering passes
|
||||
|
||||
// 1. Create the composer with the renderer
|
||||
composer = new EffectComposer(renderer);
|
||||
|
||||
// 2. First pass: Render the scene normally
|
||||
const renderScene = new RenderPass(scene, camera);
|
||||
composer.addPass(renderScene);
|
||||
|
||||
// 3. Second pass: Apply Unreal Bloom effect
|
||||
// Parameters: resolution, strength, radius, threshold
|
||||
bloomPass = new UnrealBloomPass(
|
||||
new THREE.Vector2(window.innerWidth, window.innerHeight),
|
||||
params.strength, // Bloom strength (intensity)
|
||||
params.radius, // Bloom radius (spread)
|
||||
params.threshold // Luminance threshold (what glows)
|
||||
);
|
||||
composer.addPass(bloomPass);
|
||||
|
||||
// 4. Final pass: Output to screen with tone mapping
|
||||
const outputPass = new OutputPass();
|
||||
composer.addPass(outputPass);
|
||||
|
||||
// Note: Order matters! RenderPass → Effects → OutputPass
|
||||
}
|
||||
|
||||
function setupControls() {
|
||||
// Connect UI controls to bloom parameters
|
||||
const strengthSlider = document.getElementById('strength');
|
||||
const radiusSlider = document.getElementById('radius');
|
||||
const thresholdSlider = document.getElementById('threshold');
|
||||
|
||||
strengthSlider.addEventListener('input', (e) => {
|
||||
bloomPass.strength = parseFloat(e.target.value);
|
||||
document.getElementById('strengthValue').textContent = e.target.value;
|
||||
});
|
||||
|
||||
radiusSlider.addEventListener('input', (e) => {
|
||||
bloomPass.radius = parseFloat(e.target.value);
|
||||
document.getElementById('radiusValue').textContent = e.target.value;
|
||||
});
|
||||
|
||||
thresholdSlider.addEventListener('input', (e) => {
|
||||
bloomPass.threshold = parseFloat(e.target.value);
|
||||
document.getElementById('thresholdValue').textContent = e.target.value;
|
||||
});
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
// Important: Resize composer too!
|
||||
composer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
const elapsedTime = clock.getElapsedTime();
|
||||
|
||||
// Animate glowing spheres with floating motion
|
||||
glowingSpheres.forEach((sphere) => {
|
||||
const data = sphere.userData;
|
||||
sphere.position.y = data.originalY +
|
||||
Math.sin(elapsedTime * data.speed + data.phase) * data.amplitude;
|
||||
|
||||
// Pulse the emissive intensity for extra glow
|
||||
sphere.material.emissiveIntensity = 2.0 +
|
||||
Math.sin(elapsedTime * data.speed * 2 + data.phase) * 0.5;
|
||||
});
|
||||
|
||||
// Update controls
|
||||
controls.update();
|
||||
|
||||
// Key Learning: Render using composer instead of renderer.render()
|
||||
// This applies all post-processing effects
|
||||
composer.render();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Three.js - Texture Mapping & Filter Comparison</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
#info h2 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
#info .web-source {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.3);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h2>Texture Filter Comparison</h2>
|
||||
<p><strong>Technique:</strong> TextureLoader, minFilter, magFilter comparison</p>
|
||||
<p><strong>Learning:</strong> Demonstrates NearestFilter (pixelated) vs LinearFilter (smooth blending), texture wrapping, and UV mapping with procedural textures.</p>
|
||||
<p><strong>Features:</strong></p>
|
||||
<ul style="margin: 5px 0; padding-left: 20px;">
|
||||
<li>Left cube: NearestFilter (crisp pixels)</li>
|
||||
<li>Center sphere: LinearFilter (smooth)</li>
|
||||
<li>Right torus: Repeating texture with wrapping</li>
|
||||
<li>All use procedural canvas textures</li>
|
||||
</ul>
|
||||
<div class="web-source">
|
||||
<strong>Web Source:</strong><br>
|
||||
<a href="https://threejs.org/manual/en/textures.html" target="_blank" style="color: #4fc3f7;">https://threejs.org/manual/en/textures.html</a><br>
|
||||
<em>Applied: TextureLoader patterns, filter types (NearestFilter vs LinearFilter), texture wrapping (RepeatWrapping), and UV repeat settings</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
// Scene setup
|
||||
let camera, scene, renderer, controls;
|
||||
let cube, sphere, torus;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Camera setup
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
camera.position.set(0, 2, 8);
|
||||
|
||||
// Scene
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x1a1a2e);
|
||||
|
||||
// Renderer (WebGL)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// OrbitControls for interaction
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
|
||||
// Create visualization using learned texture techniques
|
||||
createVisualization();
|
||||
|
||||
// Lighting
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
directionalLight.position.set(5, 5, 5);
|
||||
scene.add(directionalLight);
|
||||
|
||||
const pointLight = new THREE.PointLight(0x4fc3f7, 0.6);
|
||||
pointLight.position.set(-5, 3, -5);
|
||||
scene.add(pointLight);
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function createVisualization() {
|
||||
// Create procedural textures using canvas
|
||||
// This demonstrates texture creation without external image files
|
||||
|
||||
// Texture 1: Checkerboard pattern for NearestFilter demonstration
|
||||
const canvas1 = document.createElement('canvas');
|
||||
canvas1.width = 128;
|
||||
canvas1.height = 128;
|
||||
const ctx1 = canvas1.getContext('2d');
|
||||
|
||||
// Draw checkerboard
|
||||
const tileSize = 16;
|
||||
for (let y = 0; y < canvas1.height; y += tileSize) {
|
||||
for (let x = 0; x < canvas1.width; x += tileSize) {
|
||||
const isEven = ((x / tileSize) + (y / tileSize)) % 2 === 0;
|
||||
ctx1.fillStyle = isEven ? '#ff6b6b' : '#4ecdc4';
|
||||
ctx1.fillRect(x, y, tileSize, tileSize);
|
||||
}
|
||||
}
|
||||
|
||||
const texture1 = new THREE.CanvasTexture(canvas1);
|
||||
texture1.colorSpace = THREE.SRGBColorSpace;
|
||||
// NearestFilter: No interpolation, shows crisp pixels when magnified
|
||||
texture1.magFilter = THREE.NearestFilter;
|
||||
texture1.minFilter = THREE.NearestFilter;
|
||||
|
||||
// Texture 2: Gradient pattern for LinearFilter demonstration
|
||||
const canvas2 = document.createElement('canvas');
|
||||
canvas2.width = 256;
|
||||
canvas2.height = 256;
|
||||
const ctx2 = canvas2.getContext('2d');
|
||||
|
||||
// Create radial gradient
|
||||
const gradient = ctx2.createRadialGradient(128, 128, 0, 128, 128, 128);
|
||||
gradient.addColorStop(0, '#ffd93d');
|
||||
gradient.addColorStop(0.5, '#6bcf7f');
|
||||
gradient.addColorStop(1, '#4d96ff');
|
||||
ctx2.fillStyle = gradient;
|
||||
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
|
||||
|
||||
// Add some detail
|
||||
ctx2.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
||||
ctx2.lineWidth = 2;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
ctx2.beginPath();
|
||||
ctx2.arc(128, 128, 20 + i * 15, 0, Math.PI * 2);
|
||||
ctx2.stroke();
|
||||
}
|
||||
|
||||
const texture2 = new THREE.CanvasTexture(canvas2);
|
||||
texture2.colorSpace = THREE.SRGBColorSpace;
|
||||
// LinearFilter: Interpolates between pixels, creates smooth appearance
|
||||
texture2.magFilter = THREE.LinearFilter;
|
||||
texture2.minFilter = THREE.LinearMipmapLinearFilter; // Best quality with mipmaps
|
||||
|
||||
// Texture 3: Pattern with wrapping and repeating
|
||||
const canvas3 = document.createElement('canvas');
|
||||
canvas3.width = 64;
|
||||
canvas3.height = 64;
|
||||
const ctx3 = canvas3.getContext('2d');
|
||||
|
||||
// Create repeating pattern
|
||||
ctx3.fillStyle = '#2d3561';
|
||||
ctx3.fillRect(0, 0, 64, 64);
|
||||
|
||||
ctx3.strokeStyle = '#f72585';
|
||||
ctx3.lineWidth = 3;
|
||||
ctx3.beginPath();
|
||||
ctx3.moveTo(0, 0);
|
||||
ctx3.lineTo(64, 64);
|
||||
ctx3.moveTo(64, 0);
|
||||
ctx3.lineTo(0, 64);
|
||||
ctx3.stroke();
|
||||
|
||||
ctx3.fillStyle = '#7209b7';
|
||||
ctx3.beginPath();
|
||||
ctx3.arc(32, 32, 15, 0, Math.PI * 2);
|
||||
ctx3.fill();
|
||||
|
||||
const texture3 = new THREE.CanvasTexture(canvas3);
|
||||
texture3.colorSpace = THREE.SRGBColorSpace;
|
||||
texture3.magFilter = THREE.LinearFilter;
|
||||
texture3.minFilter = THREE.LinearMipmapLinearFilter;
|
||||
|
||||
// Enable texture wrapping for repeating patterns
|
||||
texture3.wrapS = THREE.RepeatWrapping;
|
||||
texture3.wrapT = THREE.RepeatWrapping;
|
||||
// Repeat the texture 3 times in both directions
|
||||
texture3.repeat.set(3, 3);
|
||||
|
||||
// Create three objects with different textures and filters
|
||||
|
||||
// 1. Cube with NearestFilter (pixelated look)
|
||||
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
|
||||
const cubeMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture1,
|
||||
roughness: 0.7,
|
||||
metalness: 0.3
|
||||
});
|
||||
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
|
||||
cube.position.x = -4;
|
||||
scene.add(cube);
|
||||
|
||||
// 2. Sphere with LinearFilter (smooth blending)
|
||||
const sphereGeometry = new THREE.SphereGeometry(1.2, 32, 32);
|
||||
const sphereMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture2,
|
||||
roughness: 0.5,
|
||||
metalness: 0.4
|
||||
});
|
||||
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
|
||||
sphere.position.x = 0;
|
||||
scene.add(sphere);
|
||||
|
||||
// 3. Torus with repeating texture and wrapping
|
||||
const torusGeometry = new THREE.TorusGeometry(1.2, 0.5, 16, 50);
|
||||
const torusMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture3,
|
||||
roughness: 0.6,
|
||||
metalness: 0.5
|
||||
});
|
||||
torus = new THREE.Mesh(torusGeometry, torusMaterial);
|
||||
torus.position.x = 4;
|
||||
scene.add(torus);
|
||||
|
||||
// Add labels (optional floating text indicators)
|
||||
addLabel('NearestFilter', -4, -2, 0);
|
||||
addLabel('LinearFilter', 0, -2, 0);
|
||||
addLabel('Repeating Texture', 4, -2, 0);
|
||||
}
|
||||
|
||||
function addLabel(text, x, y, z) {
|
||||
// Create a simple text sprite using canvas
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
canvas.width = 512;
|
||||
canvas.height = 128;
|
||||
|
||||
context.fillStyle = 'rgba(0, 0, 0, 0.6)';
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
context.font = 'Bold 48px Arial';
|
||||
context.fillStyle = 'white';
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText(text, 256, 64);
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
|
||||
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
|
||||
const sprite = new THREE.Sprite(spriteMaterial);
|
||||
sprite.position.set(x, y, z);
|
||||
sprite.scale.set(2, 0.5, 1);
|
||||
scene.add(sprite);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Animate objects to show textures from different angles
|
||||
const time = Date.now() * 0.001;
|
||||
|
||||
// Cube rotates to show filter differences clearly
|
||||
cube.rotation.x = time * 0.3;
|
||||
cube.rotation.y = time * 0.5;
|
||||
|
||||
// Sphere rotates slowly
|
||||
sphere.rotation.y = time * 0.4;
|
||||
|
||||
// Torus rotates to show wrapping pattern
|
||||
torus.rotation.x = time * 0.2;
|
||||
torus.rotation.y = time * 0.6;
|
||||
|
||||
// Update controls
|
||||
controls.update();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Three.js - Interactive Crystal Garden</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
#info h2 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
#info .web-source {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.3);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#controls-hint {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h2>Interactive Crystal Garden</h2>
|
||||
<p><strong>Technique:</strong> OrbitControls for immersive 3D exploration</p>
|
||||
<p><strong>Learning:</strong> Implemented smooth camera controls with damping, zoom limits, and rotation constraints to create an intuitive exploration experience of a procedurally generated crystal formation.</p>
|
||||
<div class="web-source">
|
||||
<strong>Web Source:</strong><br>
|
||||
<a href="https://threejs.org/docs/examples/en/controls/OrbitControls.html" target="_blank" style="color: #4fc3f7;">Three.js OrbitControls Documentation</a><br>
|
||||
<em>Applied: enableDamping (0.05), zoom limits (5-50), polar angle constraints (Math.PI/6 to Math.PI/2), and autoRotate for subtle animation</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="controls-hint">
|
||||
🖱️ Left Click + Drag: Rotate | Right Click + Drag: Pan | Scroll: Zoom
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
// Scene setup
|
||||
let camera, scene, renderer, controls;
|
||||
let crystals = [];
|
||||
let time = 0;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Camera setup - positioned to view the crystal garden from an interesting angle
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
60,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
camera.position.set(15, 12, 15);
|
||||
|
||||
// Scene with dark background to make crystals pop
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x0a0a1a);
|
||||
scene.fog = new THREE.Fog(0x0a0a1a, 30, 60);
|
||||
|
||||
// Renderer with antialiasing for smooth edges
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// OrbitControls setup - This is the core learning from the web source
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
|
||||
// Enable damping for smooth, inertial movement
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
|
||||
// Set zoom limits for optimal viewing experience
|
||||
controls.minDistance = 5;
|
||||
controls.maxDistance = 50;
|
||||
|
||||
// Constrain vertical rotation to prevent upside-down views
|
||||
controls.minPolarAngle = Math.PI / 6; // 30 degrees from top
|
||||
controls.maxPolarAngle = Math.PI / 2; // 90 degrees (horizon)
|
||||
|
||||
// Enable subtle auto-rotation for dynamic presentation
|
||||
controls.autoRotate = true;
|
||||
controls.autoRotateSpeed = 0.5;
|
||||
|
||||
// Set target to center of scene
|
||||
controls.target.set(0, 3, 0);
|
||||
|
||||
// Update controls after manual camera positioning
|
||||
controls.update();
|
||||
|
||||
// Create the crystal garden visualization
|
||||
createCrystalGarden();
|
||||
|
||||
// Lighting setup
|
||||
createLighting();
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function createCrystalGarden() {
|
||||
// Create ground plane
|
||||
const groundGeometry = new THREE.CircleGeometry(25, 64);
|
||||
const groundMaterial = new THREE.MeshStandardMaterial({
|
||||
color: 0x1a1a2e,
|
||||
roughness: 0.8,
|
||||
metalness: 0.2
|
||||
});
|
||||
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
ground.receiveShadow = true;
|
||||
scene.add(ground);
|
||||
|
||||
// Create multiple crystal clusters at different positions
|
||||
const clusterPositions = [
|
||||
{ x: 0, z: 0, count: 12, radius: 4 },
|
||||
{ x: -8, z: 6, count: 8, radius: 3 },
|
||||
{ x: 10, z: -4, count: 6, radius: 2.5 },
|
||||
{ x: -6, z: -8, count: 7, radius: 2.8 },
|
||||
{ x: 8, z: 8, count: 9, radius: 3.2 }
|
||||
];
|
||||
|
||||
clusterPositions.forEach(cluster => {
|
||||
createCrystalCluster(cluster.x, cluster.z, cluster.count, cluster.radius);
|
||||
});
|
||||
}
|
||||
|
||||
function createCrystalCluster(centerX, centerZ, count, radius) {
|
||||
const colors = [
|
||||
0x4fc3f7, // Cyan
|
||||
0x9c27b0, // Purple
|
||||
0xff6b6b, // Pink
|
||||
0x4ecdc4, // Teal
|
||||
0xf06292 // Rose
|
||||
];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
// Random position within cluster radius
|
||||
const angle = (i / count) * Math.PI * 2 + Math.random() * 0.5;
|
||||
const dist = Math.random() * radius;
|
||||
const x = centerX + Math.cos(angle) * dist;
|
||||
const z = centerZ + Math.sin(angle) * dist;
|
||||
|
||||
// Random crystal height and size
|
||||
const height = 2 + Math.random() * 6;
|
||||
const baseRadius = 0.3 + Math.random() * 0.5;
|
||||
|
||||
// Create octahedron for crystal shape (two pyramids)
|
||||
const geometry = new THREE.OctahedronGeometry(baseRadius, 0);
|
||||
|
||||
// Scale vertically to create elongated crystal
|
||||
geometry.scale(1, height / baseRadius, 1);
|
||||
|
||||
// Random color from palette
|
||||
const color = colors[Math.floor(Math.random() * colors.length)];
|
||||
|
||||
const material = new THREE.MeshPhysicalMaterial({
|
||||
color: color,
|
||||
metalness: 0.3,
|
||||
roughness: 0.1,
|
||||
transparent: true,
|
||||
opacity: 0.85,
|
||||
envMapIntensity: 1.0,
|
||||
clearcoat: 1.0,
|
||||
clearcoatRoughness: 0.1
|
||||
});
|
||||
|
||||
const crystal = new THREE.Mesh(geometry, material);
|
||||
crystal.position.set(x, height / 2, z);
|
||||
|
||||
// Random rotation for variety
|
||||
crystal.rotation.y = Math.random() * Math.PI * 2;
|
||||
crystal.rotation.z = (Math.random() - 0.5) * 0.2;
|
||||
|
||||
crystal.castShadow = true;
|
||||
crystal.receiveShadow = true;
|
||||
|
||||
scene.add(crystal);
|
||||
crystals.push({
|
||||
mesh: crystal,
|
||||
baseY: height / 2,
|
||||
floatSpeed: 0.5 + Math.random() * 0.5,
|
||||
floatOffset: Math.random() * Math.PI * 2
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createLighting() {
|
||||
// Ambient light for base illumination
|
||||
const ambientLight = new THREE.AmbientLight(0x404080, 0.3);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Main directional light (simulating sun/moon)
|
||||
const mainLight = new THREE.DirectionalLight(0xffffff, 1.0);
|
||||
mainLight.position.set(10, 20, 10);
|
||||
mainLight.castShadow = true;
|
||||
mainLight.shadow.camera.left = -20;
|
||||
mainLight.shadow.camera.right = 20;
|
||||
mainLight.shadow.camera.top = 20;
|
||||
mainLight.shadow.camera.bottom = -20;
|
||||
mainLight.shadow.mapSize.width = 2048;
|
||||
mainLight.shadow.mapSize.height = 2048;
|
||||
scene.add(mainLight);
|
||||
|
||||
// Accent lights for crystal illumination
|
||||
const accentLight1 = new THREE.PointLight(0x4fc3f7, 1.5, 20);
|
||||
accentLight1.position.set(-8, 5, 6);
|
||||
scene.add(accentLight1);
|
||||
|
||||
const accentLight2 = new THREE.PointLight(0xff6b6b, 1.5, 20);
|
||||
accentLight2.position.set(10, 5, -4);
|
||||
scene.add(accentLight2);
|
||||
|
||||
const accentLight3 = new THREE.PointLight(0x9c27b0, 1.5, 20);
|
||||
accentLight3.position.set(0, 8, 0);
|
||||
scene.add(accentLight3);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
time += 0.01;
|
||||
|
||||
// Subtle floating animation for crystals
|
||||
crystals.forEach(crystal => {
|
||||
crystal.mesh.position.y = crystal.baseY +
|
||||
Math.sin(time * crystal.floatSpeed + crystal.floatOffset) * 0.1;
|
||||
|
||||
// Gentle rotation
|
||||
crystal.mesh.rotation.y += 0.002;
|
||||
});
|
||||
|
||||
// CRITICAL: Update controls in animation loop
|
||||
// Required when enableDamping or autoRotate are true
|
||||
controls.update();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Three.js - Particle Wave System</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: #000000;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(100, 200, 255, 0.3);
|
||||
}
|
||||
#info h2 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
color: #4fc3f7;
|
||||
}
|
||||
#info p {
|
||||
margin: 5px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#info .web-source {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.3);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#info .web-source a {
|
||||
color: #4fc3f7;
|
||||
text-decoration: none;
|
||||
}
|
||||
#info .web-source a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h2>Particle Wave System</h2>
|
||||
<p><strong>Technique:</strong> BufferGeometry with Points for dynamic particle waves</p>
|
||||
<p><strong>Learning:</strong> Creating a grid of particles using BufferGeometry position attributes, then animating them with sine/cosine wave functions for fluid motion. Performance optimized with attribute updates.</p>
|
||||
<div class="web-source">
|
||||
<strong>Web Source:</strong><br>
|
||||
<a href="https://threejs.org/examples/#webgl_points_waves" target="_blank">Three.js Particle Waves Example</a><br>
|
||||
<em>Applied: BufferGeometry with position attributes, Points/PointsMaterial setup, sine wave animation with needsUpdate flag for smooth 60fps performance with 10,000+ particles</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
|
||||
// Scene setup
|
||||
let camera, scene, renderer;
|
||||
let particles;
|
||||
let particleCount;
|
||||
const SEPARATION = 100;
|
||||
const AMPLITUDE = 100;
|
||||
const WIDTH = 80;
|
||||
const HEIGHT = 80;
|
||||
|
||||
// Animation variables
|
||||
let count = 0;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Camera setup
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
1,
|
||||
10000
|
||||
);
|
||||
camera.position.set(0, 300, 1000);
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
// Scene
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x000000);
|
||||
scene.fog = new THREE.Fog(0x000000, 1, 10000);
|
||||
|
||||
// Renderer (WebGL)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// Create particle wave visualization
|
||||
createParticleWave();
|
||||
|
||||
// Add ambient lighting for particles
|
||||
const ambientLight = new THREE.AmbientLight(0x222222);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Add directional light for depth
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
|
||||
directionalLight.position.set(1, 1, 1);
|
||||
scene.add(directionalLight);
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function createParticleWave() {
|
||||
// Calculate total particle count for grid
|
||||
particleCount = WIDTH * HEIGHT;
|
||||
|
||||
// Create BufferGeometry for particles
|
||||
// This is the key technique from the web source:
|
||||
// Using BufferGeometry with position attributes for full control
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const positions = new Float32Array(particleCount * 3);
|
||||
const colors = new Float32Array(particleCount * 3);
|
||||
|
||||
// Initialize particle positions in a grid
|
||||
let i = 0;
|
||||
for (let ix = 0; ix < WIDTH; ix++) {
|
||||
for (let iy = 0; iy < HEIGHT; iy++) {
|
||||
// Position particles in a grid pattern
|
||||
positions[i * 3] = ix * SEPARATION - ((WIDTH * SEPARATION) / 2);
|
||||
positions[i * 3 + 1] = 0; // Y will be animated
|
||||
positions[i * 3 + 2] = iy * SEPARATION - ((HEIGHT * SEPARATION) / 2);
|
||||
|
||||
// Create gradient colors from cyan to magenta
|
||||
const hue = (ix / WIDTH) * 0.5 + 0.5; // 0.5 to 1.0 (cyan to magenta)
|
||||
const color = new THREE.Color();
|
||||
color.setHSL(hue, 1.0, 0.5);
|
||||
|
||||
colors[i * 3] = color.r;
|
||||
colors[i * 3 + 1] = color.g;
|
||||
colors[i * 3 + 2] = color.b;
|
||||
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
// Set position attribute - this is the core of BufferGeometry particle control
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
||||
|
||||
// Create PointsMaterial for particle rendering
|
||||
// Size controls particle visibility, vertexColors enables per-particle coloring
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: 3,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 0.8,
|
||||
sizeAttenuation: true,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
|
||||
// Create Points object - this combines geometry and material
|
||||
particles = new THREE.Points(geometry, material);
|
||||
scene.add(particles);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Animation logic using learned wave techniques
|
||||
// This is the key learning: updating particle positions with sine/cosine waves
|
||||
|
||||
count += 0.1;
|
||||
|
||||
const positions = particles.geometry.attributes.position.array;
|
||||
|
||||
// Animate each particle with wave motion
|
||||
let i = 0;
|
||||
for (let ix = 0; ix < WIDTH; ix++) {
|
||||
for (let iy = 0; iy < HEIGHT; iy++) {
|
||||
// Apply sine wave formula from web research
|
||||
// Multiple sine waves with different frequencies create complex motion
|
||||
const wave1 = Math.sin((ix / WIDTH) * Math.PI * 4 + count);
|
||||
const wave2 = Math.cos((iy / HEIGHT) * Math.PI * 4 + count);
|
||||
const wave3 = Math.sin((ix / WIDTH + iy / HEIGHT) * Math.PI * 2 + count * 0.5);
|
||||
|
||||
// Combine multiple waves for rich, organic motion
|
||||
positions[i * 3 + 1] = (wave1 + wave2 + wave3) * AMPLITUDE;
|
||||
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
// CRITICAL: Mark position attribute as needing update
|
||||
// This is the performance technique learned from research
|
||||
particles.geometry.attributes.position.needsUpdate = true;
|
||||
|
||||
// Rotate entire particle system for dynamic viewing angle
|
||||
particles.rotation.y = count * 0.02;
|
||||
|
||||
// Subtle camera movement for immersion
|
||||
camera.position.x = Math.sin(count * 0.05) * 200;
|
||||
camera.position.z = 1000 + Math.cos(count * 0.05) * 200;
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Three.js - Geometry Gallery</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
#info h2 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
#info .web-source {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.3);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h2>Geometry Gallery</h2>
|
||||
<p><strong>Technique:</strong> Multiple advanced geometries with varied materials</p>
|
||||
<p><strong>Learning:</strong> Learned about 6 different geometry types: TorusGeometry (donut ring), IcosahedronGeometry (20-sided polyhedron), OctahedronGeometry (8-sided polyhedron), TorusKnotGeometry (twisted tube), DodecahedronGeometry (12-sided polyhedron), and TetrahedronGeometry (4-sided polyhedron). Each geometry accepts different parameters for customization and can be combined in a scene using different materials and positions.</p>
|
||||
<div class="web-source">
|
||||
<strong>Web Source:</strong><br>
|
||||
<a href="https://sbcode.net/threejs/geometries/" target="_blank" style="color: #4fc3f7;">sbcode.net/threejs/geometries/</a><br>
|
||||
<em>Applied: Created a 3D gallery showcasing 6 distinct geometry types, each with unique materials (wireframe, standard, phong) and synchronized orbital animations. Demonstrates parameter customization and effective scene composition.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
// Scene setup
|
||||
let camera, scene, renderer, controls;
|
||||
let geometries = [];
|
||||
let time = 0;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Camera setup
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
60,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
camera.position.set(0, 3, 12);
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
// Scene
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x0a0a1a);
|
||||
scene.fog = new THREE.Fog(0x0a0a1a, 10, 25);
|
||||
|
||||
// Renderer (WebGL)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// Orbit controls for user interaction
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.minDistance = 5;
|
||||
controls.maxDistance = 30;
|
||||
|
||||
// Create visualization using learned technique
|
||||
createVisualization();
|
||||
|
||||
// Lighting
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const directionalLight1 = new THREE.DirectionalLight(0x4fc3f7, 0.8);
|
||||
directionalLight1.position.set(5, 5, 5);
|
||||
scene.add(directionalLight1);
|
||||
|
||||
const directionalLight2 = new THREE.DirectionalLight(0xf06292, 0.6);
|
||||
directionalLight2.position.set(-5, 3, -5);
|
||||
scene.add(directionalLight2);
|
||||
|
||||
const directionalLight3 = new THREE.DirectionalLight(0xffd54f, 0.5);
|
||||
directionalLight3.position.set(0, -5, 0);
|
||||
scene.add(directionalLight3);
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function createVisualization() {
|
||||
// Define geometry configurations with different types
|
||||
// Arranged in two rows of 3 geometries each
|
||||
const geometryConfigs = [
|
||||
{
|
||||
// TorusGeometry - donut ring shape
|
||||
geometry: new THREE.TorusGeometry(1, 0.4, 16, 100),
|
||||
material: new THREE.MeshStandardMaterial({
|
||||
color: 0x4fc3f7,
|
||||
metalness: 0.7,
|
||||
roughness: 0.3,
|
||||
emissive: 0x004466,
|
||||
emissiveIntensity: 0.2
|
||||
}),
|
||||
position: [-4, 2, 0],
|
||||
rotation: [0, 0, 0],
|
||||
rotationSpeed: [0.3, 0.5, 0.1]
|
||||
},
|
||||
{
|
||||
// IcosahedronGeometry - 20-sided polyhedron
|
||||
geometry: new THREE.IcosahedronGeometry(1.2, 0),
|
||||
material: new THREE.MeshPhongMaterial({
|
||||
color: 0xf06292,
|
||||
shininess: 100,
|
||||
specular: 0xffffff,
|
||||
flatShading: true
|
||||
}),
|
||||
position: [0, 2, 0],
|
||||
rotation: [0, 0, 0],
|
||||
rotationSpeed: [0.2, 0.4, 0.3]
|
||||
},
|
||||
{
|
||||
// OctahedronGeometry - 8-sided polyhedron
|
||||
geometry: new THREE.OctahedronGeometry(1.3, 1),
|
||||
material: new THREE.MeshStandardMaterial({
|
||||
color: 0xffd54f,
|
||||
metalness: 0.5,
|
||||
roughness: 0.4,
|
||||
emissive: 0x664400,
|
||||
emissiveIntensity: 0.15
|
||||
}),
|
||||
position: [4, 2, 0],
|
||||
rotation: [0, 0, 0],
|
||||
rotationSpeed: [0.4, 0.2, 0.5]
|
||||
},
|
||||
{
|
||||
// TorusKnotGeometry - twisted tube shape
|
||||
geometry: new THREE.TorusKnotGeometry(0.8, 0.3, 100, 16),
|
||||
material: new THREE.MeshStandardMaterial({
|
||||
color: 0x9575cd,
|
||||
wireframe: false,
|
||||
metalness: 0.8,
|
||||
roughness: 0.2
|
||||
}),
|
||||
position: [-4, -2, 0],
|
||||
rotation: [0, 0, 0],
|
||||
rotationSpeed: [0.15, 0.35, 0.25]
|
||||
},
|
||||
{
|
||||
// DodecahedronGeometry - 12-sided polyhedron
|
||||
geometry: new THREE.DodecahedronGeometry(1.2, 0),
|
||||
material: new THREE.MeshPhongMaterial({
|
||||
color: 0x4db6ac,
|
||||
shininess: 80,
|
||||
flatShading: true,
|
||||
wireframe: false
|
||||
}),
|
||||
position: [0, -2, 0],
|
||||
rotation: [0, 0, 0],
|
||||
rotationSpeed: [0.25, 0.15, 0.4]
|
||||
},
|
||||
{
|
||||
// TetrahedronGeometry - 4-sided polyhedron
|
||||
geometry: new THREE.TetrahedronGeometry(1.3, 1),
|
||||
material: new THREE.MeshStandardMaterial({
|
||||
color: 0xff8a65,
|
||||
metalness: 0.6,
|
||||
roughness: 0.3,
|
||||
emissive: 0x442200,
|
||||
emissiveIntensity: 0.25
|
||||
}),
|
||||
position: [4, -2, 0],
|
||||
rotation: [0, 0, 0],
|
||||
rotationSpeed: [0.35, 0.45, 0.2]
|
||||
}
|
||||
];
|
||||
|
||||
// Create meshes from configurations
|
||||
geometryConfigs.forEach(config => {
|
||||
const mesh = new THREE.Mesh(config.geometry, config.material);
|
||||
mesh.position.set(...config.position);
|
||||
mesh.rotation.set(...config.rotation);
|
||||
|
||||
// Store rotation speed for animation
|
||||
mesh.userData.rotationSpeed = config.rotationSpeed;
|
||||
|
||||
// Add wireframe overlay for some geometries
|
||||
if (config.position[1] === 2) {
|
||||
const wireframe = new THREE.WireframeGeometry(config.geometry);
|
||||
const line = new THREE.LineSegments(wireframe);
|
||||
line.material.color.setHex(0xffffff);
|
||||
line.material.opacity = 0.15;
|
||||
line.material.transparent = true;
|
||||
mesh.add(line);
|
||||
}
|
||||
|
||||
scene.add(mesh);
|
||||
geometries.push(mesh);
|
||||
});
|
||||
|
||||
// Add subtle grid for spatial reference
|
||||
const gridHelper = new THREE.GridHelper(20, 20, 0x444466, 0x222233);
|
||||
gridHelper.position.y = -4;
|
||||
scene.add(gridHelper);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
time += 0.01;
|
||||
|
||||
// Animate each geometry with its unique rotation speed
|
||||
geometries.forEach((mesh, index) => {
|
||||
const speeds = mesh.userData.rotationSpeed;
|
||||
mesh.rotation.x += speeds[0] * 0.01;
|
||||
mesh.rotation.y += speeds[1] * 0.01;
|
||||
mesh.rotation.z += speeds[2] * 0.01;
|
||||
|
||||
// Add subtle floating motion
|
||||
mesh.position.y += Math.sin(time * 2 + index) * 0.003;
|
||||
});
|
||||
|
||||
// Update controls
|
||||
controls.update();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue