成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【Three.js】Three.js學(xué)習(xí)記錄

chanthuang / 3171人閱讀

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

先得擺出幾個關(guān)鍵詞:場景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。
然后我開始裝模作樣地解釋:

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

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

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

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

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

dat.GUI

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

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

一般來說不把環(huán)境光(AmbientLight)作為場景中的唯一光源

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

點光源(PointLight)照所有方向發(fā)射光線且不會產(chǎn)生投影,類似于夜空中的照明彈

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

方向光/平行光(DirectinaLight):模擬太陽光源,所有光線相互平行,不會像聚光燈那樣離目標(biāo)越遠(yuǎn)越暗淡,和聚光燈光源有很多相同屬性。

兩種特殊光源:半球光光源(HemisphereLight),為室外場景創(chuàng)建更加自然的光照效果;平面光光源(AreaLight),從一個很大的平面發(fā)射光線,而不是一個點。對性能要求略高,可以使用WebGL延遲渲染器

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

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

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

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

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

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

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

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

中文手冊:http://techbrood.com/threejs/...

入門詳解:https://segmentfault.com/a/11...

捕獲點擊對象(Raycaster類):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ī)的長寬比
camera.aspect = window.innerWidth / window.innerHeight
// 攝像機(jī)的 position 和 target 是自動更新的,而 fov、aspect、near、far 的修改則需要重新計算投影矩陣(projection matrix)
camera.updateProjectionMatrix()
// 設(shè)置渲染器輸出的 canvas 的大小
renderer.setSize(window.innerWidth, window.innerHeight)
}


文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/101111.html

相關(guān)文章

  • Three.jsThree.js學(xué)習(xí)記錄

    摘要:上帝覺得缺少了些生氣,便用泥巴捏了一個小人兒,不叫亞當(dāng),她叫小芳。接下來預(yù)先恭喜你,你可以成為這網(wǎng)頁世界的一個小上帝。使用可以向場景中發(fā)射光線。在下述案例中,從攝像機(jī)的位置向場景中鼠標(biāo)的點擊位置發(fā)射光線。 先得擺出幾個關(guān)鍵詞:場景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。然后我開始裝模作樣地解釋: 上帝說,要有場景!于是就有了場景,場景去納這萬事萬物。 上帝說,要有光!于是就有了光...

    李濤 評論0 收藏0
  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL:打開網(wǎng)頁看大片

    摘要:在文末,我會附上一個可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一,它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0
  • three.js 入門詳解(二)

    摘要:首先,下載并在的中使用然后,我們需要準(zhǔn)備一個模型,在函數(shù)中,創(chuàng)建變量,用于導(dǎo)入模型導(dǎo)入模型的時候,接受兩個參數(shù),第一個表示模型路徑,第二個表示完成導(dǎo)入后的回調(diào)函數(shù),一般我們需要在這個回調(diào)函數(shù)中將導(dǎo)入的模型添加到場景中。 9. 動畫 在本章之前,所有畫面都是靜止的,本章將介紹如果使用Three.js進(jìn)行動態(tài)畫面的渲染。此外,將會介紹一個Three.js作者寫的另外一個庫,用來觀測每秒幀數(shù)...

    G9YH 評論0 收藏0

發(fā)表評論

0條評論

chanthuang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<