Kinh nghiệm ThreeJS – WebAR

1. Thiết lập môi trường

PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

fov: (field of view) tham số này định nghĩa góc có thể nhìn được, tức là camera có thể nhìn được bao nhiêu sẽ dựa vào tham số này, có đơn vị đo góc là deg, range là 1 tới 179 deg. Nó cũng định nghĩa ra kích cỡ độ lớn của vật thể khi ở xa so với vật thể khi ở gần camera.

aspect: Tham số chỉ ra tỉ lệ của camera (kiểu như kích cỡ của video phim chuẩn là tỉ lệ 16:9 ấy). Ở đây mình dùng chính tỉ lệ của màn hình web hiện tại làm tỉ lệ nên nó là: window.innerWidth / window.innerHeight
far và near: Tham số tương tự như perepective trong css, chỉ ra giới hạn xa gần của camera. Far là điểm cực xa của camera (default là 2000), near là điểm cực gần của camera (default là 0.1), tất nhiên là far luôn phải lớn hơn near

requestAnimationFrame render 60 lần/s

Không cần ánh sáng:

MeshBasicMaterial
MeshNormalMeterial
MeshMatcapMaterial
MeshToonMaterial (gradientMap: threetone, fourtone, filetone)
- threetone: gồm 3 màu từ đen tới trắng
- fourtone: gồm 4 màu từ đen tới trắng
- fivetone: gồm 5 màu từ đen tới trắng

Cần ánh sáng:

MeshLambertMeterial (emissive không cần ánh sáng)
MeshPhongMeterial: làm bóng (specular: màu sáng bóng, shininess: Độ sáng bóng)
MeshStandardMaterial (roughness, metalness: cường độ sáng tối ở những vùng tối)
MeshPhysicalMaterial: mở rộng của MeshStandardMaterial (clearcoat, clearcoatroughness: lớp sơn)

specular map: phần trong suốt và phần không trông suốt

roughnessMap and metalnessMap

BumbMap

NormalMap

DisplacementMap