Three.js基础，入门three.js

1.安装 parcel 这个打包工具 npm i parcel-bundler --save -dev

安装three.js并导入 npm i three --save import * as THREE from "three"

1.创建相机、场景、渲染器

2.使用控制器

有控制器图形才能拖动

轨道控制器：OrbitControls 先引入 import { OrbitControls } from"three/examples/jsm/controls/OrbitControls";

3.坐标辅助器 AxesHelper

4.移动、缩放 、旋转

移动：cube.position.x = 3; 或 整体移动 ： cube.position.set(5,0,0)

缩放： cube.scale.x = 5 cube.scale.set(3,2,1) 缩放比例

旋转： cube.rotation.set(Math.PI / 4，0，0) 180°/4 x轴旋转45°

5.安装gsap

无限次循环： repeat：-1

往返运动：yoyo：true

延迟： delay：2

暂停： zsq.pause（）

继续： zsq.resume ()

例：双击暂停、继续

6.更新渲染画面（适配）

7事件

双击：window.addEventListener("dblclick",()=>{})

全屏：renderer.domElement.requestFullscreen();

退出全屏：document.exitFullscreen();

onLoad: 加载完成时调用

加载进度：onProgress

8基础知识

法相;光打过来的位置

UV：UV就是一张二维图像 UV映射就是将二维图像投影到三维模型的表面以进行纹理映射的3D建模过程

创造一个物体：const aa = new.THREE.BufferGeometry();

贴图 导入纹理

材质：由 基础色、法线、高光、粗糙度、金属度定义材质属性

灯光：由直接照明、间接照明、直接高光、间接高光、阴影、环境光闭塞来定义属性 pbr标准材质才用到灯光

贴图： 置换贴图 纹理贴图 粗糙度贴图 法线贴图 ao贴图遮罩 金属度贴图 环境贴图

模型

粗糙度：roughness：1

9.灯光