创建threejs工程

2026/7/1 9:15:42

一、主要内容

本文主要讲解threejs工程文件的创建步骤及如何导入threejs库。

二、创建工程步骤

（1）主要执行命令归纳

npm init //初始化，目的是生成package.json文件 npm install --save-dev parcel //给该工程安装parcel打包器 npm install three --save //给该工程安装three npm start //启动

（2）具体步骤

-1-》初始化文件夹：

tian@hang:~$ mkdir Mythreejs && cd My* tian@hang:~/Mythreejs$ ls tian@hang:~/Mythreejs$ npm init /*中间询问直接回车就行*/ tian@hang:~/Mythreejs$ ls package.json

-2-》创建其它文件夹

mkdir src && cd src && mkdir assets main && touch index.html

cd assets/ && mkdir css img && cd css && touch style.css

cd ../../main/ && touch main.js && cd ../../

tian@hang:~/Mythreejs$ mkdir src && cd src && mkdir assets main && touch index.html tian@hang:~/Mythreejs/src$ cd assets/ && mkdir css img && cd css && touch style.css tian@hang:~/Mythreejs/src/assets/css$ cd ../../main/ && touch main.js tian@hang:~/Mythreejs/src/main$ cd ../../ tian@hang:~/Mythreejs$ tree . ├── package.json └── src ├── assets │ ├── css │ │ └── style.css │ └── img ├── index.html └── main └── main.js 5 directories, 4 files

-3-》写入文件内容

style.css文件内容：

*{ margin:0; padding:0; } body{ background-color: aqua; }

index.html文件内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./assets/css/style.css"> </head> <body> <script src="./main/main.js" type="module"> </script> </body> </html>

main.js 文件内容

import * as THREE from 'three'; console.log(THREE); // console.log('Hello Three.js!');

package.json文件内容：修改scripts部分，删除"main": "index.js",这一行

{ "name": "mythreejs", "version": "1.0.0", "description": "", "license": "ISC", "author": "", "type": "commonjs", "scripts": { "start": "parcel src/index.html", "build": "parcel build src/index.html" }, "devDependencies": { "parcel": "^2.16.4" }, "dependencies": { "three": "^0.185.0", "tree": "^0.1.3" } }

（2）执行命令

安装parcel命令；出现文件夹 node_modules