{"id":49151695,"url":"https://github.com/badgerloop-software/car-visualizer","last_synced_at":"2026-04-22T06:11:38.524Z","repository":{"id":329547865,"uuid":"1119978987","full_name":"badgerloop-software/car-visualizer","owner":"badgerloop-software","description":"A small demo that shows a 3D car viewer using three.js and a GLTF model (Ferrari F40).","archived":false,"fork":false,"pushed_at":"2026-03-30T22:52:19.000Z","size":9374,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-31T00:32:45.682Z","etag":null,"topics":["javascript","threejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/badgerloop-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-20T08:20:40.000Z","updated_at":"2026-03-30T22:52:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/badgerloop-software/car-visualizer","commit_stats":null,"previous_names":["badgerloop-software/car-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/badgerloop-software/car-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badgerloop-software%2Fcar-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badgerloop-software%2Fcar-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badgerloop-software%2Fcar-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badgerloop-software%2Fcar-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/badgerloop-software","download_url":"https://codeload.github.com/badgerloop-software/car-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badgerloop-software%2Fcar-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32123674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T00:31:26.853Z","status":"online","status_checked_at":"2026-04-22T02:00:05.693Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","threejs"],"created_at":"2026-04-22T06:11:37.974Z","updated_at":"2026-04-22T06:11:38.515Z","avatar_url":"https://github.com/badgerloop-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# car-visualizer\n\nA small demo that shows a 3D car viewer using three.js and a GLTF model (Ferrari F40).\n\n## Screenshots\n\n### Home (Showroom) Mode\n\u003cimg src=\"images/park-mode.png\" alt=\"Showroom Mode\" width=\"50%\"\u003e\n\n*The car is displayed in a dark showroom with dramatic spotlights, parking brake engaged*\n\n### Drive Mode - Day\n\u003cimg src=\"images/drive-mode-day.png\" alt=\"Drive Mode - Day\" width=\"50%\"\u003e\n\n*Driving simulation with bright blue sky, animated road, and lane markings*\n\n### Drive Mode - Night\n\u003cimg src=\"images/drive-mode-night.png\" alt=\"Drive Mode - Night\" width=\"50%\"\u003e\n\n*Night driving with dark sky and ambient lighting*\n\nView online\n\n- The demo is automatically deployed to GitHub Pages:\n  - https://badgerloop-software.github.io/car-visualizer/\n- Changes pushed/merged to the repository's main branch will be picked up by GitHub Pages (depending on the repo's pages settings) and appear online after the site build completes.\n\nRun locally\n\n- Serve the folder (from project root):\n  - python3 -m http.server 8000\n- Open http://127.0.0.1:8000/index.html in your browser.\n- Note: the GLTF loader requires the files to be served over HTTP (don't open index.html with file://).\n\nUser controls \u0026 UI\n\n- I — Toggle the Camera Info panel. Press once to open or close (works reliably regardless of element focus; click the viewer canvas if key events don't register).\n- H — Jump to the saved \"Home\" preset (if present).\n- C — Copy the current camera state to the clipboard (same as the \"Copy\" button in the panel).\n- Mouse controls (OrbitControls):\n  - Left-drag: rotate\n  - Middle/Alt+drag: pan\n  - Wheel: zoom\n- After you stop interacting for ~1 second the camera will revert automatically to the current mode's preset (Home or Drive).\n- The camera is clamped so you can't look under the floor plane (prevents pitching below ground).\n\nCamera Info panel (press 'I')\n\n- Shows:\n  - Pos: camera position (x,y,z)\n  - Target: orbit target (x,y,z)\n  - Distance: distance from camera to target\n  - Azimuth \u0026 Polar angles in degrees\n  - **Speed Simulation**: Interactive slider (0-75 mph) to control animation speed in Drive mode\n- Buttons:\n  - Copy — copies camera state JSON to clipboard (position, target, distance, azimuthDeg, polarDeg)\n  - Day Mode / Night Mode — toggles between day (bright blue sky) and night (dark sky) lighting\n  - Sim Brake Enable/Release — toggles between Home and Drive camera views\n- Default presets:\n  - Home: `[-4.358857444267401, 1.5797084394163963, 3.222751650234066]`\n  - Drive: `[0.12909591647276278, 2.215759854813773, -5.849405778042717]`\n- Presets are stored in localStorage under the key: `cameraPresets` (the old `cameraHome` is migrated automatically if present).\n\nPark brake simulation \u0026 signals\n\n- There is a simulated brake button in the panel (label toggles between \"Sim Brake Release\" and \"Sim Brake Enable\").\n- The viewer tracks a `park_brake` boolean state: 1 = engaged (Home), 0 = released (Drive).\n- Edge behavior:\n  - 1 -\u003e 0 (released) triggers transition to the Drive preset (if present).\n  - 0 -\u003e 1 (engaged) triggers transition to the Home preset (if present).\n- **Speed Control**: \n  - In Drive mode, the animation speed is controlled by the current speed setting (0-75 mph).\n  - Speed can be set via the slider in the Camera Info panel, or programmatically via the API.\n  - Speeds above 75 mph are automatically clamped to 75 mph for animation purposes.\n  - At 0 mph, the road/environment animation stops (but wheels still rotate slowly).\n  - At 50 mph, the animation runs at base speed.\n  - At 75 mph, the animation runs at 1.5x base speed.\n  - Wheel rotation speed scales proportionally with the set speed.\n- Visual modes:\n  - **Home (Showroom Mode)**: Dark background with spotlights, static environment, car displayed in showroom setting.\n  - **Drive Mode**: Animated road moving toward the car, lane markings and trees moving to create illusion of travel. Animation speed controlled by speed setting.\n    - **Day Mode**: Bright blue sky (#87ceeb), bright ambient lighting (0.6 intensity)\n    - **Night Mode**: Dark night sky (#0a0a2e), dim ambient lighting (0.3 intensity)\n\nIntegration API (for parent application)\n\n- window.cameraAPI\n  - setPreset(name, data?) — Save a preset. `data` is optional; when omitted the current view is saved. `data` expects { position: [x,y,z], target: [x,y,z] }.\n  - getPreset(name) — Get saved preset object or null.\n  - listPresets() — Returns array of preset names.\n  - goToPreset(name, duration?) — Smoothly move to the preset (duration in ms).\n  - animateTo(targetPosition, targetTarget, duration) — Animate to given THREE.Vector3 positions.\n  - receiveVehicleSignal(signalName, value) — Forwards signals into the viewer.\n  - setDayMode(isDay) — Set day/night mode. Pass `true` for day, `false` for night.\n  - getDayMode() — Returns current day/night mode state (true = day, false = night).\n  - toggleDayNight() — Toggles between day and night mode, returns new state.\n  - **setSpeed(mph)** — Set the current speed in mph (0-75, clamped at 75). Controls animation speed in Drive mode.\n  - **getSpeed()** — Returns the current speed setting in mph.\n  - **getAnimationSpeed()** — Returns the current animation speed multiplier (calculated from speed).\n\n- Convenience globals:\n  - window.receiveVehicleSignal(signalName, value)\n    - e.g. window.receiveVehicleSignal('park_brake', 0) — triggers the park_brake handling.\n    - e.g. window.receiveVehicleSignal('speed', 65) — sets speed to 65 mph.\n    - Signal names containing 'speed' or 'velocity' are treated as speed signals (in mph).\n  - window.setParkingBrakeState(value)\n    - e.g. window.setParkingBrakeState(1)\n  - **window.setCarSpeed(mph)**\n    - e.g. window.setCarSpeed(55) — sets speed to 55 mph (clamped at 75).\n\nImplementation notes\n\n- Built with three.js r128 and uses `OrbitControls` + `GLTFLoader` for the model.\n- **On page load/refresh, the camera ALWAYS starts in Home (showroom) mode** with the default preset position, ensuring a consistent starting view.\n- Presets are stored in localStorage as `{ \u003cname\u003e: { position: [...], target: [...] } }`.\n- The viewer auto-imports an example \"Drive\" preset (from demo data) on first run if no preset exists.\n- Camera is constrained so it cannot go underneath the ground plane and polar angle is limited to prevent under-floor views.\n- When user manipulates the camera, the viewer waits ~1s after interaction stops and then re-applies the current mode preset.\n\nTroubleshooting\n\n- Black screen: check DevTools console for errors and verify `ferrari_f40/scene.gltf` is present. If model fails to load a simple fallback car will be created.\n- Keys not registering: click the render canvas to give it focus, then press keys.\n- Copy to clipboard: uses the modern Clipboard API, with a textarea fallback if necessary.\n\nLicense / Model credit\n\nThis work uses the Ferrari F40 model by Black Snow on Sketchfab, licensed under CC-BY-4.0. See `ferrari_f40/license.txt` for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadgerloop-software%2Fcar-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbadgerloop-software%2Fcar-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadgerloop-software%2Fcar-visualizer/lists"}