標籤：螢幕 uri tail init html 原理 spec ide tcl
開發環境Three.js是一個JavaScript庫，所以，你可以使用平時開發JavaScript應用的環境開發Three.js應用。如果你沒什麼偏好的話，我會推薦Komodo IDE。
調試建議使用Chrome或者Firefox瀏覽器。如果你使用的是Firefox，那麼Firebug會是你必不可少的外掛程式；如果你使用的是Chrome，那麼直接使用控制台調試即可。這些和JavaScript的調試是相同的，因此本書不作進一步展開。
下載首先，我們需要在Github下載Three.js的代碼。
在https://github.com/mrdoob/three.js/tree/master/build可以看到three.js和three.min.js兩個檔案，前者是沒有經過代碼壓縮的，因此適用於調試階段；後者是經過代碼壓縮的，調試起來會不太方便，但檔案較小，適用於最終的發布版。儲存一個檔案到本地，這裡我們可以選擇three.js。
在使用Three.js之前，我們需要在HTML檔案中引用該檔案：
<script type="text/javascript" src="three.js"></script>
然後就能通過全域變數THREE訪問到所有屬性和方法了。
接下來，我們終於要真正使用Three.js了！
首先，在HTML的<head>部分，需要聲明外部檔案three.js。
<head> <script type="text/javascript" src="js/three.js"></script></head><body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
在JavaScript代碼中定義一個init函數，在HTML載入完後執行：
一個典型的Three.js程式至少要包括渲染器（Renderer）、情境（Scene）、照相機（Camera），以及你在情境中建立的物體。這些話題將在後面幾章中進一步展開，這裡我們將介紹如何快速地使用這些東西。
渲染器（Renderer）渲染器將和Canvas元素進行綁定，如果之前在HTML中手動定義了id為mainCanvas的Canvas元素，那麼Renderer可以這樣寫：
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(‘mainCanvas‘)});
而如果想要Three.js產生Canvas元素，在HTML中就不需要定義Canvas元素，在JavaScript代碼中可以這樣寫：
var renderer = new THREE.WebGLRenderer();renderer.setSize(400, 300);document.getElementsByTagName(‘body‘)[0].appendChild(renderer.domElement);
上面代碼的第二行表示設定Canvas的寬400像素，高300像素。第三行將渲染器對應的Canvas元素添加到<body>中。
我們可以使用下面的代碼將背景色（用於清除畫面的顏色）設定為黑色：threejs使用的0x顏色
renderer.setClearColor(0x000000);情境（Scene）
在Three.js中添加的物體都是添加到情境中的，因此它相當於一個大容器。一般說，情境裡沒有很複雜的操作，在程式最開始的時候進行執行個體化，然後將物體添加到情境中即可。
var scene = new THREE.Scene();照相機（Camera）
在介紹照相機設定前，我們先來簡單瞭解下座標系。WebGL和Three.js使用的座標系是右手座標系，看起來就是這樣的：
這裡，我們定義了一個透視投影的照相機，具體原理將在下一章中展開。
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);camera.position.set(0, 0, 5);scene.add(camera);長方體
我們要建立一個x、y、z方向長度分別為1、2、3的長方體，並將其設定為紅色。
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshBasicMaterial({ color: 0xff0000 }));scene.add(cube);
那麼這裡長度為1的單位是什麼呢？這裡的長度是在物體座標系中的，其單位與螢幕解析度等無關，簡單地說，它就是一個虛擬空間的座標系，1代表多少並沒有實際的意義，而重要的是相對長度。
在定義了情境中的物體，設定好的照相機之後，渲染器就知道如何渲染出二維的結果了。這時候，我們只需要調用渲染器的渲染函數，就能使其渲染一次了。
renderer.render(scene, camera);完整代碼
function init() { // renderer var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(‘mainCanvas‘) }); renderer.setClearColor(0x000000); // black // scene var scene = new THREE.Scene(); // camera var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); camera.position.set(0, 0, 5); scene.add(camera); // a cube in the scene var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); scene.add(cube); // render renderer.render(scene, camera);}
附上連結http://runjs.cn/detail/xtj5fstx
可能有的同學說看起來不像一個立方體
那現在調整一下參數,現在是不是看的出來了
// camera var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); camera.position.set(4, 4, 5); camera.lookAt(new THREE.Vector3(0, 3, 0)); scene.add(camera); // a cube in the scene var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }) );
【webGL】threejs入門 ---建立一個簡單立方體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
