“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情”
想要学three.js我们需要看官网,但是three的官网不是很快,尤其是当我们要看一些demo的时候,国内打开很慢,而且有时候根本打不开,(虽然有梯子,但是也不是经常有效),所以我们需要在github上把three.js的代码down下来,在本地启动起来,这样我们用起来就很方便了,
首先找到three.js的官网不是中文官网, three.js官网找到code看图片 点击去
这是three.js的github 我们需要下载下来 看图片
解压文件,并且需要我们下载依赖,用npm或者yarn都可以,
这是我本体运行起来的状态
浏览器打开状态
- docs 是文档
- editor 是视图编辑器
- examples 是demo案例 这样我们打开案例或者查看文档就很方便了
文档(各种语言)
编辑器
demo
打包工具用的是parcel 这个比较简单,大家可以根据自己的需要选择打包工具
这是官网链接 parceljs官网
这是官网链接parcel2版本官网地址 v2parceljs
npm install --save-dev parcel 下载parcel2 使用
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
入口文件就是index.html
上面就是文件结构 这个只是简单的使用,
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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<script src="./main.js" type="module"></script>
</body>
</html>
main.js
// 导入three
import * as THREE from 'three' // 导入所有api 给了 THREE