搭建我们自己的第一个three项目
搭建项目
我们要学习three,那么我们势必需要在本地搭建一个自己的项目。
首先我们需要在我们自己的电脑中安装node,创建一个node环境。这个自行从网上百度,这里就不再介绍了。(简单的一批,自行百度吧,如果不会,那么也不要学习three了)
这里我们使用Parcel来打包我们的项目(你也可以使用别的)
Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。(https://www.parceljs.cn/)
创建一个本地文件夹
在任意一个地方我们创建一个文件夹
这个名字随便起,不要使用中文特殊符号等
在这个文件夹下打开黑窗口执行,npm init
然后我们会在文件夹下面发现多了一个名为package.json的文件。
安装parcel
npm install parcel-bundler
在01.three_test下面创建src目录
src下面在创建如下文件
assets里面的内容
style.css
body, html {
padding: 0;
margin: 0;
box-sizing: border-box;
}
canvas {
width: 100vm;
height: 100vh;
display: block;
position: fixed;
top: 0;
left: 0;
}
main文件下创建main.js
index.html内容如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<div id="app"></div>
<script src="./main/main.js"></script>
</body>
</html>
紧接着我们开始修改配置文件package.json文件
添加红色内容在文件中
然后我们就可以开始运行我们的代码了
执行命令:npm run dev