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.灯光