开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天,点击查看活动详情
Three.js
官网地址 相信实力超群的jym已经去官网地址直接肝文档了,还剩下我们这群小菜鸡,那就继续我们的学习吧!
环境搭建
第一步:
- 新建项目文件夹:01-env
- 使用vscode打开,并打开终端
- 终端中运行:
如果使用npm执行:
npm init
如果使用npm执行:
yarn init
如果使用pnpm执行:
pnpm init
这时候文件夹中就会出现一个文件:package.json
第二步:
- 安装 Parce
如果使用npm执行:
npm i parcel-bundler
如果使用yarn执行:
yarn add parcel-bundler
如果使用pnpm执行:
pnpm i parcel-bundler
- 安装three.js
如果使用npm执行:
npm i three
如果使用yarn执行:
yarn add three
如果使用pnpm执行:
pnpm i three
说明
考虑到大家所掌握的技术栈‘千奇百怪’,例如:vue ,react等;如果鄙人用其中某一个做试例,万一jym只掌握其中一种技术栈,那不就直接将他逐出师门了。
这里使用了一种很新的东西Parce,jym可能没有了解过,当然也不用了解,咱们的重点是后续的three.js的学习。
第三步:
- 根目录创建文件夹:src
- 在src文件夹下创建文件夹:pages
- 在src文件夹下创建文件:index.html
<!-- index.html内容替换成以下 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入js文件: 写three.js的地方 -->
<script src="./pages/main.js"></script>
</head>
<body>
</body>
</html>
- 在src/pages文件夹下创建文件:main.js
import * as Three from "three"; // 引入three.js包
console.log(Three, "three"); // 打印验证
- 修改:package.json
// 可以直接复制替换
{
"name": "01-env",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"parcel-bundler": "^1.12.5",
"three": "^0.149.0"
}
}
最后一步:
如果使用npm执行:
npm run dev
如果使用yarn执行:
yarn dev
如果使用pnpm执行:
pnpm run dev
可以看到控制台打印:
到这里位置,我们的环境就搭建好了,嗯~ o( ̄▽ ̄)o真的是成就感满满。
最后
今天开始就开始我们three.js的学习啦,jym准备好了吗... 可以关注鄙人的three.js专栏, 基本会保持三天内更新一篇的频率,等不及的可以先三连,后面集中学习。
知识给人重量,成就给人光彩,大多数人只是看到了光彩,而不去称量重量。
-------致jym