import * as THREE from "https://cdn.skypack.dev/three@0.118.3"

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a material for the teapot
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });

// Create the teapot body
const bodyGeometry = new THREE.SphereGeometry(1, 32, 16);
const bodyMesh = new THREE.Mesh(bodyGeometry, material);
scene.add(bodyMesh);

// Create the lid
const lidGeometry = new THREE.SphereGeometry(0.5, 32, 16);
const lidMesh = new THREE.Mesh(lidGeometry, material);
lidMesh.position.set(0, 0.5, 0);
bodyMesh.add(lidMesh);

// Create the handle
const handleGeometry = new THREE.TorusGeometry(0.2, 0.05, 32, 32);
const handleMesh = new THREE.Mesh(handleGeometry, material);
handleMesh.rotateZ(Math.PI / 2);
handleMesh.position.set(0, 0.2, 0.7);
bodyMesh.add(handleMesh);

// Create the spout
const spoutShape = new THREE.Shape();
spoutShape.moveTo(0.2, 0);
spoutShape.quadraticCurveTo(0.2, 0.2, 0, 0.2);
spoutShape.quadraticCurveTo(-0.2, 0.2, -0.2, 0);
spoutShape.quadraticCurveTo(-0.2, -0.2, 0, -0.2);
spoutShape.quadraticCurveTo(0.2, -0.2, 0.2, 0);

const extrudeSettings = {
  steps: 2,
  depth: 0.2,
  bevelEnabled: false,
};

const spoutGeometry = new THREE.ExtrudeGeometry(spoutShape, extrudeSettings);
const spoutMesh = new THREE.Mesh(spoutGeometry, material);
spoutMesh.rotateX(Math.PI / 2);
spoutMesh.position.set(0.7, 0, 0);
bodyMesh.add(spoutMesh);

// Position the camera so we can see the entire teapot
camera.position.z = 3;

// Add animation loop
function animate() {
  requestAnimationFrame(animate);

  // Rotate the teapot and spout meshes
  bodyMesh.rotation.y += 0.01;
  spoutMesh.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();