three.js

官方文档

http://threejs.org

下载安装

github下载,解压即可

https://github.com/mrdoob/three.js/

下载依赖

npm install 
# 或者
yarn install

启动

npm start
# 或者
yarn start

案例查找方式

# 案例存放位置,环境搭建好之后,浏览器打开localhost:8888,src目录下
# 案例都是以文件来分割的,直接根据案例名字在examples中查找

Parcel 打包工具

作用

1. 模块化开发
2. 代码编写完成,直接运行在浏览器,直观的看到效果
3.

官网

https://paceljs.cn

快速开始

新建一个文件夹,在命令行中打开该文件夹

# 项目初始化,一直回车,得到一个package.json文件
npm init

# 安装parcel
yarn global add parcel-bundler
npm install -g parcel-bundler

配置命令脚本

package.json

"scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }

源码存储文件创建

# 项目主目录下新建src文件夹
# 创建index.html

index.html

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

修改命令脚本

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

设置开发环境

yarn global add parcel-bundler -save-dev
npm install -g parcel-bundler -save-dev

创建静态文件目录

src/assets/css
src/assets/main   # main文件夹下创建main.js 入口文件
src/assets/images

html 导入 css文件

// head标签中
<link rel="styleheet" href="./assets/css/style.css"></link>

html 导入 入口js文件,模块化开发

// body标签中
<script src="./assets/main/main.js" type="module"></script>

安装three.js

npm install three --save

css 文件添加样式

// 去掉边距
*{
margin:0;
padding:0;
}
body{
  backgroud-color:skybule;
}

main.js

import * as THREE from "three";
consloe.log(THREE)

运行

# 运行后,会将代码打包到dist文件夹中
yarn run dev
# 或者
npm run dev
posted @ 2023-04-07 14:15  河图s  阅读(18)  评论(0)    收藏  举报