3D Product Website Plan

I want a 3D website to display the products in an organized manner with simple animation and a blue style

That sounds like an exciting project! A 3D website with organized product displays, simple animations, and a blue theme will create a captivating user experience. Have you considered any specific platforms or technologies for building the site? I’d be happy to discuss options or suggest some tools to help bring your vision to life.

I want the full code for the site

Sure, I can help you create a 3D website to display your products with a blue theme and simple animations. Below is the complete code for your website, including HTML, CSS, and JavaScript. We’ll use Three.js, a popular JavaScript library for creating 3D graphics in the browser.

1. Project Structure

your-project/
│
├── index.html
├── styles.css
└── script.js

2. index.html

This is the main HTML file that sets up the structure of your website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Product Showcase</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container"></div>

    <!-- Three.js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- OrbitControls for camera navigation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/controls/OrbitControls.js"></script>
    <!-- Your custom script -->
    <script src="script.js"></script>
</body>
</html>

3. styles.css

This CSS file defines the blue theme and ensures the canvas takes up the full viewport.

body {
    margin: 0;
    overflow: hidden;
    background-color: #0a192f; /* Dark blue background */
}

#container {
    width: 100vw;
    height: 100vh;
    display: block;
}

4. script.js

This JavaScript file sets up the 3D scene, camera, renderer, lighting, and adds products with simple animations.

// Set up scene, camera, and renderer
const scene = new THREE.Scene();

// Camera setup
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
);
camera.position.z = 5;

// Renderer setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

// Add OrbitControls for interactivity
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// Add ambient light
const ambientLight = new THREE.AmbientLight(0x404040, 2); // Soft white light
scene.add(ambientLight);

// Add directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 1).normalize();
scene.add(directionalLight);

// Function to create a product (a simple cube for demonstration)
function createProduct(color, position) {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({ color: color });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(position.x, position.y, position.z);
    scene.add(cube);
    return cube;
}

// Create multiple products with different colors and positions
const products = [];
const colors = [0x1e90ff, 0x00bfff, 0x87cefa, 0x4682b4, 0x5f9ea0];
const spacing = 2;

colors.forEach((color, index) => {
    const position = { 
        x: (index - 2) * spacing, 
        y: 0, 
        z: 0 
    };
    const product = createProduct(color, position);
    products.push(product);
});

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    // Rotate each product for simple animation
    products.forEach(product => {
        product.rotation.x += 0.01;
        product.rotation.y += 0.01;
    });

    controls.update();
    renderer.render(scene, camera);
}

animate();

// Handle window resize
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

5. Explanation

HTML (index.html):
- Includes the Three.js library and its OrbitControls for interactive camera movement.
- Links to the CSS and JavaScript files.
- Contains a div with the id container where the 3D scene will be rendered.
CSS (styles.css):
- Sets a dark blue background to match your blue theme.
- Ensures that the canvas covers the entire viewport without scrollbars.
JavaScript (script.js):
- Initializes the Three.js scene, camera, and renderer.
- Adds ambient and directional lighting to illuminate the products.
- Defines a createProduct function to generate simple cube-shaped products. You can replace these with more complex 3D models as needed.
- Positions multiple products in a row with different shades of blue.
- Adds a simple rotation animation to each product for visual interest.
- Implements responsive design by handling window resize events.

6. Enhancements

To further enhance your 3D website, consider the following:

3D Models: Replace the simple cubes with detailed 3D models of your actual products using formats like GLTF or OBJ.

const loader = new THREE.GLTFLoader();
loader.load('path_to_model.gltf', function(gltf) {
    const model = gltf.scene;
    model.position.set(x, y, z);
    scene.add(model);
}, undefined, function(error) {
    console.error(error);
});

Interactive Animations: Add hover or click interactions to display more information about each product.

// Example: Change color on hover
window.addEventListener('mousemove', onMouseMove, false);

function onMouseMove(event) {
    // Calculate mouse position in normalized device coordinates
    // ( -1 to +1 ) for both components
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );
    
    // Raycaster for detecting intersections
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    
    const intersects = raycaster.intersectObjects(products);
    
    products.forEach(product => {
        product.material.color.set(0x1e90ff); // Reset color
    });
    
    if (intersects.length > 0) {
        intersects[0].object.material.color.set(0xff6347); // Change to tomato color on hover
    }
}

Responsive Design: Optimize the layout for different screen sizes and devices.
Performance Optimization: Ensure that the website loads efficiently, especially if you include high-resolution models or textures.

Feel free to adjust the colors, positions, and animations to better suit your brand and products. Let me know if you need further assistance or specific features!

#chats

AI Generators