Javascript 在Three JS中看不到补间不透明度更改效果

<script type="importmap">
      {
        "imports": {
         "three": "https://unpkg.com/three@v0.162.0/build/three.module.js",
         "three/addons/": "https://unpkg.com/three@v0.162.0/examples/jsm/" 
        }
      }
</script>
<script type="module" style="position: absolute; z-index: 100;">
    import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@23.1.1/dist/tween.esm.js';
    import * as THREE from 'three';

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
     

    var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
        color: "red",
        transparent: true
    }));
    scene.add(cube);


    window.onload=function(){
        var el_my_button = document.getElementById("my_button");

        el_my_button.addEventListener("click", function(event) {
            var tweenoff = new TWEEN.Tween(cube.material).to({
                opacity: 0
            }, 2000).onComplete(function(){
                cube.visible = false;
            });

            console.log( tweenoff );
            tweenoff.start();
        });
    }


    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
</script>
<div id="my_button" style="background: #ccc; width:100; height: 50px; margin-top:50px; position: absolute; z-index: 101;">    
    my_button
</div>

立方体的不透明度没有改变，没有任何错误，但没有任何影响，以及从TWEEN，点击"my_button". 这里有什么问题？我想我错导入了tween.js库，或者这与three.js版本不兼容？但不确定感谢任何帮助.