【Three.js】Three.js學習記錄

super_me發表於2019-02-16
JS

先得擺出幾個關鍵詞：場景、燈光、模型、材質、貼圖與紋理、相機、渲染器。
然後我開始裝模作樣地解釋：

上帝說，要有場景！於是就有了場景，場景去納這萬事萬物。 上帝說，要有光！於是就有了光，燈光去現這大千世界，否則一片漆黑。
上帝覺得缺少了些生氣，便用泥巴捏了一個小人兒，不叫亞當，她叫小芳。 上帝左看右看，上看下看，這小芳果然生得俊俏，五官精緻加長腿，此曰模型;
雖然小芳不是水做的，卻也在這晨光的照射下顯得皮膚吹彈可破，此曰材質；
上帝莫名竟害羞了，揮手便給他穿上一件花格子長裙，配上了烏黑的長髮，此曰貼圖與紋理；
上帝嘴角不揚卻滿心欣喜，他默默注視著自己的作品，上帝視角彷彿定格在了這一瞬間，這上帝之眼就是相機；
上帝之所見如何，由世界入眼之後大腦冥想計算所得，這智慧高效的大腦就是渲染器。 接下來預先恭喜你，你可以成為這網頁3D世界的一個小上帝。

【此段轉自https://juejin.im/post/5b0ace… 】

  1. 相機和軌跡球（trackball）的繫結

    1. 匯入obj 和mtl檔案時 紋理問題，是否可以在3ds max 時預先進行處理
    2. obj檔案匯入 Three.js中旋轉點的設定
    3. dat.GUI
    4. Three.js中有兩種材質可以對光源產生反應：MeshLamberMaterial和 MeshPhoneMaterial
    5. 渲染陰影需要在渲染器、每一個物體以及每一個光源上開啟。生成陰影：renderer.shadowMapEnabled=true;只修改此處不會有區別，還要明確那個物體需要陰影：plane.receiveShadow = true;cube.castShadow = true;sphere.castShadow = true;
    6. 一般來說不把環境光（AmbientLight）作為場景中的唯一光源
    7. 環境光光源可以附加到場景中的每一個物體上，沒有位置的概念，主要用來優化硬生生的 顏色和陰影
    8. 點光源（PointLight）照所有方向發射光線且不會產生投影，類似於夜空中的照明彈
    9. 聚光燈光源（SpotLight），發射出的光線是一個錐形，可以配置隨著距離遠近光線強度的衰減且可設定陰影
    10. 方向光/平行光（DirectinaLight）：模擬太陽光源，所有光線相互平行，不會像聚光燈那樣離目標越遠越暗淡，和聚光燈光源有很多相同屬性。
    11. 兩種特殊光源：半球光光源（HemisphereLight），為室外場景建立更加自然的光照效果；平面光光源（AreaLight），從一個很大的平面發射光線，而不是一個點。對效能要求略高，可以使用WebGL延遲渲染器
    12. 對光照有影響的材質：MeshPhongMaterial和MeshLambertMaterial

    13. 滑鼠作為 PC 端（移動端中的觸控）的主要互動方式，我們經常會通過它來選擇頁面上的元素。而對於 Three.js，它沒有類似 DOM 的層級關係，並且處於三維環境中，那麼我們則需要通過以下方式來判斷某物件是否被選中。

       * 基於螢幕上的點選位置建立一個 THREE.Vector3 向量。
 * 使用 vector.unproject 方法將螢幕上的點選位置轉換成 Three.js 場景中的座標。換句話說，就是將螢幕座標轉換成三維場景中的座標。
 * 建立 THREE.Raycaster。使用 THREE.Raycaster 可以向場景中發射光線。在下述案例中，從攝像機的位置（camera.position）向場景中滑鼠的點選位置發射光線。
 * 使用 raycaster.intersectObjects 方法來判斷指定的物件中哪些被該光線照射到的， 返回包含了所有被光線照射到的物件資訊的陣列（根據距離攝像機距離，由短到長排序）。陣列的子項的資訊包括有：

distance: 49.90470
    face: THREE.Face3
    faceIndex: 4
    object: THREE.Mesh
    point: THREE.Vector3

  1. 首先要知道動畫的實現原理，其實就是一個迴圈繪製．你要實現一個滑鼠移到繪圖區物體停止轉動，新增一個滑鼠事件監控滑鼠位置,然後停止動畫操作即可．

    1. THREE.Line幾何體不可以用普通材質覆蓋，只能用THREE》LineBasicMaterial或THREE.LineDashedMaterial
    2. OpenGL、WebGL、JS、H5聯絡：https://blog.csdn.net/vanessa…
    3. WebGL：https://webglfundamentals.org…
    4. 中文手冊：http://techbrood.com/threejs/…
    5. 入門詳解：https://segmentfault.com/a/11…
    6. 捕獲點選物件（Raycaster類）：https://blog.csdn.net/darkpro…://www.cnblogs.com/w-wanglei/p/6821036.html
    7. WebGL絕佳案例：https://segmentfault.com/a/11…
    8. 載入模型選中案例：http://127.0.0.1:8080/examples/#webgl_postprocessing_outline
    9. three.js 效能優化：https://chenjy1225.github.io/…
    10. OBJ檔案格式詳解：https://blog.csdn.net/szchtx/…
    11. Blender基本操作：https://blog.csdn.net/superli…://blog.csdn.net/bulademian/article/details/78623900
    12. 自適應窗體大小
window.addEventListener(`resize`, onResize, false)
function onResize () {
// 設定透視攝像機的長寬比
camera.aspect = window.innerWidth / window.innerHeight
// 攝像機的 position 和 target 是自動更新的，而 fov、aspect、near、far 的修改則需要重新計算投影矩陣（projection matrix）
camera.updateProjectionMatrix()
// 設定渲染器輸出的 canvas 的大小
renderer.setSize(window.innerWidth, window.innerHeight)
}

相關文章