❌

阅读视图

发现新文章，点击刷新页面。

拒绝配置地狱！5 分钟搭建 Three.js + Parcel 完美开发环境

✇掘金 前端
烛阴

1. 序言

Parcel 不需要复杂的配置文件，你只需要指明一个 index.html，可以有效节省你在开发环境上配置时间。

2. 初始化

首先，我们需要一个干净的目录。打开终端，输入以下命令：

mkdir three-parcel-demo
cd three-parcel-demo
npm init -y
npm install --save-dev parcel-bundler
npm install three

然后在package.json的scripts里面添加运行入口：

 "scripts": {
    "dev": "npx parcel src/index.html",
    "build": "npx parcel build src/index.html"
  },

3. 项目结构搭建

Parcel 的强大在于它支持 HTML 入口。

  • index.html: 骨架
  • src/main.js: 灵魂
  • src/style.css: 皮肤

4. 编写核心代码

在 index.html 中引入脚本和样式表：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/style.css"/>
</head>
<body>
    <canvas id="three-canvas"></canvas>
    <script src="./main/main.js" type="module"></script>
</body>
</html>

在 src/main.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({ canvas: document.querySelector('#three-canvas') });

renderer.setSize(window.innerWidth, window.innerHeight);

// 添加一个极简的几何体
const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.z = 3;

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

5. 启动与魔法

现在，一个最简单的3D 开发环境已经搭建完成了，只需要在命令行输入：

npm run dev

如此，你就可以在 http://localhost:1234 查看效果。

📂 核心代码与完整示例：  my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货

❌