I want this to be an inverse kinematic arm with 3 joints and a rotating base. the base should rotate left and right and the arm should follow the mouse up and down. There should be 2 joints for the arm and one wrist. ehre si the code it doesnt work it only makes the base everything else is broken: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robotics Portfolio</title>
    <style>
        body {
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Set up the scene, camera, and renderer
        let scene = new THREE.Scene();
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 10;
        camera.position.y = 5;
        let renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('canvas'),
            antialias: true
        });

        // Set up the arm
        let arm = new THREE.Group();
        arm.position.z = 0;
        arm.position.y = 0;
        scene.add(arm);

        // Create the base
        let baseGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
        let baseMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
        let base = new THREE.Mesh(baseGeometry, baseMaterial);
        arm.add(base);

        // Create the first joint
        let joint1Geometry = new THREE.CylinderGeometry(0.5, 0.5, 4, 32);
        let joint1Material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
        let joint1 = new THREE.Mesh(joint1Geometry, joint1Material);
        joint1.position.y = 2;
        arm.add(joint1);

        // Create the second joint
        let joint2Geometry = new THREE.CylinderGeometry(0.3, 0.3, 4, 32);
        let joint2Material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
        let joint2 = new THREE.Mesh(joint2Geometry, joint2Material);
        joint2.position.y = 4;
        joint1.add(joint2);

        // Create the third joint
        let joint3Geometry = new THREE.CylinderGeometry(0.2, 0.2, 4, 32);
        let joint3Material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
        let joint3 = new THREE.Mesh(joint3Geometry, joint3Material);
        joint3.position.y = 4;
        joint2.add(joint3);

        // Create the hand
        let handGeometry = new THREE.SphereGeometry(0.2, 32, 32);
        let handMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
        let hand = new THREE.Mesh(handGeometry, handMaterial);
        hand.position.y = 4;
        joint3.add(hand);

        // Add some lights to the scene
        let ambientLight = new THREE.AmbientLight(0x444444);
        scene.add(ambientLight);

        let pointLight = new THREE.PointLight(0xffffff, 1, 100);
        pointLight.position.set(0, 5, 5);
        scene.add(pointLight);

        let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(0, 10, 10);
        scene.add(directionalLight);

        // Inverse kinematics function
        function inverseKinematics(targetPosition) {
            // Calculate the length of the arm
            let armLength = 4 + 4 + 4 + 4;

            // Calculate the distance from the base of the arm to the target position
            let distanceToTarget = targetPosition.distanceTo(base.position);

            // Calculate the angle of the first joint
            let joint1Angle = Math.acos((distanceToTarget * distanceToTarget - armLength * armLength) / (2 * armLength * 4));
            joint1.rotation.x = joint1Angle;

            // Calculate the angle of the second joint
            let joint2Angle = Math.asin((targetPosition.y - joint1.position.y) / distanceToTarget);
            joint2.rotation.x = joint2Angle;

            // Calculate the angle of the third joint
            let joint3Angle = Math.asin((targetPosition.y - joint2.position.y) / distanceToTarget);
            joint3.rotation.x = joint3Angle;

            // Update the position of the hand
            hand.position.copy(targetPosition);
        }

        // Animate the arm
        function animate() {
            requestAnimationFrame(animate);
            let mousePosition = new THREE.Vector2();
            mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1;
            mousePosition.y = -(event.clientY / window.innerHeight) * 2 + 1;
            let mousePosition3D = new THREE.Vector3(mousePosition.x, mousePosition.y, 0);
            arm.rotation.y = mousePosition.x * Math.PI / 2;
            inverseKinematics(mousePosition3D);
            renderer.render(scene, camera);
        }

        // Add event listener for mouse movement
        document.addEventListener('mousemove', function(event) {
            animate();
        });

        // Start the animation
        animate();
    </script>
</body>
</html>