# Document - 3D Website
## Các chức năng của GUI
## 1. Gui Compression Pass
- Công dụng: Cơ chế khử răng cưa của các đối tượng trong môi trường.
- Hiện tại có 3 option để chọn:
1.1 SSAA: Apply (true/false) dùng khử răng cưa tối ưu về mặt chất lượng hình ảnh, đồng thời cho phép lựa chọn các level của nó.
1.2 FXAA: Apply (true/false) dùng khử răng cưa tối ưu về mặt tốc độ xử lý.
1.3 SMAA: Apply (true/false) dùng khử răng cưa tối ưu về mặt chất lượng hình ảnh.

## 2. Gui Bloom Pass
- Công dụng: Thêm hiệu ứng phát quang cho các đối tượng. Nếu dùng hiệu ứng Emissive, Bloom bắt buộc phải được bật.
- Chế độ **Apply** (true/false).
- **Apply** (true) sẽ xuất hiện cửa sổ **Parameter**
- Cửa sổ **Parameter**:
2.1 **Resolution** (x, y): giá trị dao động [0 --> 2048] với step: 100.
2.2 **Threshold**: giá trị dao động [0 --> 1] với step: 0.01.
2.3 **Strength**: giá trị dao động [0 --> 5] với step: 0.01.
2.4 **Radius**: giá trị dao động [0 --> 2] với step: 0.01.

## 3. Gui Tone Mapping Exposure
- Công dụng: Tăng độ sáng tối và độ mượt trong chuyển đổi màu sắc.
- Chế độ **Apply** (true/false).
- **Apply** (true) sẽ xuất hiện cửa sổ **Parameter**
- Cửa sổ **Parameter**:
3.1 **Exposure**: giá trị dao động [0 --> 5] với step: 0.1.

## 4. Gui Output Encoding: sRGB
- Công dụng: Thay đổi cách tính toán điểm ảnh.Nếu áp dụng thì dùng giải thuật tính toàn mềm (chất lượng hình ảnh tốt hơn nhưng sẽ gây tăng lượng dữ liệu tính toán). Nếu không áp dụng sẽ dùng giải thuật tuyến tính để tính toán (chất lượng hình ảnh sẽ kém với các màu sắc có độ biến thiên cao nhưng tính toán sẽ nhanh hơn.)
- Chế độ **Apply** (true/false)
4.1 **Apply** (true): Encoding = true và outputEncoding = THREE.sRGBEncoding.
4.2 **Apply** (false): Encoding = false và outputEncoding mặc định (3000).

## 5. Gui Environment
- Công dụng : Env - Cho phép lựa chọn định dạng môi trường. Hiện tại có 3 môi trường hỗ trợ: môi trường trong phòng, môi trường HDR, môi trường hoàng hôn. BackGround - Cho phép nhập hình ảnh từ người dùng để tạo thành một background bao quanh căn phòng.
- Cho phép lựa chọn option:
Env
5.1 **Option**: Room Environment
5.2 **Option**: HDR Environment
5.3 **Option**: Venice Sunset Environment
5.4 **Option**: Custom Environment
5.4 **Option**: Null
Background:
5.1 **Option**: Image
5.2 **Option**: null
## 6. Gui Lights
- Công dụng: Tạo các loại đèn và cho phép chỉnh sửa đèn trong môi trường.
- Tồn tại 3 loại Light mặc định:

### 6.1 AmbientLight:
Cấu trúc mặc định:
**New**: Nút thêm light khi muốn.
**Color**: hiển thị cửa sổ lựa chọn hình ảnh.
**Visible**: Apply( true/false).
**Intensity**: giá trị dao động [0 --> 10] với step: 0.01.
**Delete**: Xóa Light khi không dùng.

### 6.2 PointLight:
Cấu trúc mặc định:
**New**: Nút thêm light khi muốn.
**Color**: hiển thị cửa sổ lựa chọn hình ảnh.
**Visible**: Apply( true/false).
**CastShadow**: Apply( true/false).
**Intensity**: giá trị dao động [0 --> 10] với step: 0.01.
**Distance**: giá trị dao động [0.01 --> 40] với step: 0.01.
**Position**: x, y, z: giá trị dao động [-200 --> 200] với step: 1.
(Bảng giá trị max/min/step cho phép người dùng ước lượng khoảng cách mong muốn để cân chỉnh phù hợp)
**Delete**: Xóa Light khi không dùng.

