import Alpine from 'alpinejs';
import DaisyUI from 'daisyui';
import Tailwind from 'tailwindcss/dist/forms';
import * as Three from 'three';

DaisyUI.use(Alpine);
Tailwind.use('typography');

Alpine.data({
 open: false,
 toggle() {
    this.open = !this.open;
 }
});

// Welcome animation
const camera = new Three.PerspectiveCamera(75, showcase.width / showcase.height, 0.1, 1000);
camera.position.set(0, 20, 7);
const scene = new Three.Scene();
const background = new Three.TextureLoader.load('https://source.unsplash.com/random');
scene.background = background;
background.minFilter = Three.LinearFilter;
const light = new Three.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, 10);
scene.add(light);

const renderer = new Three.WebGLRenderer({ canvas: showcase });
renderer.setSize(showcase.getBoundingClientRect().width, showcase.getBoundingClientRect().height);
renderer.setClearColor(0xdddddd, 1.0);

const geometry = new Three.IcosahedronGeometry(1.5);
const material = new Three.MeshPhongMaterial({ color: 0x1E90FF, flatShading: true });
const mesh = new Three.Mesh(geometry, material);

function animate() {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
 mesh.rotation.x += 0.01;
 mesh.rotation.y += 0.02;
 mesh.rotation.z += 0.03;
}
animate();

// Add animation
const showcase = document.getElementById('showcase');
const renderer = new Three.WebGLRenderer({ canvas: showcase });
const camera = new Three.PerspectiveCamera(75, showcase.width / showcase.height, 0.1, 1000);
camera.position.set(0, 20, 7);
const scene = new Three.Scene();

const geometry = new Three.BoxGeometry(3, 3, 3);
const material = new Three.MeshPhongMaterial({ color: 0x1E90FF, flatShading: true });
const cube = new Three.Mesh(geometry, material);
cube.position.set(0, 1.5, 0);
scene.add(cube);

const animate = () => {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
 cube.rotation.x += 0.01;
 cube.rotation.y += 0.02;
 cube.rotation.z += 0.03;
};
animate();