threejs demo

// threejs demo

// 引入Three.js库
import * 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 * from 'three';引入Three.js库。
2. 创建场景：THREE.Scene()创建一个场景对象。
3. 创建相机：THREE.PerspectiveCamera()创建一个透视相机，并设置其位置。
4. 创建渲染器：THREE.WebGLRenderer()创建一个WebGL渲染器，并将其添加到HTML文档中。
5. 创建几何体：使用THREE.BoxGeometry()创建一个立方体几何体，THREE.MeshBasicMaterial()创建材质，最后通过THREE.Mesh()将几何体和材质组合成一个网格对象并添加到场景中。
6. 渲染函数：定义animate()函数，使用requestAnimationFrame()实现动画效果，每帧更新立方体的旋转角度并调用渲染器进行渲染。

希望这个示例代码能帮助你理解如何使用Three.js创建一个简单的3D场景。