### 6.3 DirectionalLight:
Cấu trúc mặc định:
**New**: Nút thêm light khi muốn.
**Color**: hiển thị cửa sổ lựa chọn hình ảnh.
**Visible**: Apply( true/false).
**CastShadow**: Apply( true/false).
**Intensity**: giá trị dao động [0 --> 10] với step: 0.01.
**Position**: x, y, z: giá trị dao động [-200 --> 200] với step: 1.
(Bảng giá trị max/min/step cho phép người dùng ước lượng khoảng cách mong muốn để cân chỉnh phù hợp)
**Delete**: Xóa Light khi không dùng.

## 7. Gui Room
- Công dụng: Cung cấp các thông số của room/ child room để người dùng hiệu chỉnh.

### 7.1 Position:
x, z: giá trị dao động [-200 --> 200] với step: 1.
y: giá trị dao động [0 --> 200] với step: 1.

### 7.2 Rotation:
value: giá trị dao động [0 --> 7] với step: 0.01.

### 7.3 Scale:
value: giá trị dao động [0.001 --> 100] với step: 0.001.

### 7.4 Child Room:
- Hiển thị 1 list các child trong Room (các đối tượng con không bị gom nhóm trong các file mô hình được load lên). Cờ Visible cho phép hiển thị, không hiển thị đối tượng con. Cờ Metalness tác đông lên độ ánh kim của đối tượng. Cờ Roughness tác động lên độ gồ ghề của đối tượng. Cờ Object Color tác động lên màu sắc của đối tượng, dùng cùng với cờ Emissive để tạo ra màu sắc phát quang. Cờ Env Reflection cho phép môi trường tác động lên đối tượng con. Cờ Reflectivity cho phép tăng giảm cường độ phản chiếu.


**Visible**: Apply( true/false).
**Metalness**: giá trị dao động [0 --> 1] với step: 0.1.
**Roughness**: giá trị dao động [0 --> 1] với step: 0.1.
**Object Color**: hiển thị cửa sổ lựa chọn hình ảnh.
**Emissive**:
- Color: hiển thị cửa sổ lựa chọn hình ảnh.
- Intensity: giá trị dao động [0 --> 10] với step: 0.1.

**Env Reflection**: giá trị dao động [0 --> 10] với step: 0.1.
**Reflectivity**: giá trị dao động [0 --> 1] với step: 0.01.

# 8. GUI Character
Công dụng: cung cấp thông tin cho người dùng hiệu chỉnh góc độ xoay của model. ( khi muốn sử dụng bạn cần chọn chế độ orbitcontrols thay vì 3rdControls)
**Rotation - Y**: giá trị dao động [-Pi --> Pi] (quy đổi về [-3.14 --> 3.14])với step: 0.01.

## Các chức năng của bổ trợ

## 1. Add Object
Công dụng: cho phép người dùng thêm đối tượng (hình chữ nhật - khung tranh). Và cho phép người dùng thực hiện 1 số thao tác trên đối tượng đó.
Hướng dẫn sử dụng: Nhấp vào button **Add Object** một hình chữ nhật sẽ được hiện ra trước mặt vrm.
Lưu ý: khi đặt chuột vào đối tượng mới được tạo ra, sẽ xuất hiện hiệu ứng outline trên đối tượng đó.
Các chức năng:
1.1. Change video: cho phép nhập địa chỉ video, nội dung sẽ được hiển thị trên đối tượng
1.2. Change scale: cho phép nhập thông số kích cở, đối tượng sẽ được thay đổi theo mong muốn.
1.3. Change geometry: cho phép thay đổi đối tượng đang có thành các hình dạng khác như: box, circle, cone, ...

## 2. Save Json
Công dụng: cho phép người dùng lưu trữ thông tin của các đối tượng vật thể tổn tại trong web, hỗ trợ cho công việc design.
Hướng dẫn sử dụng: Sao quá trình cân chỉnh các đối tượng chúng ta chỉ cần nhấn vào nút nhấn **save JSON**

## 3. Controls
Công dụng: Cho phép người dùng có nhiều cách thao tác trên môi trường 3D.
**3.1 3rdControls**
Lưu ý: Khi sử dụng chức năng này, bạn chỉ được quyền xoay quanh đối tượng theo hình cầu, di chuyển trên dưới bằng cách di chuyển chuột ( không cần giữ chuột). Để thoát chế độ này bạn chỉ cần nhấn phím ESC

**3.1 3rdControls**
Lưu ý: Khi sử dụng chức năng này, bạn có thể điều chỉnh góc nhìn tùy ý bằng cách bấm giữ chuột và xoay, đồng thời cho phép zoom in / zoom out.

## 4. Jump/Move
Công dụng: cho phép người dùng có thể di chuyển đến các địa điểm khác nhau trong môi trường 3D được tạo ra.
Hướng dẫn sử dụng: Các bạn chỉ cần thao tác với các phiếp: W: Up, A: Left, S: Down, D: Right, Space: Jump.