Getting started

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

在開始之前，我們需要有放置程式碼的地方。將下列的html檔案儲存在你的電腦之中、並複製一份three.min.js至js/的目錄之下，以瀏覽器開啟樣就行了。接下來只要把程式碼放在<script>標籤之中即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>a
        <script src="js/three.min.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

Creating the scene

以three.js來顯示任何東西，有三個必要的東西：

  1. scene
  2. camera
  3. renderer

在使用上我們一開始在Script中打入的就是以下這幾行：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.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

results matching ""

    No results matching ""