import * as THREE from "https://esm.sh/three";
function render({ model, el }) {
// 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 };