Build a complete, single-file HTML/Three.js experience showing an exceptionally beautiful, interactive Newton’s cradle.
Use the attached image as the reference for the recognizable construction: five polished metal balls suspended inside two parallel chrome frames.
The result should feel like a luxury product filmed in a real photography studio, with convincing materials, graceful pendulum motion, and working collision physics.
Open directly into the finished scene. The first rendered frame must already be composed beautifully enough to use as a video thumbnail.
Prioritize three things equally: the beauty of the chrome, the physical construction, and the correctness of the motion.
Create a square, recording-ready composition that adapts to the browser without stretching. Center one substantial Newton’s cradle on a seamless warm-ivory studio surface.
Use a fixed camera positioned mostly in front of the cradle, slightly above the balls and slightly off-center. Show enough depth to distinguish the front and rear frames, while keeping all five balls easy to count.
Use a restrained product-photography perspective, approximately equivalent to a 70mm lens. Avoid a wide-angle appearance.
The cradle should fill most of the image. Leave comfortable margins for the full outward swing on both sides. Neither the balls nor the frame may leave the image during normal operation.
Keep the camera stationary throughout. No orbiting, automatic zoom, camera shake, or cuts.
Construct exactly five identical, perfectly round polished stainless-steel spheres.
At rest, their centers must form one horizontal row, with neighboring spheres touching. Their diameters, masses, and suspension lengths must match.
Use two slender, parallel, inverted-U chrome support frames with rounded corners, positioned in front of and behind the ball row.
Each ball must hang from two fine, taut suspension wires: one connected to the front support and one to the rear support. These wires constrain its motion to the shared vertical swing plane.
Include small, believable attachment details. The wires must connect visibly to the balls and frame.
The support frame and anchors remain completely stationary. Update the suspension geometry from the actual ball positions every frame. Wires must never stretch, disconnect, pass through the spheres, or wave independently.
Choose elegant proportions: substantial spheres, slender tubular supports, and enough suspension length for a satisfying swing. Avoid thick ropes, oversized frames, and a bulky decorative base.
Make the metal look convincingly reflective.
Use physically based metallic materials, high-quality sphere geometry, restrained surface roughness, and a carefully designed reflection environment.
Create large studio-softbox reflections that wrap naturally around the spheres and curved frame. Include broad bright highlights, darker reflected regions, and subtle warm tones from the studio.
The spheres must retain readable volume. Avoid flat gray metal, featureless white balls, plastic shading, and excessive bloom.
Build the reflection environment procedurally inside the file. Do not depend on downloaded HDR images or external texture assets.
Use a large soft key light from the upper-left, gentle fill from the opposite side, and a restrained rim light to define the metal against the background.
Add soft contact shadows beneath the frame and moving shadows beneath the balls. Shadows should follow the motion and help communicate height.
Keep the background uncluttered, with a very subtle ivory gradient. The overall image should feel calm, precise, and expensive.
Implement a working simplified Newton’s cradle simulation.
Represent each sphere as an equal-mass pendulum with an angular position and angular velocity. Gravity must drive the swing. Derive the sphere positions from the pendulum geometry.
Use stable time integration and collision handling that can propagate impacts through the full chain of touching balls.
A fixed timestep with sufficient substeps, event-based impacts, or a suitable constraint-aware solver is acceptable. Choose an approach that remains stable at different rendering frame rates.
Do not animate the balls with unrelated sine waves or a prerecorded sequence. The motion must respond to the simulated state and user input.
The required behavior is:
Release one outer ball. It swings into the row, transfers its motion through the chain, and approximately one ball swings outward at the opposite end.
The outgoing ball returns, strikes the row, and sends the original outer ball outward again.
Release two adjacent balls together from one side. Approximately two balls must swing outward together from the opposite side.
The remaining balls should stay close to their resting positions, allowing small physically plausible movement during impacts.
Motion transfers at contact. The outgoing balls must not begin swinging before the incoming balls reach the row.
Handle the chain of contacts consistently. A single order-dependent collision pass must not produce a different result when the direction reverses.
Collisions should approximately conserve momentum and kinetic energy over the brief impact interval, with small losses. Use gentle damping so the swing amplitude decreases gradually.
The simulation must not gain energy, accelerate indefinitely, visibly interpenetrate, jitter continuously, or send the entire row swinging after every impact.
The balls should accelerate toward the bottom of their arcs and slow naturally near their turning points. Avoid constant-speed swinging.
Start with the leftmost ball raised approximately 35 degrees and the other four hanging at rest. Hold this initial pose briefly, around 0.4 seconds, then release automatically.
The experience must immediately demonstrate the classic alternating motion without requiring a click. Continue running without an automatic reset.
Add a small, elegant control strip near the bottom edge with:
“1 BALL”
“2 BALLS”
Pause / Resume
Reset
“0.25×” slow motion
Keep these controls visually secondary. They must not overlap the cradle or its swing paths.
Selecting “1 BALL” or “2 BALLS” should reset the simulation, raise the corresponding leftmost ball or pair to the same release angle, briefly hold, and release.
Reset should restore and replay the currently selected mode.
Slow motion must scale simulated time while preserving the same physics. It must not change gravity, collision behavior, or suspension geometry.
Allow the user to drag either outer ball outward within its permitted swing plane, then release it. Clamp the drag angle to a sensible maximum, around 45 degrees. Keep its suspension wires taut throughout.
Add an “H” keyboard shortcut to hide or reveal the controls for clean recording.
Keep the experience silent. No music, collision sounds, particles, motion trails, impact flashes, explanatory overlays, large titles, model names, or decorative text.
Deliver one complete HTML file with inline CSS and JavaScript. Use one consistently pinned Three.js version and matching modules if needed.
No build step, backend, external models, external textures, or HDR downloads.
Initialize the renderer, camera, lighting, materials, and starting pose before revealing the canvas. Avoid a visible black startup frame.
Support browser resizing without distorting the scene. Aim for smooth performance on a normal laptop and cap pixel density sensibly.
Before finishing, check that:
Exactly five spheres remain visible and correctly suspended.
The complete frame and maximum swing fit inside the square composition.
One-ball mode transfers approximately one ball at each impact.
Two-ball mode transfers approximately two balls at each impact.
Pause, reset, slow motion, and dragging work.
Chrome reflections remain readable throughout the motion.
The scene appears immediately and produces no runtime errors.
Return the complete working HTML.
한국어 번역
매우 아름답고 상호작용 가능한 뉴턴 크래들을 보여주는 완전한 단일 파일 HTML/Three.js 경험을 구축하세요.
알아보기 쉬운 구조를 위해 첨부된 이미지를 참조하세요: 두 개의 평행한 크롬 프레임 안에 매달린 다섯 개의 광택 금속 공.
결과물은 실제 사진 스튜디오에서 촬영한 럭셔리 제품처럼 느껴져야 하며, 설득력 있는 재질, 우아한 진자 운동, 그리고 실제로 작동하는 충돌 물리를 갖추어야 합니다.
완성된 장면으로 바로 진입하세요. 첫 번째 렌더링 프레임은 이미 비디오 썸네일로 사용할 수 있을 만큼 아름답게 구성되어 있어야 합니다.
세 가지를 동등하게 우선하세요: 크롬의 아름다움, 물리적 구조, 그리고 운동의 정확성.
늘어남 없이 브라우저에 적응하는, 녹화 준비가 된 정사각형 구도를 만드세요. 이음새 없는 따뜻한 아이보리색 스튜디오 표면 위에 커다란 뉴턴 크래들 하나를 중앙에 배치하세요.
고정 카메라를 사용하되, 크래들 정면 쪽에 위치시키고 공보다 약간 위, 그리고 중앙에서 약간 벗어나게 하세요. 앞쪽과 뒤쪽 프레임을 구분할 수 있을 만큼 깊이를 보여주면서, 다섯 개의 공을 모두 세기 쉽게 유지하세요.
약 70mm 렌즈에 해당하는 절제된 제품 사진 원근감을 사용하세요. 광각처럼 보이는 것은 피하세요.
크래들은 이미지의 대부분을 채워야 합니다. 양쪽에서 공이 완전히 바깥으로 스윙할 수 있도록 충분한 여백을 남기세요. 정상 작동 중에 공이나 프레임이 이미지 밖으로 나가서는 안 됩니다.
카메라는 내내 고정하세요. 궤도 회전, 자동 줌, 카메라 흔들림, 컷은 없습니다.
동일하고 완벽하게 둥근 광택 스테인리스 스틸 구체를 정확히 다섯 개 만드세요.
정지 상태에서 각 구체의 중심은 하나의 수평 행을 이루어야 하며, 인접한 구체는 서로 맞닿아야 합니다. 지름, 질량, 매달린 길이는 모두 일치해야 합니다.
둥근 모서리를 가진 가늘고 평행한 역 U자형 크롬 지지 프레임 두 개를 사용하고, 공이 늘어선 행의 앞과 뒤에 배치하세요.
각 공은 두 개의 가늘고 팽팽한 서스펜션 와이어에 매달려야 합니다: 하나는 앞쪽 지지대에, 다른 하나는 뒤쪽 지지대에 연결됩니다. 이 와이어들은 공의 운동을 공유된 수직 스윙 평면으로 제한합니다.
작고 사실적인 부착 디테일을 포함하세요. 와이어는 공과 프레임에 눈에 보이게 연결되어야 합니다.
지지 프레임과 고정점은 완전히 정지해 있어야 합니다. 매 프레임 실제 공 위치로부터 서스펜션 형상을 갱신하세요. 와이어는 절대로 늘어나거나, 분리되거나, 구체를 관통하거나, 독립적으로 흔들려서는 안 됩니다.
우아한 비례를 선택하세요: 충분히 큰 구체, 가느다란 관형 지지대, 그리고 만족스러운 스윙을 위한 충분한 서스펜션 길이. 두꺼운 로프, 지나치게 큰 프레임, 부피가 큰 장식용 베이스는 피하세요.
금속이 설득력 있게 반사되어 보이도록 만드세요.
물리 기반 금속 재질, 고품질 구체 지오메트리, 절제된 표면 거칠기, 그리고 신중하게 설계된 반사 환경을 사용하세요.
구체와 곡선 프레임을 자연스럽게 감싸는 큰 스튜디오 소프트박스 반사를 만드세요. 넓은 밝은 하이라이트, 더 어두운 반사 영역, 그리고 스튜디오에서 오는 은은한 따뜻한 색조를 포함하세요.
구체는 읽을 수 있는 부피감을 유지해야 합니다. 평평한 회색 금속, 특징 없는 흰 공, 플라스틱 같은 셰이딩, 과도한 블룸은 피하세요.
반사 환경을 파일 내부에서 절차적으로 구축하세요. 다운로드한 HDR 이미지나 외부 텍스처 에셋에 의존하지 마세요.
왼쪽 위에서 오는 크고 부드러운 키 라이트, 반대쪽에서 오는 은은한 필 라이트, 그리고 배경에 대해 금속을 정의하는 절제된 림 라이트를 사용하세요.
프레임 아래에는 부드러운 접촉 그림자를, 공 아래에는 움직이는 그림자를 추가하세요. 그림자는 운동을 따라가야 하며 높이를 전달하는 데 도움이 되어야 합니다.
배경은 매우 은은한 아이보리 그라디언트로 깔끔하게 유지하세요. 전체 이미지는 차분하고 정밀하며 고급스럽게 느껴져야 합니다.
작동하는 단순화된 뉴턴 크래들 시뮬레이션을 구현하세요.
각 구체를 각도 위치와 각속도를 가진 동일 질량 진자로 표현하세요. 중력이 스윙을 이끌어야 합니다. 구체 위치는 진자 형상으로부터 도출하세요.
안정적인 시간 적분과, 맞닿은 공의 전체 체인을 통해 충격을 전파할 수 있는 충돌 처리를 사용하세요.
충분한 서브스텝을 가진 고정 타임스텝, 이벤트 기반 충격, 또는 적절한 제약 인식 솔버 모두 허용됩니다. 서로 다른 렌더링 프레임 레이트에서도 안정적으로 유지되는 접근 방식을 선택하세요.
무관한 사인파나 미리 녹화된 시퀀스로 공을 애니메이션하지 마세요. 운동은 시뮬레이션 상태와 사용자 입력에 반응해야 합니다.
요구되는 동작은 다음과 같습니다:
바깥쪽 공 하나를 놓습니다. 그것이 공의 줄로 스윙해 들어가 운동을 체인을 통해 전달하고, 대략 하나의 공이 반대쪽 끝에서 바깥으로 스윙합니다.
나가는 공이 돌아와 줄을 치고, 원래의 바깥쪽 공을 다시 바깥으로 보냅니다.
한쪽에서 인접한 두 공을 함께 놓습니다. 대략 두 개의 공이 반대쪽에서 함께 바깥으로 스윙해야 합니다.
나머지 공들은 정지 위치에 가까이 머물러야 하며, 충격 중에는 물리적으로 그럴듯한 작은 움직임을 허용합니다.
운동은 접촉 시에 전달됩니다. 나가는 공들은 들어오는 공들이 줄에 도달하기 전에 스윙을 시작해서는 안 됩니다.
접촉 체인을 일관되게 처리하세요. 순서에 의존하는 단일 충돌 패스가 방향이 반전될 때 다른 결과를 낳아서는 안 됩니다.
충돌은 짧은 충격 구간 동안 작은 손실을 동반하며 운동량과 운동 에너지를 대략 보존해야 합니다. 스윙 진폭이 점진적으로 감소하도록 완만한 감쇠를 사용하세요.
시뮬레이션은 에너지를 얻거나, 무한히 가속하거나, 눈에 띄게 상호 관통하거나, 계속 떨리거나, 매 충격 후에 전체 줄을 스윙하게 만들어서는 안 됩니다.
공은 호의 바닥을 향해 가속하고 전환점 근처에서 자연스럽게 느려져야 합니다. 등속 스윙은 피하세요.
가장 왼쪽 공을 약 35도 들어 올리고 나머지 네 개는 정지 상태로 매달린 채로 시작하세요. 이 초기 자세를 약 0.4초 동안 잠시 유지한 다음 자동으로 놓으세요.
이 경험은 클릭 없이도 고전적인 교대 운동을 즉시 보여주어야 합니다. 자동 리셋 없이 계속 실행되어야 합니다.
하단 가장자리 근처에 작고 우아한 컨트롤 스트립을 다음 항목과 함께 추가하세요:
“1 BALL”
“2 BALLS”
Pause / Resume
Reset
“0.25×” 슬로 모션
이 컨트롤들은 시각적으로 부차적으로 유지하세요. 크래들이나 그 스윙 경로와 겹쳐서는 안 됩니다.
“1 BALL” 또는 “2 BALLS”를 선택하면 시뮬레이션을 리셋하고, 해당하는 가장 왼쪽 공 또는 한 쌍을 동일한 릴리스 각도까지 들어 올리고, 잠시 유지한 다음 놓아야 합니다.
Reset은 현재 선택된 모드를 복원하고 다시 재생해야 합니다.
슬로 모션은 동일한 물리를 유지하면서 시뮬레이션 시간을 스케일해야 합니다. 중력, 충돌 동작, 서스펜션 형상을 변경해서는 안 됩니다.
사용자가 허용된 스윙 평면 내에서 양쪽 바깥 공 중 하나를 바깥으로 드래그한 다음 놓을 수 있게 하세요. 드래그 각도는 약 45도의 합리적인 최대값으로 제한하세요. 그 서스펜션 와이어는 내내 팽팽하게 유지하세요.
깔끔한 녹화를 위해 컨트롤을 숨기거나 표시하는 “H” 키보드 단축키를 추가하세요.
경험은 무음으로 유지하세요. 음악, 충돌음, 파티클, 모션 트레일, 충격 섬광, 설명 오버레이, 큰 제목, 모델 이름, 장식 텍스트는 없습니다.
인라인 CSS와 JavaScript를 포함한 완전한 HTML 파일 하나를 제공하세요. 일관되게 고정된 하나의 Three.js 버전과 필요한 경우 그에 맞는 모듈을 사용하세요.
빌드 단계, 백엔드, 외부 모델, 외부 텍스처, HDR 다운로드는 없습니다.
캔버스를 표시하기 전에 렌더러, 카메라, 조명, 재질, 시작 자세를 초기화하세요. 검은 시작 프레임이 보이는 것을 피하세요.
장면을 왜곡하지 않고 브라우저 크기 조정을 지원하세요. 일반적인 노트북에서 부드러운 성능을 목표로 하고 픽셀 밀도를 합리적으로 제한하세요.
마무리하기 전에 다음을 확인하세요:
정확히 다섯 개의 구체가 보이고 올바르게 매달려 있는지.
전체 프레임과 최대 스윙이 정사각형 구도 안에 들어오는지.
1볼 모드가 각 충격마다 대략 하나의 공을 전달하는지.
2볼 모드가 각 충격마다 대략 두 개의 공을 전달하는지.
일시정지, 리셋, 슬로 모션, 드래그가 작동하는지.
크롬 반사가 운동 내내 읽을 수 있게 유지되는지.
장면이 즉시 나타나고 런타임 오류가 발생하지 않는지.
완전하게 작동하는 HTML을 반환하세요.
