OrbitControls in ThreeJS not working with import map – Blancer.com Tutorials and projects

I’m trying to get a simple ThreeJs with OrbitControls for pan and zoom. I was able to get a working example with an older version (128), but I’m having trouble with the newer r168.

In the example, I’m trying to write the js code directly into an html page, and importing the threejs dependencies using cdn, instead of a local source.

<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js",
                "three/examples/jsm/controls/OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        
        // Renderer setup
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000); // Set background color to black
        document.body.appendChild(renderer.domElement);

        // Create a cube
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Position the camera
        camera.position.z = 5;

        // OrbitControls setup
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true; // Enable smooth damping
        controls.dampingFactor = 0.25; // Adjust the damping factor for smoothness
        controls.enableZoom = true;    // Enable zoom
        controls.enablePan = true;     // Enable panning

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update(); // Required if damping is enabled
            renderer.render(scene, camera);
        }
        animate();

        // Adjust canvas on window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>

The code seems to get an error right at the start, in the import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';.

Any help on what might be going on and how to fix this?