ShopIn3D

ShopIn3D is a scaffold for a self-hosted 3D storefront. It provides a virtual room where 3D models can be explored and linked to products sold on external marketplaces.

Features

• 3D scene built with React and Three.js (@react-three/fiber) including orbit controls and WebXR-based AR mode
• Contextual overlay layer that reveals product info when models are clicked
• Point, click, drag and swipe interactions
• Express-based backend API for managing virtual shop spaces
• Persistent JSON storage for spaces on the backend
• Admin panel for creating, listing and deleting spaces with custom model URLs
• Dropdown selector to switch between available spaces
• Remote sample model (Astronaut.glb) loaded at runtime to avoid bundling large binaries

Project Structure

backend/   Express + TypeScript API server
frontend/  Vite powered React app with Three.js

Development

Install dependencies and start each service:

cd backend
npm install # or npm ci for a clean install
npm run dev

cd ../frontend
npm install # or npm ci
npm run dev

The frontend development server runs on port 3000 and the backend API on port 3001 by default.

Demo

With both servers running, open http://localhost:3000 to explore the demo room. Use the top selector to choose a space, drag to look around, click the model to view product details, and tap the Enter AR button on supported devices to place it in your space. Models and descriptions come from the selected space.

Building for Production

To compile both services and persist created spaces in backend/data/spaces.json:

cd backend
npm run build
npm start & # serves compiled backend

cd ../frontend
npm run build
# resulting files are in frontend/dist

Set VITE_API_URL to point the frontend to your backend when hosting them separately.

3D Performance Notes

• GLTF decoding: The viewer is configured for Draco and Meshopt compressed glTFs and KTX2 textures.
  • Draco decoder is loaded from Google's CDN.
  • Meshopt decoder is bundled via Three.js examples.
  • KTX2 transcoder is fetched from the Three.js CDN and auto-detects GPU support.
• Mobile optimizations:
  • Canvas DPR is clamped and MSAA disabled to reduce fill-rate cost.
  • AdaptiveDpr dynamically lowers DPR under load.
  • Models are loaded via React Suspense with a lightweight loading overlay.

If hosting in an offline environment, consider serving the Draco and Basis/KTX2 decoder assets locally and updating the decoder base URLs accordingly in frontend/src/components/ThreeRoom.tsx.

Testing

Backend unit tests can be executed with:

cd backend
npm test

Next Steps

• Persist spaces and products in a database
• Authentication and role-based editing
• Marketplace integration links
• Enhanced AR-style overlays and user interactions