threejs api

// threejs api 示例代码

// 引入 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：使用 import 语句引入 Three.js 库。
2. 创建场景：THREE.Scene() 创建一个场景对象，用于容纳所有物体。
3. 创建相机：THREE.PerspectiveCamera() 创建一个透视投影相机，并设置其位置。
4. 创建渲染器：THREE.WebGLRenderer() 创建一个 WebGL 渲染器，并将其添加到页面中。
5. 创建几何体和材质：使用 THREE.BoxGeometry() 创建一个立方体几何体，THREE.MeshBasicMaterial() 创建一个基础材质，并将它们组合成一个网格对象。
6. 添加网格对象到场景：使用 scene.add() 方法将网格对象添加到场景中。
7. 渲染函数：定义 animate() 函数，使用 requestAnimationFrame() 实现动画循环，每次帧更新时旋转立方体并调用 renderer.render() 渲染场景。