1、搭建一個本地服務器。
2、下載three.js庫。https://github.com/mrdoob/three.js/
準備好前面的操作後，接下來是創建一個項目的過程。
第一步：新建一個項目文件夾“Threejs”
第二步：在Threejs文件夾內新建一個html文件（index.html）。該文件是通過瀏覽器進入遊戲的入口。
第三步：在Threejs文件夾內新建一個libs文件夾，用來存放three.js庫和需要用到的其他庫。
第四步：在Threejs文件夾內新建一個images文件夾，用來存放需要素材。
第五步：在Threejs文件夾內新建一個js文件夾，用來存放我們開發項目寫的腳本。
html文件：
<!DOCTYPE html>
<html>
<head>
<title>three.js</title>
<script src="libs/three.js"></script>
<script src="js/main.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script>
</script>
<body>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
下面開始寫腳本。在js文件夾內新建一個main.js文件：
var renderer;
var scene;
var camera;
function init() {
scene = new THREE.Scene();//場景
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相機
renderer = new THREE.WebGLRenderer();//渲染
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
window.onload = init;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
代碼分析：
init()函數是我們整個項目的入口，類似我們平時編程時的main函數。
上面的腳本中還包含scene; camera; renderer；分別是場景，相機，渲染器。每個項目必須得有這三樣才能把顯示模型顯示在屏幕上。
scene：像電影上的場景，類似容器包含各種我們能看到的精靈、地圖等。後面還會講到燈光等。
camera:通過camera，我們才能看到場景上的畫面，類似我們的眼睛，有視角等。
renderer:渲染器，把3D空間上的事物渲染到一個2D的平面。在屏幕上顯示場景上的事物。
運行結果：
一片黑嗚嗚的。因爲我們還沒向場景添加任何東西。
我們可以向場景中添加一些元素。例如添加一個正方體，效果如下：
