Py.Cafe

import * as THREE from "https://esm.sh/three";


function render({ model, el }) {

  let btn = document.createElement("button");
  btn.innerHTML = model.get("my_message");
  btn.style.background = "orange";
  btn.style.borderRadius = "10px";
  btn.style.color = "white";
  btn.style.fontFamily = '"Roboto", sans-serif';
  btn.style.fontSize = "2em";
  btn.style.margin = "10px";
  btn.style.padding = "10px 20px";
  el.appendChild(btn);

  // Create the container for the 3D scene
  let container = document.createElement("div");
  container.style.height = "400px";
  container.style.width = "400px";
  el.appendChild(container);

  // Set up the 3D scene
  const scene = new THREE.Scene();
  scene.background = new THREE.Color("white");
  const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
  camera.position.z = 2;
  camera.position.y = 1;  
  camera.lookAt(0, 0, 0);  

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  container.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: "orange" });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

  animate();
}

export default { render };