使用Parcel打包Three.js项目

使用以下命令创建一个新的目录，进入该目录，然后初始化一个新的npm项目：
```
mkdir threejs-parcel-project
cd threejs-parcel-project
npm init -y
```
接下来，使用以下命令安装Three.js和Parcel：
```
npm install three parcel-bundler
```

在项目根目录下创建一个名为index.html的文件，并在其中添加以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js Parcel Project</title>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在项目根目录下创建一个名为src的文件夹，并在其中创建一个名为index.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);

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();

在package.json文件中，将scripts部分更改为以下内容：

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
}

现在您可以运行以下命令，在本地开发服务器上启动您的Three.js项目：
```
npm run start
```
打开浏览器，访问 http://localhost:1234，您应该能看到一个旋转的绿色立方体。
若要构建生产版本，请运行以下命令：
```
npm run build
```
Parcel将生成一个dist文件夹，其中包含优化过的构建输出。您可以将此文件夹部署到生产环境。