第一讲 初始three.js

122 阅读2分钟

孙子兵法.jpg

开启掘金成长之旅!这是我参与「掘金日新计划 · 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

可以看到控制台打印:

image.png

到这里位置,我们的环境就搭建好了,嗯~ o( ̄▽ ̄)o真的是成就感满满。

最后

今天开始就开始我们three.js的学习啦,jym准备好了吗... 可以关注鄙人的three.js专栏, 基本会保持三天内更新一篇的频率,等不及的可以先三连,后面集中学习。

知识给人重量,成就给人光彩,大多数人只是看到了光彩,而不去称量重量。
                                                                             -------致jym