js three.js

// 引入 Three.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 = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个几何体（立方体）
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画函数
function animate() {
  requestAnimationFrame(animate);

  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景和相机
  renderer.render(scene, camera);
}

// 开始动画
animate();

解释说明：

1. 引入 Three.js 库：使用 ES6 模块语法导入 Three.js 库。
2. 创建场景：THREE.Scene() 创建一个空的 3D 场景。
3. 创建相机：THREE.PerspectiveCamera() 创建一个透视相机，并设置其位置。
4. 创建渲染器：THREE.WebGLRenderer() 创建一个 WebGL 渲染器，并将其大小设置为窗口大小，然后将渲染器添加到 HTML 文档中。
5. 创建几何体：THREE.BoxGeometry() 创建一个立方体几何体，THREE.MeshBasicMaterial() 创建一个基本材质并应用颜色，最后通过 THREE.Mesh() 将几何体和材质组合成一个网格对象并添加到场景中。
6. 动画函数：animate() 函数使用 requestAnimationFrame() 实现平滑动画效果，每帧更新立方体的旋转角度，并调用 renderer.render() 渲染场景。

如果你需要进一步了解或修改代码，请告诉我！