<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1464843172" autoplay loop controls></audio>

<script type="module">

import * as THREE from 'https://esm.sh/three';
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls";

let rotRaf, isPaused = true;

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

const geometry = new THREE.SphereGeometry(2, 32, 32, 0, 2 * Math.PI, 0, 2 * Math.PI);
for (let i = 0; i <= 8; i++) {
	const material = new THREE.MeshNormalMaterial({
		transparent: true,
		opacity: 0.6,
		side: THREE.DoubleSide
	});
	const ball = new THREE.Mesh(geometry, material);
	const radian = (360 / 8) * (Math.PI / 180);
	if (i < 8) ball.position.set(8 * Math.sin(radian * i), 8 * Math.cos(radian * i), 0);
	scene.add(ball);
}

const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = true;
controls.maxPolarAngle = 1.5;
controls.minPolarAngle = 0.0;
controls.autoRotate = true;
controls.dampingFactor = 0.5;

isPaused = aud.paused;

const mState = () => {
	isPaused = aud.paused;
	aud.paused ? cancelAnimationFrame(rotRaf) : rotating();
};

const rotating = () => {
	if (isPaused ) return;
	controls.update();
	renderer.render(scene, camera);
	rotRaf = requestAnimationFrame(rotating);
};

aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(rotRaf);

rotating();

</script>

<style>
	body { margin: 0; }
	audio { position: absolute; bottom: 20px; right: 20px; }
</style>