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 idcontainer
where the 3D scene will be rendered.
- Includes the Three.js library and its
-
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