【Three.js】Three.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
15. 首先要知道動畫的實現原理,其實就是一個循環繪製.你要實現一個鼠標移到繪圖區物體停止轉動,添加一個鼠標事件監控鼠標位置,然後停止動畫操作即可.
16. THREE.Line幾何體不可以用普通材質覆蓋,只能用THREE》LineBasicMaterial或THREE.LineDashedMaterial
17. OpenGL、WebGL、JS、H5聯繫:https://blog.csdn.net/vanessary2016/article/details/51275771
18. WebGL:https://webglfundamentals.org/webgl/lessons/zh_cn/
19. 中文手冊:http://techbrood.com/threejs/docs/#參考手冊/相機(Cameras)/遠景相機(PerspectiveCamera)
20. 入門詳解:https://segmentfault.com/a/1190000012238576#articleHeader28
21. 捕獲點擊對象(Raycaster類):https://blog.csdn.net/darkproc/article/details/80015901||http://www.cnblogs.com/w-wanglei/p/6821036.html
22. WebGL絕佳案例:https://segmentfault.com/a/1190000003863028#articleHeader16
23. 加載模型選中案例:http://127.0.0.1:8080/examples/#webgl_postprocessing_outline
24. three.js 性能優化:https://chenjy1225.github.io/2016/09/27/optimize-three-js/
25. OBJ文件格式詳解:https://blog.csdn.net/szchtx/article/details/8628265
26. Blender基本操作:https://blog.csdn.net/superlinmeng/article/details/52473043||https://blog.csdn.net/bulademian/article/details/78623900
27. 自適應窗體大小

 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)
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章