Three.js是一个基于WebGL的JavaScript 3D图形库，它提供了创建和显示动画3D图形的能力。以下是一份详细的Three.js入门教程：

1. 环境搭建

首先，你需要在你的项目中引入Three.js。可以通过npm安装Three.js：

npm install three

或者直接在HTML文件中通过CDN引入：

<script src="https://unpkg.com/three@0.152.0/build/three.min.js"></script>

2. 创建基本的3D场景

Three.js中要渲染出一个图形需要以下几个基本元素：场景（Scene）、相机（Camera）、渲染器（Renderer）。

创建场景

const scene = new THREE.Scene();

创建相机

const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);

创建渲染器

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

渲染场景

renderer.render(scene, camera);

3. 添加物体

在Three.js中，物体是通过几何体（Geometry）和材质（Material）创建的。

创建几何体和材质

const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个绿色的材质

创建网格（Mesh）

const cube = new THREE.Mesh(geometry, material); // 根据几何体和材质创建网格
scene.add(cube); // 将网格添加到场景中

4. 添加相机控制

为了能够交互式地查看3D场景，我们可以使用OrbitControls来控制相机。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);

5. 添加光源

3D场景中需要光源才能看到物体。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); // 环境光
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 方向光
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

6. 动画和渲染循环

为了使3D场景动起来，我们需要设置一个动画循环。

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 只有当使用OrbitControls时需要
  renderer.render(scene, camera);
}

animate();

7. 响应窗口变化

为了使3D场景能够适应不同屏幕尺寸，我们需要监听窗口变化事件。

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

更多高级用法和配置，可以参考Three.js官方文档。