<script type="module">
	/* 十二面缓冲几何体 DodecahedronGeometry */
	import * as THREE from 'https://esm.sh/three'; // three主库
	import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库

	const scene = new THREE.Scene; // 场景
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
	camera.position.set(0, 0, 5); // 相机位置
	const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
	renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
	renderer.setClearColor(0xf6f5f0);
	document.body.appendChild(renderer.domElement); // 渲染器加入到body标签

	const controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
	controller.autoRotate = true; // 开启自动旋转

	// 十二面体几何体
	const geometry = new THREE.DodecahedronGeometry(1.2, 0); // Dradius : Float, detail : Integer
	// 材质
	const material = new THREE.MeshNormalMaterial();
	const dode = new THREE.Mesh(geometry, material); // 十二面体网格对象
	scene.add(dode); // 网格对象加入到场景

	//renderer.render(scene, camera); // 至此已经可以将静态效果渲染出来

	// 动画函数
	const animate = () => {
		requestAnimationFrame(animate); // 请求关键帧动画递归调用函数自身
		dode.rotation.x += 0.001;
		dode.rotation.y += 0.001;
		controller.update(); // 更新轨道控制器令其自转
		renderer.render(scene, camera); // 渲染效果
	};

	animate(); // 运行动画
	window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 适应窗口
</script>