使用npm创建three.js项目

2023-07-20 本文已影响0人 ShawnWeasley

1. 安装 Node.js 和 npm

首先，需要在您的计算机上安装 Node.js 和 npm。Node.js 是一个 JavaScript 运行环境，而 npm 是一个 JavaScript 包管理器。npm 会随 Node.js 一起安装，因此只需要安装 Node.js 即可。从 Node.js 的官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。

2. 创建一个新的项目

在您希望创建项目的目录下，手动创建一个文件夹，在终端(命令提示符)中输入：cd 空格把文件夹拖进去，回车，这里假设项目名称为 "threejs-project"，进入新创建的项目文件夹：

cd threejs-project

3. 初始化 npm

在项目文件夹中，使用以下命令来初始化 npm。这将创建一个新的 package.json 文件，这个文件描述了项目的一些基本信息以及依赖关系：

npm init -y

-y 参数意味着接受所有默认选项。

4. 安装 three.js

使用以下命令来安装 three.js：

npm install three

这将把 three.js 安装到项目的 node_modules 文件夹中，并将其添加到 package.json 文件的依赖项中。

5. 创建 index.html 文件

在项目文件夹中，创建一个名为 index.html 的新文件。这将是您的项目的主页。以下是一个基本的 HTML 模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js project</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

6. 创建 app.js 文件

在项目文件夹中，创建一个名为 app.js 的新文件。这将是您的项目的主 JavaScript 文件。您可以在这个文件中编写您的 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;

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

animate();

7. 运行项目

你需要一个 JavaScript 打包工具，如 webpack 或 Parcel，以正确处理这些模块的导入。这些工具可以解析 Node.js 风格的 import 语句，并生成适合在浏览器中运行的文件。

Parcel用法更简单一点，安装过程如下：

安装 Parcel：在终端中运行以下命令：
```
npm install -D parcel-bundler
```
更新 package.json 文件以使用 Parcel 来启动你的项目。在 "scripts" 部分添加一个 "start" 脚本：
```
"scripts": {
    "start": "parcel index.html"
},
```
现在你可以通过运行以下命令来启动你的项目：
```
npm start
```

Parcel 会自动解析你的 import 语句并启动一个开发服务器。

恭喜！您现在已经设置好了一个基本的 three.js 项目。以上的示例代码创建了一个旋转的绿色立方体。