// Create 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);

// Add a grid helper to the scene
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

// Add orbit controls to the camera
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

// Set the camera position
camera.position.set(0, 5, 5);
camera.lookAt(scene.position);

// Add a cube to the scene
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0.5, 0.5 * cubeGeometry.parameters.height, 0.5);
scene.add(cube);

// Add a container div for the text field and button
const container = document.createElement('div');
container.style.position = 'absolute';
container.style.top = '10px';
container.style.left = '10px';
container.style.zIndex = '1';
container.style.height = '10px';
container.style.display = 'flex';
container.style.justifyContent = 'center';
container.style.alignItems = 'center';
document.body.appendChild(container);

// Add a text area and button to the container
const textArea = document.createElement('textarea');
textArea.id = 'textInput';
textArea.placeholder = 'Enter turtle commands';
textArea.style.marginRight = '1rem';
container.appendChild(textArea);

const activateButton = document.createElement('button');
activateButton.textContent = 'Activate';
activateButton.id = 'activateButton';
container.appendChild(activateButton);

// Adjust the renderer's canvas style to fix the position
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0';
renderer.domElement.style.left = '0';
renderer.domElement.style.zIndex = '0';
document.body.appendChild(renderer.domElement);

// Helper function to create a text label
function createTextLabel(text) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = '24px Arial';
    context.fillStyle = 'rgba(255, 255, 255, 1)';
    context.fillText(text, 0, 24);

    const texture = new THREE.CanvasTexture(canvas);
    const material = new THREE.SpriteMaterial({ map: texture });
    const sprite = new THREE.Sprite(material);
    sprite.scale.set(0.3 * canvas.width, 0.3 * canvas.height, 1); // increase scale

    return sprite;
}

// Parse turtle commands and move the cube
function executeCommands(parsedCommands, index) {
    if (index >= parsedCommands.length) {
        return;
    }

    const command = parsedCommands[index].trim();
    let startPosition, endPosition, startTime, currentPosition;
    const duration = 500; // duration of each movement in milliseconds
    let movementVector = new THREE.Vector3();

    if (command.startsWith('print(') && command.endsWith(')')) {
        const text = command.substring(6, command.length - 1);

        const textLabel = createTextLabel(text);
        textLabel.position.set(cube.position.x, cube.position.y + 1.5, cube.position.z); // update position
        scene.add(textLabel);

        setTimeout(() => {
            scene.remove(textLabel);
            executeCommands(parsedCommands, index + 1);
        }, 2000);


    } else if (command.startsWith('setColor(') && command.endsWith(')')) {
        const color = command.substring(9, command.length - 1);
        cube.material.color.set(color);
        executeCommands(parsedCommands, index + 1);
    } else if (command.startsWith('setScale(') && command.endsWith(')')) {
        const scale = parseFloat(command.substring(9, command.length - 1));
        cube.scale.set(scale, scale, scale);
        executeCommands(parsedCommands, index + 1);
    } else if (command === 'reset') {
        cube.position.set(0.5, 0.5 * cubeGeometry.parameters.height, 0.5);
        cube.rotation.set(0, 0, 0);
        cube.material.color.set(0xff0000);
        cube.scale.set(1, 1, 1);
        executeCommands(parsedCommands, index + 1);
    } else {
        switch (command) {
            case 'forward':
                movementVector.set(0, 0, -1);
                break;
            case 'back':
                movementVector.set(0, 0, 1);
                break;
            case 'left':
                movementVector.set(-1, 0, 0);
                break;
            case 'right':
                movementVector.set(1, 0, 0);
                break;
            case 'up':
                startPosition = cube.position.y;
                endPosition = startPosition + 1;
                break;
            case 'down':
                startPosition = cube.position.y;
                endPosition = startPosition - 1;
                break;
            case 'turnRight':
            case 'turnLeft':
                startPosition = cube.rotation.y;
                endPosition = startPosition + (command === 'turnRight' ? -1 : 1) * Math.PI / 2;
                startTime = performance.now();
                currentPosition = cube.rotation.y;

                const updateRotation = () => {
                    const elapsedTime = performance.now() - startTime;
                    const progress = Math.min(elapsedTime / duration, 1);

                    cube.rotation.y = startPosition + progress * (endPosition - startPosition);

                    if (progress < 1) {
                        requestAnimationFrame(updateRotation);
                    } else {
                        setTimeout(() => executeCommands(parsedCommands, index + 1), duration);
                    }
                };

                requestAnimationFrame(updateRotation);
                return;
            default:
                const textLabel = createTextLabel("Unknown command: ${command}");
                textLabel.position.set(cube.position.x, cube.position.y + 1, cube.position.z);
                scene.add(textLabel);

                setTimeout(() => {
                    scene.remove(textLabel);
                    executeCommands(parsedCommands, index + 1);
                }, 2000);
                //console.log(`Unknown command: ${command}`);
        }

        if (movementVector.length() > 0) {
            movementVector.applyQuaternion(cube.quaternion);
            startPosition = cube.position.clone();
            endPosition = startPosition.clone().add(movementVector);
            startTime = performance.now();
            currentPosition = cube.position.clone();

            const updatePosition = () => {
                const elapsedTime = performance.now() - startTime;
                const progress = Math.min(elapsedTime / duration, 1);

                cube.position.lerpVectors(startPosition, endPosition, progress);

                if (progress < 1) {
                    requestAnimationFrame(updatePosition);
                } else {
                    setTimeout(() => executeCommands(parsedCommands, index + 1), duration);
                }
            };

            requestAnimationFrame(updatePosition);
        } else {
            executeCommands(parsedCommands, index + 1);
        }
    }
}

function parseTurtleCommands(commands) {
    console.log('Parsing commands:', commands);
    const parsedCommands = commands.split('\n');
    executeCommands(parsedCommands, 0);
}

// Add event listener to activate button
activateButton.addEventListener('click', () => {
    console.log('Button clicked');
    const textInput = document.getElementById('textInput');
    const text = textInput.value;
    parseTurtleCommands(text);
    textInput.value = '';
});

// Render the scene
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
}
animate();

With this code, how do I add