摘要：上帝覺(jué)得缺少了些生氣，便用泥巴捏了一個(gè)小人兒，不叫亞當(dāng)，她叫小芳。接下來(lái)預(yù)先恭喜你，你可以成為這網(wǎng)頁(yè)世界的一個(gè)小上帝。使用可以向場(chǎng)景中發(fā)射光線(xiàn)。在下述案例中，從攝像機(jī)的位置向場(chǎng)景中鼠標(biāo)的點(diǎn)擊位置發(fā)射光線(xiàn)。

先得擺出幾個(gè)關(guān)鍵詞：場(chǎng)景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。
然后我開(kāi)始裝模作樣地解釋?zhuān)?/p>

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

【此段轉(zhuǎn)自https://juejin.im/post/5b0ace... 】

相機(jī)和軌跡球（trackball）的綁定

導(dǎo)入obj 和mtl文件時(shí) 紋理問(wèn)題，是否可以在3ds max 時(shí)預(yù)先進(jìn)行處理

obj文件導(dǎo)入 Three.js中旋轉(zhuǎn)點(diǎn)的設(shè)定

dat.GUI

Three.js中有兩種材質(zhì)可以對(duì)光源產(chǎn)生反應(yīng)：MeshLamberMaterial和 MeshPhoneMaterial

渲染陰影需要在渲染器、每一個(gè)物體以及每一個(gè)光源上打開(kāi)。生成陰影：renderer.shadowMapEnabled=true;只修改此處不會(huì)有區(qū)別，還要明確那個(gè)物體需要陰影：plane.receiveShadow = true;cube.castShadow = true;sphere.castShadow = true;

一般來(lái)說(shuō)不把環(huán)境光（AmbientLight）作為場(chǎng)景中的唯一光源

環(huán)境光光源可以附加到場(chǎng)景中的每一個(gè)物體上，沒(méi)有位置的概念，主要用來(lái)優(yōu)化硬生生的 顏色和陰影

點(diǎn)光源（PointLight）照所有方向發(fā)射光線(xiàn)且不會(huì)產(chǎn)生投影，類(lèi)似于夜空中的照明彈

聚光燈光源（SpotLight），發(fā)射出的光線(xiàn)是一個(gè)錐形，可以配置隨著距離遠(yuǎn)近光線(xiàn)強(qiáng)度的衰減且可設(shè)置陰影

方向光/平行光（DirectinaLight）：模擬太陽(yáng)光源，所有光線(xiàn)相互平行，不會(huì)像聚光燈那樣離目標(biāo)越遠(yuǎn)越暗淡，和聚光燈光源有很多相同屬性。

兩種特殊光源：半球光光源（HemisphereLight），為室外場(chǎng)景創(chuàng)建更加自然的光照效果；平面光光源（AreaLight），從一個(gè)很大的平面發(fā)射光線(xiàn)，而不是一個(gè)點(diǎn)。對(duì)性能要求略高，可以使用WebGL延遲渲染器

對(duì)光照有影響的材質(zhì)：MeshPhongMaterial和MeshLambertMaterial

鼠標(biāo)作為 PC 端（移動(dòng)端中的觸摸）的主要交互方式，我們經(jīng)常會(huì)通過(guò)它來(lái)選擇頁(yè)面上的元素。而對(duì)于 Three.js，它沒(méi)有類(lèi)似 DOM 的層級(jí)關(guān)系，并且處于三維環(huán)境中，那么我們則需要通過(guò)以下方式來(lái)判斷某對(duì)象是否被選中。

 * 基于屏幕上的點(diǎn)擊位置創(chuàng)建一個(gè) THREE.Vector3 向量。
 * 使用 vector.unproject 方法將屏幕上的點(diǎn)擊位置轉(zhuǎn)換成 Three.js 場(chǎng)景中的坐標(biāo)。換句話(huà)說(shuō)，就是將屏幕坐標(biāo)轉(zhuǎn)換成三維場(chǎng)景中的坐標(biāo)。
 * 創(chuàng)建 THREE.Raycaster。使用 THREE.Raycaster 可以向場(chǎng)景中發(fā)射光線(xiàn)。在下述案例中，從攝像機(jī)的位置（camera.position）向場(chǎng)景中鼠標(biāo)的點(diǎn)擊位置發(fā)射光線(xiàn)。
 * 使用 raycaster.intersectObjects 方法來(lái)判斷指定的對(duì)象中哪些被該光線(xiàn)照射到的， 返回包含了所有被光線(xiàn)照射到的對(duì)象信息的數(shù)組（根據(jù)距離攝像機(jī)距離，由短到長(zhǎng)排序）。數(shù)組的子項(xiàng)的信息包括有：

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

首先要知道動(dòng)畫(huà)的實(shí)現(xiàn)原理，其實(shí)就是一個(gè)循環(huán)繪制．你要實(shí)現(xiàn)一個(gè)鼠標(biāo)移到繪圖區(qū)物體停止轉(zhuǎn)動(dòng)，添加一個(gè)鼠標(biāo)事件監(jiān)控鼠標(biāo)位置,然后停止動(dòng)畫(huà)操作即可．

THREE.Line幾何體不可以用普通材質(zhì)覆蓋，只能用THREE》LineBasicMaterial或THREE.LineDashedMaterial

OpenGL、WebGL、JS、H5聯(lián)系：https://blog.csdn.net/vanessa...

WebGL：https://webglfundamentals.org...

中文手冊(cè)：http://techbrood.com/threejs/...

入門(mén)詳解：https://segmentfault.com/a/11...

捕獲點(diǎn)擊對(duì)象（Raycaster類(lèi)）：https://blog.csdn.net/darkpro...://www.cnblogs.com/w-wanglei/p/6821036.html

WebGL絕佳案例：https://segmentfault.com/a/11...

加載模型選中案例：http://127.0.0.1:8080/examples/#webgl_postprocessing_outline

three.js 性能優(yōu)化：https://chenjy1225.github.io/...

OBJ文件格式詳解：https://blog.csdn.net/szchtx/...

Blender基本操作：https://blog.csdn.net/superli...://blog.csdn.net/bulademian/article/details/78623900

自適應(yīng)窗體大小

window.addEventListener("resize", onResize, false)
function onResize () {
// 設(shè)置透視攝像機(jī)的長(zhǎng)寬比
camera.aspect = window.innerWidth / window.innerHeight
// 攝像機(jī)的 position 和 target 是自動(dòng)更新的，而 fov、aspect、near、far 的修改則需要重新計(jì)算投影矩陣（projection matrix）
camera.updateProjectionMatrix()
// 設(shè)置渲染器輸出的 canvas 的大小
renderer.setSize(window.innerWidth, window.innerHeight)
}