# threejs

**Repository Path**: edwin_wp/threejs

## Basic Information

- **Project Name**: threejs
- **Description**: 分享做的demo分享做的demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-21
- **Last Updated**: 2024-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

http://webgl3d.cn/pages/56bb7e/

##
- 1 创建3d场景对象
- 2 创建立方体集合体
- 3 基础材质
- 4 3d物体对象
- 5 创建相机
- 6 创建渲染器
- 7 执行渲染

## scene
const scene = new THREE.Scene()
 
scene api
- add 向场景添加对象
- getObjectByName 
- remove

- scene 属性
- children
- fog
- ovverridMaterial 所有对象使用相同材质

## 几何体
const boxGeometry = new THREE.BoxGeometry()

- position
- rotation
- scale
- translate

# 相机
https://zhuanlan.zhihu.com/p/510877492
OrthographicCamera
PerspectiveCamera


## 正射投影相机



# 光源
## 基础光源
- AmbientLight 环境光 作用于在当前场景所有物体 环境光将均匀照亮场景中所有物体，但是不能设置阴影，它没有方向
- PointLight 点光源 向所有方向发射光源
- SpotLight 聚合灯光源 灯光
- DirectionalLight 平行光，太阳光 可以使物体有立体感

## 特殊光源
- HemisphereLight 半球光，夕阳和日出时的光
- AreaLight


## dat.gui
https://blog.csdn.net/weixin_43990650/article/details/121589811



## todo 
1 窗口事件
- 相机更新

## 项目1粮仓
### 加载gltf
- 颜色偏差，主要贴图（造成的原因：颜色空间）解决：渲染器的解析编码outputEncoding
（明暗，还是rgb）

- 模型贴图颜色需要设置webgl渲染器一直material.map.encoding
- gltf贴图的是否翻转纹理贴图和贴图的是否翻转纹理贴图不一致，会导致错位现象
- gltf 和 glb的区别    gltf分离

- gltf包含光源信息
- 光源方向及位置

- 相机设置
let k = width / height
let s = 100, 控制相机渲染空间左右上下渲染范围
let camera = -s * k, s * k, s, -s, 1, 1000
camera.lookAt(0,0,0)

- 相机选择
- 透视相机
- 正交相机

- 材质
- 漫反射（不是很消耗性能）
- 效果逼真(MeshPyhsicalMaterial 和 MeshStardardMaterial)

- 坐标
- 自身是局部坐标
- 自己和所有父类的坐标累加是世界坐标

- 标签
- css2DRender 放大缩小没变化
- css3DRender 初始化高度是20，可以通过scale进行缩放
- sprite 始终平行页面，类似于一个矩形

- 射线拾取
1）坐标转换（鼠标点击的屏幕坐标转webgl标准设备坐标）
2）射线生成计算（通过鼠标点击位置 + 相机参数计算射线值）
3）射线拾取计算

- 点击弹出信息标签

## 项目2 手机展示

- 贴图



## 地图

### 1shape
- 深度冲突

### 2 camera
-  const k = width / height; //canvas画布宽高比  可以控制横竖是否充满
const s = 60;//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);


### 包围盒
- 可以获取模型的最大xyz,和最小xyz
- 可以获取包围盒长宽高
- 可以获取包围盒的中心位置