// Three.js setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('cubeContainer').appendChild(renderer.domElement);
// Create a large cube
const geometry = new THREE.BoxGeometry(3, 3, 3); // Increased size
// Create materials for the cube faces
const materials = [
new THREE.MeshStandardMaterial({ color: 0x000000 }), // Black for the front
new THREE.MeshStandardMaterial({ color: 0x000000 }), // Black for the back
new THREE.MeshStandardMaterial({ color: 0x000000 }), // Black for the top
new THREE.MeshStandardMaterial({ color: 0x000000 }), // Black for the bottom
new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }), // Sheer white for the left
new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }) // Sheer white for the right
];
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
// Add ambient light and a directional light for better visual effects
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // Light source
scene.add(ambientLight);
scene.add(directionalLight);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// Click event to redirect to the index page
document.getElementById('cubeContainer').addEventListener('click', function() {
window.location.href = 'index'; // Change this to your index page
});