3D签到墙 threejs（使用元素周期表修改）

这是一个来自`chatgpt`的方案，我修改了并测试可行

let isAnimating = false; // 用于标记是否正在渲染场景

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
    // 如果当前正在渲染场景，则不执行任何操作
    if (isAnimating) {
        return;
    }

    isAnimating = true; // 标记为正在渲染场景

    const intervalId = setInterval(function() {
        // 让场景通过y轴旋转
        scene.rotation.y += 0.008;

        render();
    }, 16.7); // 每秒渲染60帧，即每帧间隔16.7毫秒

    // 在按钮上添加一个标记，以便在下次点击时停止渲染
    myButton.dataset.intervalId = intervalId;
});

// 在按钮上添加一个“停止”事件处理程序，以便在点击时停止渲染
const mouseup = document.getElementById('mouseup');
mouseup.addEventListener('mouseup', function() {
    console.log(1111111)
    const intervalId = myButton.dataset.intervalId;
    if (intervalId) {
        clearInterval(intervalId);
        isAnimating = false; // 标记为停止渲染场景
        myButton.dataset.intervalId;
    }
});

//一直在执行
function animate() {
    // 让场景通过x轴或者y轴旋转  & z
    // scene.rotation.x += 0.011;
    scene.rotation.y += 0.008;
requestAnimationFrame( animate );
TWEEN.update();
controls.update();//这个控制了鼠标滑动 旋转动画
    // 渲染循环
    render();
    stats.update();
}

就旋转不生效

新版的Dreamweaver打开按f12自动部署，或者用vs code打开文件夹