Three.js-初识

目录

1.什么是Three.js

2.three.js-master目录结构

3.Three.js资源

4.Three.js官网本地搭建

5.Three.js渲染第一个场景和物体

5.1 安装parcel

5.2  配置项目

5.2.1  在你正在使用的项目目录下创建一个 package.json 文件：

5.2.2  创建一个 index.html 、main.js及style.css 文件

5.2.3 配置package.json文件

5.2.4 安装Three.js

5.2.5 配置main.js文件，渲染第一个场景和物体

---

1.什么是Three.js

Three.js库是建立在WebGL API基础之上的高级API，其功能介于底层图形API和通用3D引擎（例如Unity 3D等）之间。它具有通常在3D引擎中才能见到的“材质”概念，不但能够直接实现Phong-Blinn实时光照、实时阴影、法向贴图、环境贴图等传统技术，还能支持时下流行的“基于物理渲染”（PBR）技术。同时，它还提供了许多现成的着色器程序，可以实现3D引擎中常见的高级效果，包括但不限于全屏环境光遮挡（SSAO）、景深（DOF）等。

3DThree.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

官网地址：

Three.js – JavaScript 3D Libraryhttps://threejs.org/

 

2.three.js-master目录结构

github链接查看所有目录：GitHub - mrdoob/three.js: JavaScript 3D Library.

three.js-master
└───build——src目录下各个代码模块打包后的结果
    │───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
    │───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
    │
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───utils——一些辅助工具
    │───\utils\exporters\blender——blender导出threejs文件的插件

3.Three.js资源

github链接：GitHub - mrdoob/three.js: JavaScript 3D Library.

Three.js官网：Three.js – JavaScript 3D Library

github链接查看所有版本：Releases · mrdoob/three.js · GitHub

github下载：GitHub - mrdoob/three.js: JavaScript 3D Library.

下面表格列举了一些Three.js相关的开源库。

库	功能
Physijs	Physijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现
stats.js	JavaScript性能监控器，同样也可以测试webgl的渲染性能
dat.gui	轻量级的icon形用户界面框架，可以用来控制Javascript的变量，比如WebGL中一个物体的尺寸、颜色
tween.js	借助tween.js快速创建补间动画，可以非常方便的控制机械、游戏角色运动
ThreeBSP	可以作为three.js的插件，完成几何模型的布尔，各类三维建模软件基本都有布尔的概念

4.Three.js官网本地搭建

Threejs官网同时提供了英文文档和中文文档，不过有些时候打开会比较慢。因此，在开发阶段建议使用本地建站，进行案例实现或文档查询等工作。

首先在官网下载threejs-dev文件：

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

下载完毕后导入VScode中对其依赖进行安装：

yarn install
npm install

启动后通过start命令运行：

yarn start
npm start

 运行结果如图：

5.Three.js渲染第一个场景和物体

在学习threejs的过程中，往往需要频繁的代码测试，查看threejs代码的渲染效果。这时候你肯定希望代码修改之后，threejs渲染效果立即热更新。在开发过程中，建议使用模块化开发模式，因此需要通过搭建本地静态服务器或使用Web打包工具对项目进行热加载。下面以parcel打包工具为例，对项目进行基础配置，也可以使用webpack、live-server等工具。

5.1 安装parcel

Parcel 是一个零配置的网络构建工具。它将开箱即用的出色开发体验与可扩展的架构相结合，可以将您的项目从刚刚开始转变为大规模生产应用程序。

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

5.2  配置项目

项目结构：

5.2.1  在你正在使用的项目目录下创建一个 package.json 文件：

yarn init -y

or

npm init -y

5.2.2  创建一个 index.html 、main.js及style.css 文件

html：

5.2.3 配置package.json文件

{
  "name": "01-three_basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.4.1"
  },
}

5.2.4 安装Three.js

在项目中打开集成终端，使用命令

npm install three --save
or
yarn add three

5.2.5 配置main.js文件，渲染第一个场景和物体

import * as THREE from "three";

// console.log(THREE);

// 目标：了解three.js最基本的内容

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,//屏幕宽高比
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);//x，y，z轴坐标
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);

// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

 实现效果：