WWT Digital - 3D Experience Website

A modern website inspired by WWT Digital's design, featuring a 3D interactive header section built with Three.js.

Features

• 3D Interactive Header: Mouse hover rotates the 3D object
• GLB Model Support: Ready to load your .glb 3D models
• Responsive Design: Works on desktop, tablet, and mobile
• Modern UI: Clean, professional design matching WWT Digital's style
• Smooth Animations: CSS animations and Three.js interactions

How to Load Your GLB File

1. Place your .glb file in the project directory
2. Open the browser console and call:

   loadGLBModel('path/to/your/model.glb')

Or edit script.js and uncomment the last line, replacing the path:

loadGLBModel('path/to/your/model.glb');

3D Interaction Features

• Mouse Hover: Move mouse over the 3D container to rotate the object
• Smooth Animation: Object smoothly follows mouse movement
• Auto Rotation: Gentle continuous rotation when not hovering
• Responsive: 3D container adapts to screen size

File Structure

• index.html - Main HTML structure
• styles.css - All styling and responsive design
• script.js - Three.js setup and 3D interactions
• README.md - This documentation

Dependencies

• Three.js (loaded via CDN)
• GLTFLoader (loaded via CDN)

Browser Support

Works in all modern browsers that support WebGL and Three.js.

Customization

Changing 3D Object Properties

Edit the createPlaceholderObject() function in script.js to modify:

• Object size, color, material
• Initial position and rotation

Adjusting Mouse Sensitivity

Modify these values in the onMouseMove() function:

targetRotation.y = mouse.x * 0.3; // Horizontal sensitivity
targetRotation.x = mouse.y * 0.2; // Vertical sensitivity

Animation Speed

Change the interpolation speed in the animate() function:

currentRotation.x += (targetRotation.x - currentRotation.x) * 0.05; // Smoothness factor

Getting Started

1. Open index.html in a web browser
2. The 3D container will show a placeholder blue cube
3. Hover over the 3D area to see the interaction
4. Replace with your GLB model using the instructions above