three 使用简单介绍

98 阅读1分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情

想要学three.js我们需要看官网,但是three的官网不是很快,尤其是当我们要看一些demo的时候,国内打开很慢,而且有时候根本打不开,(虽然有梯子,但是也不是经常有效),所以我们需要在github上把three.js的代码down下来,在本地启动起来,这样我们用起来就很方便了,

首先找到three.js的官网不是中文官网, three.js官网找到code看图片 点击去

three1.png

这是three.js的github 我们需要下载下来 看图片

three2.png 解压文件,并且需要我们下载依赖,用npm或者yarn都可以,

这是我本体运行起来的状态

three3.png

浏览器打开状态

three4.png

  • docs 是文档
  • editor 是视图编辑器
  • examples 是demo案例 这样我们打开案例或者查看文档就很方便了

文档(各种语言)

three5.png

编辑器

three6.png

demo

three7.png

打包工具用的是parcel 这个比较简单,大家可以根据自己的需要选择打包工具

这是官网链接 parceljs官网

这是官网链接parcel2版本官网地址 v2parceljs

npm install --save-dev parcel 下载parcel2 使用

 "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },

入口文件就是index.html

three8.png 上面就是文件结构 这个只是简单的使用, 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