import * as THREE from 'https://cdn.skypack.dev/three@0.128.0';
export function create3DEmoji(emoji, width, height) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
if (!context) {
console.error('Failed to get 2D context for the canvas');
return;
}
canvas.width = 512;
canvas.height = 512;
context.font = '400px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText(emoji, canvas.width / 2, canvas.height / 2);
const texture = new THREE.CanvasTexture(canvas);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(width, height);
const emojiContainer = document.getElementById('3d-emoji');
if (!emojiContainer) {
console.error('Failed to find the element with id "3d-emoji"');
return;
}
emojiContainer.appendChild(renderer.domElement);
const aspectRatio = width / height;
const planeWidth = 4;
const planeHeight = planeWidth / aspectRatio;
const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
const cameraDistance = 3;
camera.position.z = cameraDistance;
let direction = 1;
let rotationSpeed = 0.01;
let maxRotation = Math.PI / 8;
function animate() {
requestAnimationFrame(animate);
plane.rotation.y += rotationSpeed * direction;
if (plane.rotation.y >= maxRotation || plane.rotation.y <= -maxRotation) {
direction *= -1;
}
renderer.render(scene, camera);
}
animate();
}