Getting Start · Threejs教學分享 - jim159093

Getting started. 在此章節稍微介紹Three.js的概念，以及基本的實作方式。

在開始之前，我們需要有放置程式碼的地方。

將下列的html檔案儲存在你的電腦之中、並複製一 ... Threejs教學分享 Introduction GettingStart scene場景 Camera攝影機 Renderer渲染器 Object3D Geometry幾何體 Material材質 Mesh網面 Light光源 Three.js基礎入門 實用的工具-Editor dat.GUI Textures Geometry Material WebGLRenderer Matrixtransformations Shader PoweredbyGitBook GettingStart Gettingstarted 在此章節稍微介紹Three.js的概念，以及基本的實作方式。

在開始之前，我們需要有放置程式碼的地方。

將下列的html檔案儲存在你的電腦之中、並複製一份three.min.js至js/的目錄之下，以瀏覽器開啟樣就行了。

接下來只要把程式碼放在

Creatingthescene 以three.js來顯示任何東西，有三個必要的東西： scene camera renderer 在使用上我們一開始在Script中打入的就是以下這幾行： varscene=newTHREE.Scene(); varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); varrenderer=newTHREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); 如果有碰過unity的人大概會有點概念，上面個別為scene場景，camera攝影機，renderer渲染器，總之要加上這些你才能在你的輸出看到物件。

在建立整個創作的步驟通常是建立好以上三個物件，再將Object3D物件加入場景之中，並用不同的函式控制以呈現我們的創作。

在以下的子章節中將以一些例子介紹這些概念。

參考資料 https://aerotwist.com/tutorials/getting-started-with-three-js/ http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene resultsmatching"" Noresultsmatching""