three.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库：通过import语句引入three.js库，确保可以在代码中使用Three.js提供的类和方法。
2. 创建场景：THREE.Scene()用于创建一个3D场景，所有对象都将在其中添加。
3. 创建相机：THREE.PerspectiveCamera()创建一个透视相机，并设置其视角、宽高比、近裁剪面和远裁剪面。相机的位置设置为z轴上的5个单位。
4. 创建渲染器：THREE.WebGLRenderer()创建一个WebGL渲染器，并将其大小设置为浏览器窗口的宽度和高度。然后将渲染器的DOM元素添加到HTML文档中。
5. 创建几何体：使用THREE.BoxGeometry()创建一个立方体几何体，并使用THREE.MeshBasicMaterial()为其指定材质颜色。最后，通过THREE.Mesh()将几何体和材质组合成一个网格对象，并将其添加到场景中。
6. 动画函数：animate()函数使用requestAnimationFrame()实现平滑动画效果，每帧更新立方体的旋转角度，并调用renderer.render()来渲染场景和相机。

希望这段代码能帮助你理解如何使用Three.js创建一个简单的3D效果！