three.js的世界觀

const mesh = new THREE.Mesh(geometry, material); return mesh; };. 除了scene以外，還有另一樣東西叫做camera，camera指的是一個控制畫布觀看視角 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritethree.js的世界觀前陣子有前端前輩在讀書會上分享了threeJS，去年就曾經聽人提過，正巧最近有段空閒時間就來玩一下。

在這過程之中其實滿suffer的，網路上實際運用threeJS的分享文章並不多，部分分享又有些老舊，另外如果要做出酷炫的效果對數學也要有一定的瞭解程度，不過網路上也有不少好用的JSfunction可供參考，那我們就開始吧！在開始之前我想先稍微解釋一下threeJS的概念，在threeJS的世界觀中，所有的東西都是畫在一個畫布(scene)上，畫布上的任何東西都是一個物件。

例如：光線(AmbientLight,DirectionalLight,etc)3D物件(Mesh,Line,Points,etc)當然你也可以把一些會需要被一起控制的東西包在一個空的3D物件(Object3D)裡面以增加效能。

例如：constscene=newTHREE.Scene();constobj3D=newTHREE.Object3D();//對obj3D做定位obj3D.position.x=0;obj3D.position.y=0;obj3D.position.z=0;scene.add(obj3D);constmesh=createMesh();obj3D.add(mesh);//==>mesh也會共用obj3D的定位設定大部分的3D物件都由geometry跟material組成，geometry是物件的幾何形狀(eg,立方體,球體,或是其他由vector組合而成幾何圖形)，material指的是物件要以何種方式呈現(appearance)，最後再以object(Mesh,Line,Points,etc)組合起來，例如：constcreateMesh=()=>{constgeometry=newTHREE.BoxBufferGeometry(1,1,1);constmaterial=newTHREE.MeshBasicMaterial({color:0xffff00});constmesh=newTHREE.Mesh(geometry,material);returnmesh;};除了scene以外，還有另一樣東西叫做camera，camera指的是一個控制畫布觀看視角的controller，常用到的是以下兩種：PerspectiveCamera：模擬實際人眼效果，距離近的物體會較大。

OrthographicCamera：物體大小不受距離影響，維持原先定義的大小。

有了scene跟camera之後，就可以進行render了，因為任何畫布上的動畫及效果改變，均是需要透過不斷的render來達成，所以當你的JavaScriptfunction執行的時間超過browser畫面重新render的時間(16ms)，或是剛好在每16ms的變化點上時，就有可能會造成畫面的閃爍，導致較差的使用者體驗，所以我們會在這裡使用requestAnimationFrame去更新畫面：constrender=()=>{requestAnimationFrame(render);cube.rotation.x+=0.1;cube.rotation.y+=0.1;renderer.render(scene,camera);};render();以上幾點，就是簡單介紹threeJS的幾項重點及概念，下一篇文章會開始介紹如何用threeJS畫出你的第一顆3D地球。

--Morefrom狗狗Follow前端工程師|對前端開發充滿熱情，在前端打滾了六年，決定開始將開發時遇到的問題及踩到的雷記錄下來，擅長網頁跨platform及browser的問題處理Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstarted狗狗60Followers前端工程師|對前端開發充滿熱情，在前端打滾了六年，決定開始將開發時遇到的問題及踩到的雷記錄下來，擅長網頁跨platform及browser的問題處理FollowMorefromMediumDhrumilLimbadScratchingthesurface;ShadersandWebGL.OleksandrPopovWebGLGrimReaperdemonobodyHowtomarkupaWebGLPanoramaLeeMartinBuildinganInterDimensionalVideoPlayerforLordHuronHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable