创建threejs工程

一、主要内容本文主要讲解threejs工程文件的创建步骤及如何导入threejs库。二、创建工程步骤1主要执行命令归纳npm init //初始化目的是生成package.json文件 npm install --save-dev parcel //给该工程安装parcel打包器 npm install three --save //给该工程安装three npm start //启动2具体步骤-1-》初始化文件夹tianhang:~$ mkdir Mythreejs cd My* tianhang:~/Mythreejs$ ls tianhang:~/Mythreejs$ npm init /*中间询问直接回车就行*/ tianhang:~/Mythreejs$ ls package.json-2-》创建其它文件夹mkdir src cd src mkdir assets main touch index.htmlcd assets/ mkdir css img cd css touch style.csscd ../../main/ touch main.js cd ../../tianhang:~/Mythreejs$ mkdir src cd src mkdir assets main touch index.html tianhang:~/Mythreejs/src$ cd assets/ mkdir css img cd css touch style.css tianhang:~/Mythreejs/src/assets/css$ cd ../../main/ touch main.js tianhang:~/Mythreejs/src/main$ cd ../../ tianhang:~/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 langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title link relstylesheet href./assets/css/style.css /head body script src./main/main.js typemodule /script /body /htmlmain.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_modulesnpm install --save-dev parcel安装 threejsnpm install three --save运行网页就是执行的mian.js里面的startnpm start三、运行界面展示运行成的界面网页显示