怎么安装和使用three.js

### 了解 Three.js 的安装与使用 Three.js 是一个用于在网页上创建和展示 3D 图形的强大 JavaScript 库。以下是关于如何安装和使用 Three.js 的详细指南。 #### 安装 Three.js 安装 Three.js 有多种方法，以下是最常见的两种方式： 1. **通过 CDN 引入** 使用内容分发网络（CDN）是一种快速且简单的方法来引入 Three.js 库。只需在 HTML 文件中添加以下代码即可[^2]： ```html <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script> ``` 如果需要更小的文件大小，可以使用压缩版本的 Three.js[^4]： ```html <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> ``` 2. **通过 npm 安装** 如果你正在开发一个复杂的项目，并希望利用模块化工具链（如 Webpack 或 Rollup），可以通过 npm 安装 Three.js： ```bash npm install three ``` 安装完成后，可以在项目中通过 ES6 模块导入 Three.js： ```javascript import * as THREE from 'three'; ``` #### 使用 Three.js 创建基本场景 安装完成后，可以开始使用 Three.js 创建一个简单的 3D 场景。以下是基本步骤的代码示例[^2]： ```javascript // 创建场景 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); // 添加几何体 const geometry = new THREE.BoxGeometry(); // 立方体几何体 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质 const cube = new THREE.Mesh(geometry, material); // 将几何体和材质组合成网格对象 scene.add(cube); // 将网格对象添加到场景中 // 设置相机位置 camera.position.z = 5; // 渲染函数 function animate() { requestAnimationFrame(animate); // 循环调用自身以实现动画效果 cube.rotation.x += 0.01; // 更新立方体的旋转角度 cube.rotation.y += 0.01; renderer.render(scene, camera); // 渲染场景 } animate(); ``` 此代码片段展示了如何创建一个包含立方体的基本场景，并让立方体旋转起来。 #### 学习资源推荐 对于初学者来说，可以通过以下资源进一步学习 Three.js： - 视频教程：2023全新Threejs快速入门课程【带你突破前端天花板】[^3]。 - 动画插件指南：动画神器 Tween.js 使用指南[^1]。 ---