Could you implement and improve the following code, make it teal:

/**

• AsciiCube Component
• This component renders an interactive 3D ASCII art cube animation using Three.js.
• It displays Arabic letters representing different subjects on each face of the cube.
• @component */

'use client'

import React, { useRef, useEffect } from 'react' import * as THREE from 'three' import { AsciiEffect } from 'three/examples/jsm/effects/AsciiEffect' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default function AsciiCube() { const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => { if (!containerRef.current) return

// Set up Three.js scene, camera, and renderer
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000)
camera.position.z = 8

const renderer = new THREE.WebGLRenderer()
renderer.setSize(300, 300)

// Create ASCII effect
const effect = new AsciiEffect(renderer, ' .:-+*=%@#', { invert: true, resolution: 0.2 })
effect.setSize(300, 300)
effect.domElement.style.color = '#444'
effect.domElement.style.backgroundColor = 'transparent'

containerRef.current.appendChild(effect.domElement)

// Set up OrbitControls for user interaction
const controls = new OrbitControls(camera, effect.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.05
controls.screenSpacePanning = false
controls.minDistance = 5
controls.maxDistance = 15
controls.maxPolarAngle = Math.PI / 2

// Create cube geometry and materials
const geometry = new THREE.BoxGeometry(4, 4, 4, 32, 32, 32)

// Function to create text textures for cube faces
const createTextTexture = (text: string, color: string) => {
  const canvas = document.createElement('canvas')
  canvas.width = 256
  canvas.height = 256
  const ctx = canvas.getContext('2d')
  if (ctx) {
    ctx.fillStyle = color
    ctx.fillRect(0, 0, 256, 256)
    ctx.font = 'bold 180px Arial'
    ctx.fillStyle = 'white'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(text, 128, 128)
  }
  return new THREE.CanvasTexture(canvas)
}

// Create materials for each face of the cube
const materials = [
  new THREE.MeshStandardMaterial({ map: createTextTexture('ع', '#FF0000'), roughness: 0.5, metalness: 0.5 }), // Arabic letter for Science
  new THREE.MeshStandardMaterial({ map: createTextTexture('ر', '#00FF00'), roughness: 0.5, metalness: 0.5 }), // Arabic letter for Math
  new THREE.MeshStandardMaterial({ map: createTextTexture('ت', '#0000FF'), roughness: 0.5, metalness: 0.5 }), // Arabic letter for History
  new THREE.MeshStandardMaterial({ map: createTextTexture('ل', '#FFFF00'), roughness: 0.5, metalness: 0.5 }), // Arabic letter for Language
  new THREE.MeshStandardMaterial({ map: createTextTexture('ف', '#FF00FF'), roughness: 0.5, metalness: 0.5 }), // Arabic letter for Art
  new THREE.MeshStandardMaterial({ map: createTextTexture('ج', '#00FFFF'), roughness: 0.5, metalness: 0.5 }), // Arabic letter for Geography
]

// Create the cube mesh and add edges
const cube = new THREE.Mesh(geometry, materials)
scene.add(cube)


const edgesGeometry = new THREE.EdgesGeometry(geometry)
const edgesMaterial = new THREE.LineBasicMaterial({ color: 0xFFFFFF, linewidth: 5 })
const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial)
cube.add(edges)

// Set up lighting
const frontLight = new THREE.DirectionalLight(0xFFFFFF, 2)
frontLight.position.set(1, 1, 1)
scene.add(frontLight)

const backLight = new THREE.DirectionalLight(0xCCCCCC, 1.5)
backLight.position.set(-1, -1, -1)
scene.add(backLight)

const topLight = new THREE.PointLight(0xFFFFFF, 1.5)
topLight.position.set(0, 5, 0)
scene.add(topLight)

const bottomLight = new THREE.PointLight(0xFFFFFF, 1)
bottomLight.position.set(0, -5, 0)
scene.add(bottomLight)

const leftLight = new THREE.SpotLight(0xFFFFFF, 1.2)
leftLight.position.set(-5, 0, 0)
leftLight.angle = Math.PI / 4
scene.add(leftLight)

const rightLight = new THREE.SpotLight(0xFFFFFF, 1.2)
rightLight.position.set(5, 0, 0)
rightLight.angle = Math.PI / 4
scene.add(rightLight)

const rimLight1 = new THREE.PointLight(0xFFFFFF, 1)
rimLight1.position.set(3, 3, -3)
scene.add(rimLight1)

const rimLight2 = new THREE.PointLight(0xFFFFFF, 1)
rimLight2.position.set(-3, -3, 3)
scene.add(rimLight2)

const ambientLight = new THREE.AmbientLight(0x404040, 0.5)
scene.add(ambientLight)

cube.rotation.x = Math.PI / 6
cube.rotation.y = Math.PI / 6

let autoRotate = true
const autoRotateSpeed = 0.005

// Animation loop
function animate() {
  requestAnimationFrame(animate)
  
  if (autoRotate) {
    cube.rotation.x += autoRotateSpeed
    cube.rotation.y += autoRotateSpeed
  }
  
  controls.update()
  effect.render(scene, camera)
}
animate()

// Event listeners for user interaction
effect.domElement.addEventListener('mousedown', () => {
  autoRotate = false
})

effect.domElement.addEventListener('mouseup', () => {
  autoRotate = true
})

effect.domElement.addEventListener('touchstart', () => {
  autoRotate = false
})

effect.domElement.addEventListener('touchend', () => {
  autoRotate = true
})

return () => {
  effect.domElement.remove()
  controls.dispose()
}

}, [])

return ( <div ref={containerRef} className="w-[300px] h-[300px] mx-auto mb-4"> <div className="sr-only"> An interactive 3D cube rendered in ASCII characters, representing different educational subjects. Each face shows an Arabic letter symbolizing a subject: ع for Science, ر for Math, ت for History, ل for Language, ف for Art, and ج for Geography. You can drag to rotate the cube. </div> </div> ) }