搭建我们自己的第一个three项目

搭建项目

我们要学习three,那么我们势必需要在本地搭建一个自己的项目。

首先我们需要在我们自己的电脑中安装node,创建一个node环境。这个自行从网上百度,这里就不再介绍了。(简单的一批,自行百度吧,如果不会,那么也不要学习three了)

Parcel

这里我们使用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

 

posted @ 2024-02-22 16:23  上官靖宇  阅读(21)  评论(0编辑  收藏  举报