LED Fishing Light Manufacturer Site + Interactive 3D Product Showcase
2026
Gansen is a professional LED fishing light manufacturer focused on the R&D and production of high-efficiency LED fishing lights, holding the world’s only successful LED squid-fishing case. Its products combine innovative technology with environmental values, helping fishermen improve efficiency and cut energy use while protecting marine sustainability.
A fishing light is a spec-heavy industrial product — light color (pure white, red-white, green-white, red-green), wattage (700W / 1200W), and housing structure all matter to buyers. The site’s core mission is to let remote buyers understand the product without visiting in person, so we brought the original CAD models onto the web: an interactive 3D viewer built with Three.js that freely rotates, zooms, and toggles wireframe to inspect every structural detail right in the browser.
The frontend is built with Astro 5 SSR and Vue 3 interactive components, backed by a complete CAD → glTF asset pipeline (OpenCascade conversion + Draco compression) that balances model fidelity with load speed. Products, news, and track records are managed in a Laravel + GraphQL + Filament backend, while bilingual SSR targets export-market SEO and overseas buyers.
Three.js renders each fishing-light model live in the browser — mouse rotate, scroll zoom, right-click pan, plus auto-rotate and wireframe toggle — so buyers can inspect every structural detail on the page.
OpenCascade (occt-import-js) reads the original CAD/STEP files, which are converted to glTF, optimized with @gltf-transform, and Draco geometry-compressed to shrink model size for fast web loading.
Browse by light color (pure white, red-white, green-white, red-green) and wattage (700W / 1200W); each product offers a downloadable spec sheet and track-record cases.
The world’s only successful LED squid-fishing case, high conversion efficiency, directional energy savings, IP66 salt-fog resistance, and heavy-metal-free eco credentials, presented as dynamic highlight blocks.
Admin-managed news lets the client publish new products, trade shows, and fishery partnerships at any time.
Astro server-side rendering with i18n outputs complete HTML in both Chinese and English, targeting export-market SEO and overseas buyers.
Products, news, and track records are maintained in the Laravel + Filament admin and fetched live via GraphQL, so the client updates content without engineering involvement.
A "free assessment, professional installation, full warranty" CTA connects to the contact form, funneling vessel-upgrade demand straight into an inquiry.
The showcase uses Three.js for an interactive viewer: after loading each fishing light’s 3D model, OrbitControls provide mouse rotate, scroll zoom, and right-click pan, plus auto-rotate and wireframe toggle. Model loading handles loading / failed / no-model states, so remote buyers can inspect structure in the browser instead of relying on flat photos.
Original design files are usually CAD/STEP and can’t be rendered on the web directly. We use occt-import-js (a WASM port of OpenCascade) to read the CAD geometry, convert it to glTF, then optimize with @gltf-transform and apply draco3dgltf geometry compression — dramatically shrinking model size and speeding first load while preserving fidelity.
The frontend runs on Astro 5 server-side rendering; first-screen content is fetched live from the backend GraphQL API and pre-assembled so crawlers and social previews get complete content. Heavy interactive components like the 3D viewer use Vue 3 Islands with client:visible lazy loading, deferring Three.js’s cost until the user actually needs it.
The product catalog, news, and track records are pulled from the Laravel backend via GraphQL, with requests wrapped by ofetch. The client maintains product specs, 3D models, and news in the Filament admin, and the frontend syncs instantly without engineering.
Design tokens are defined with Tailwind CSS 4 @theme: deep-sea navy as the stage and an LED teal glow as the accent, echoing fishing lights glowing beneath the surface. The 3D viewer, product cards, and technology blocks keep a consistent, legible tech feel on the dark background.
The site is fully bilingual (Chinese / English) via i18n, with both languages rendered as complete SSR output and automatic sitemap and hreflang generation to reach overseas buyers in export fishery markets. Every page ships structured data (JSON-LD) and OG tags to boost search and social visibility.
CONTACT US
Whether it's a manufacturer brand site, an interactive 3D product showcase, or a multilingual export website, we can tailor the right solution for you.
Contact Us
