Hello guys looking for developer

Jobs
1

hello, i’m looking for developer to build project basic on below requirement

contact me pls stanely-ng@wanyuda.com

Project Development Requirements Specification

Project Name Online 3D Configurator

1. Project Background & Objectives

1.1 Background

  • e-commerce platform, we need to replace traditional 2D image galleries with an interactive 3D product preview experience

1.2 Core Objectives

  • User Experience (UX): Achieve smooth rendering at [e.g., 60FPS], supporting interactions such as 360-degree rotation, zooming, and exploded views

  • Business Value: Reduce return rates by [X] and increase average session duration by \[X\].

  • Technical Goals: Based on WebGL technology, achieve cross-platform compatibility (PC/Mobile) with a first contentful paint (FCP) time under seconds.

1.3 User Stories

Role Requirement Description Value
End User As a user, I want to drag and rotate the product with my mouse to inspect details. Enhances immersion
Operations Staff As an operator, I want to replace 3D model files via the backend to update products quickly. Reduces maintenance costs
Developer As a developer, I want the code to be modular to facilitate future VR/AR expansion. Technical scalability

2. Functional Requirements

2.1 Core Feature List

Priority Module Detailed Description Acceptance Criteria
P0 3D Scene Setup Initialize Scene, Camera, Renderer; set background color or environment map. Scene renders correctly without black screens; aspect ratio is normal.
P0 Model Loading Support loading .glb/.gltf formats using the DRACO compression algorithm. Model displays completely; materials are not missing.
P0 Interaction Controls Integrate OrbitControls; support rotation, panning, and zooming. Smooth operation on both mobile and PC without lag.
P1 Lighting System Configure Ambient Light, Directional Light, and enable shadow rendering. Shadows are clear; no abnormal black artifacts.
P1 Hotspot Interaction Clicking specific parts of the model triggers HTML labels or UI information. Raycasting is accurate; UI follows 3D coordinates.
P2 Animation System Model entrance animations, material switching animations (using Tween.js). Animations transition smoothly without jumping.

2.2 Business Flow

  1. Resource Loading Phase: User enters page → Loading progress bar → Load models/textures → Parsing complete.

  2. Rendering Phase: Initialize Three.js core components → Create render loop → Respond to window resize.

  3. Interaction Phase: User action (click/drag) → Raycasting → Trigger logic → Update view.

3. Technical Architecture & Standards

3.1 Tech Stack Selection

  • Core Library: Three.js (Version r16x or latest stable)

  • Framework: [Vue 3 / React / Vanilla JS]

  • Build Tool: Vite (Recommended) or Webpack

  • Language: TypeScript (Highly Recommended) or JavaScript (ES6+)

  • Auxiliary Libraries:

    • @tweenjs/tween.js: For tweening animations.

    • lil-gui / dat.gui: For development debugging panels.

    • stats.js: For performance monitoring.

    • cannon-es / rapier: (Optional) If physics collisions are required.

3.2 Directory Structure Standards

text

project-root/
├── public/
│   ├── models/       # Store .glb, .gltf model files
│   └── textures/     # Store .jpg, .png texture maps
├── src/
│   ├── components/   # UI Components (React/Vue)
│   ├── core/         # Three.js core encapsulation (Scene, Camera, Renderer)
│   ├── objects/      # 3D Object classes (Product, Floor, Lights)
│   ├── utils/        # Utility functions (Loaders, Raycasting, Responsive)
│   └── main.ts       # Entry file
└── index.html

3.3 Asset Standards

  • Model Format: Uniformly use .glb or .gltf; Draco compression is mandatory.

  • Polygon Count: Single model polygon count should not exceed triangles.

  • Texture Size: Recommended max 2048x2048; mobile recommended 1024x1024.

4. Non-Functional Requirements

4.1 Performance Metrics

  • Frame Rate: Stable 60FPS on PC, no lower than 30FPS on mobile.

  • Loading Speed: First screen render time < [2] seconds; Total asset size < [5] MB.

  • Memory Usage: No continuous memory leaks during idle time; manually dispose of Geometry and Material when destroying components.

4.2 Compatibility

  • Browsers: Chrome (Latest), Safari (iOS 15+), Edge, Firefox.

  • Devices: Adapt to mainstream resolutions; support Retina displays (renderer.setPixelRatio).

4.3 Accessibility

  • Add aria-label descriptions to the Canvas container.

  • Support keyboard controls (e.g., arrow keys for rotation).

5. Boundaries & Exclusions

  • Out of Scope: VR/AR mode is not supported in this phase (planned for Phase 2).

  • Out of Scope: Complex physics engines (e.g., rigid body collisions) are not integrated; visual display only.

  • Out of Scope: No support for IE11 or legacy browsers.

6. Development Milestones

Phase Task Content Est. Time Deliverables
P1 Environment Setup & Basic Scene 2 Days Basic geometry displays correctly
P2 Model Loading & Material Debugging 3 Days Model displays correctly; lighting is normal
P3 Interaction Logic Development 3 Days Dragging and hotspot clicking supported
P4 Performance Optimization & Adaptation 2 Days Passes Lighthouse performance audit
2

Hi @stanley

I’m a full-stack developer with strong experience in Three.js and interactive 3D web applications, and I can build your Online 3D Configurator with smooth performance and clean architecture.

I can deliver:
• Fast and optimized 3D rendering (targeting 60FPS)
• GLB/GLTF model loading with DRACO compression
• Smooth interactions (rotate, zoom, pan) on both desktop and mobile
• Hotspot system with precise raycasting and UI integration
• Modular, scalable code structure (ready for future AR/VR expansion)
• Performance-focused setup (low load time, optimized assets)

I typically use Three.js + TypeScript + Vite, and I focus on clean, maintainable code and real-world performance optimization.

I’ve worked on similar 3D interactive experiences, including product viewers and multiplayer 3D environments.

Let’s discuss your product and timeline — I can start right away.

Thanks.

3

Hi @stanley,

I’m a full-stack developer experienced with Three.js, and I can build your Online 3D Configurator with smooth performance and clean architecture.

I can deliver:
• Optimized 3D rendering (60 FPS target)
• GLB/GLTF loading with Draco compression
• Smooth interactions (rotate, zoom, pan) on all devices
• Hotspots with accurate raycasting
• Modular, scalable codebase

I use Vite + TypeScript and focus on performance (low load time, optimized assets).

Happy to discuss further — I can start right away.

Thanks.

5

I build interactive 3D web applications and product viewers using Three.js and WebGL. The requirements you described for the online 3D configurator are very close to the type of systems I work on.

I can implement GLB/GLTF model loading with Draco compression, a clean scene setup with camera and renderer management, and smooth interactions such as rotation, zoom, and pan across desktop and mobile. Hotspots using raycasting and UI overlays can also be integrated so users can click parts of the product to view information.

Performance optimization is usually a major focus in these projects, including asset compression, efficient texture sizes, proper disposal of geometries and materials, and maintaining stable rendering performance.

Example of a real time 3D environment and viewer
https://theneoverse.web.app/#threeviewer&&crateria

Portfolio and services
https://theneoverse.web.app/#services

Open to discussing the architecture, asset pipeline, and how the configurator can stay modular for future features.