直接来看one-shot效果
K3(web端Agent模式):
5.6-sol-xhigh(codex 桌面端)
提示词(用grok模仿其他3D交互网页提示词生成)
Create a single, self-contained HTML file that renders a highly realistic and fully interactive 3D vinyl record player (turntable) using Three.js via CDN (use a recent stable version such as r128 or later).
The scene must include these components with realistic geometry and materials:
- Wooden plinth/base with visible wood grain texture (procedural or canvas-generated)
- Metallic rotating platter with beveled edge and mounting details
- Black vinyl record on the platter with visible concentric grooves (use multiple thin rings/lines or procedural texture) and a central paper label with text ("Side A", album title, etc.)
- Detailed tonearm assembly: arm tube, counterweight, headshell, and stylus/needle that can lift and swing
- Optional hinged transparent acrylic dust cover with opening/closing animation
Lighting & rendering: Use multiple lights (ambient + directional key light + point lights) for realistic reflections on metal/vinyl, soft shadows, and glossy materials (MeshPhongMaterial or MeshStandardMaterial). High visual fidelity within single-file constraints.
Camera controls: Implement smooth orbit controls — mouse drag to rotate view, mouse wheel to zoom, right-click or two-finger pan. Keep the turntable nicely centered and framed.
Core interactions & animations (smooth 60fps with requestAnimationFrame):
- Prominent Play/Pause control (retro-styled button or 3D clickable element): Starts platter spinning at correct speed + smoothly lowers tonearm onto record + begins slow inward tracking animation. Pause stops rotation and lifts tonearm.
- Speed selector: Buttons or knob for 33⅓ RPM, 45 RPM, 78 RPM. Changing speed instantly updates platter angular velocity (calculate correctly: 33 RPM ≈ 3.49 rad/s, 45 RPM ≈ 4.71 rad/s). Add visual feedback (e.g., platter edge details or strobe pattern that looks more/less stable at correct speed).
- Click on record or platter to toggle play/pause.
- Draggable tonearm: User can click + drag the tonearm to manually move it across the record (use raycasting for accurate interaction). Constrain angle limits. Add light damping/spring feel when dragging or releasing.
- Audio (Web Audio API, fully self-contained): When playing, trigger realistic vinyl sound — crackle/surface noise (filtered noise) + pleasant looping melody or chords (simple synth/oscillators). Include a volume slider in the UI. Optionally link slight pitch variation to current RPM.
Additional polish & features:
- Slight realistic wobble/eccentricity on the spinning record
- Subtle floating dust/light particles above the vinyl for atmosphere
- Retro-modern UI panel (side or bottom, non-obstructive) with power LED, current RPM display, and playback timer/progress (auto lift tonearm after ~25–30 seconds simulating one side)
- Dark elegant aesthetic: warm wood tones, metallic sheen, glossy black vinyl, nice contrast
- The entire experience should feel premium, nostalgic yet modern, and satisfying to interact with
Code requirements: Complete, error-free, well-commented JavaScript. Must run perfectly by opening the single .html file in any modern browser. No external assets except the Three.js CDN. Prioritize smooth animations and intuitive interactions.
Generate the full working code now.