筆記, threejs 和 glTF 的一些 tips

時間 2019-11-09

標籤筆記 threejs gltf 一些 tips 简体版

原文原文鏈接

glTF 查看工具的實現

完整的 glTF 3D 模型查看工具的例子:git

https://github.com/donmccurdy...github

Object3D 獲取中心點和尺寸

Object3D 物體能夠獲取一個包含物體的 Box, 這個 Box 有一些功能, 好比獲取中心點:canvas

https://github.com/donmccurdy...api

const box = new THREE.Box3().setFromObject(object);
const center = box.getCenter(new THREE.Vector3());

也能夠用了獲取物體的大小:函數

const size = box.getSize(new THREE.Vector3()).length();

獲取中心點的主要目的是處理模型自己的偏移, 模型文件未必是把模型放在正中間的.
這時就須要手動查詢物體在座標系當中的中心點, 而後經過容器改變整個的位置.
須要引入容器是由於旋轉, 沒有容器的話, 旋轉時有偏離的物體的原點依然是偏移的, 影響旋轉的效果.工具

Orbit Control 如何移動 Camera

通常旋轉相對的對物體作四元數的旋轉, 或者歐拉角的旋轉,
歐拉角的旋轉在物體旋轉到必定程度後會變得很反直覺, 而四元數旋轉的傾斜很差控制,
因此還有一個版本是旋轉 Camera 來的找到一個好的位置. 並且 Camera 的上方始終保持.性能

旋轉攝影機, 本身實現其實還好. 大體的代碼就是角度和三角函數:this

https://threejs.org/examples/...編碼

this.camera.position.set(
  this.props.radius * Math.sin(toRadians(this.props.polarAngle)) * Math.cos(toRadians(this.props.equatorAngle)),
  this.props.radius * Math.cos(toRadians(this.props.polarAngle)),
  this.props.radius * Math.sin(toRadians(this.props.polarAngle)) * Math.sin(toRadians(this.props.equatorAngle))
);

this.camera.lookAt(new Three.Vector3(0, 0, 0));

角度是基於球面座標獲得的, 除了半徑 r 以外用兩個角度表示,
與 Z 軸的夾角控制在 (0, Math.PI) 之間(不須要 Math.PI 以上的部分),
XY 平面上與 X 軸的角度在 (0, 2 * Math.PI) 之間spa

https://en.wikipedia.org/wiki...

本身試過一遍, 後面就知道爲何的 Oribt Control 到 90 度就邪乎了,
到了 90 度的地方 camera 會出現一次翻轉. 彷佛 camera 是自動校訂"上"這個方向的.
我當前的作法是把角度控制在 (0.01, 180 - 0.01) 之間的, 省得出問題.

glTF 存儲格式和轉換

glTF 文件格式有 .gltf 和 .glb 兩種.
GLTF 文件的 buffer 部分在 .gltf 裏是用 Base64 編碼保存的,
有時候也會被抽出來保存爲 .bin 文件, 致使最後其實有兩個文件,
這對於上傳文件預覽來講是一個坑, 須要指定使用 Embedded 模式生成文件才能夠
不然會看到 GLTFLoader 嘗試去獲取一個 .bin 文件而後請求失敗,
固然用 .bin 存的二進制在傳輸和性能上確定是比用 Base64 要好的.

The Basic Structure of glTF
https://github.com/KhronosGro...

關於 GLTF 的介紹還能夠看這個圖 GLTF 概覽.

關於格式轉化, 好比 .obj 轉換到 .gltf, 找到個命令行工具:
https://github.com/Analytical...

.stl 文件轉換過來彷佛沒有直接能夠用的, 可是可能轉化到 .obj, 兩份代碼沒有確認過:
https://gist.github.com/wills...
https://github.com/baserinia/...

看到有在線的格式轉化工具, 彷佛挺厲害的, 不知道背後的實現:
https://blackthread.io/gltf-c...