Spaces:
Running
Running
File size: 1,582 Bytes
e1cf593 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// Import AlpineJS and DaisyUI
import alpine from "alpinejs";
import daisyui from "https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css";
// Import TailwindCSS
import tailwind from "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio";
// Import Three.js
import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js";
// Initialize AlpineJS and DaisyUI
alpine.default();
daisyui.default();
// Initialize TailwindCSS
tailwind.default();
document.addEventListener("alpine:initialized", () => {
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Create a renderer
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("3dModel"),
});
// Set renderer size
renderer.setSize(window.innerWidth, window.innerHeight);
// Add a cube to the scene
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
// Add a camera to the scene
scene.add(camera);
// Add directional light to the scene
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 0, 1).normalize();
scene.add(directionalLight);
// Show the scene
renderer.render(scene, camera);
// Animate the scene
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
}); |