ThreeJS入門

在javascript中使用Three.js設計而且實現3D場景是一個頗有意思的事情，由於在瀏覽器中就可以渲染出3D場景，很是簡單和輕便。接下來就總結如下我學習Three.js過程當中的心得。

1 創建基本場景 在Three.js中有三要素：場景、攝像機和渲染器，只有以上三者結合才能渲染出可見的內容。固然在這以前你須要先下載Three.js文件，直接百度搜索Three.js到官網下載便可，下載完成以後新建一個html文件而且引入Three.js便可。一個最基本的使用Three.js的html文件應該是這樣子的：

dawn1 3D body { margin: 0; } canvas { width: 100%; height: 100%; } 咱們打開瀏覽器看一下：

哦天哪，發生了什麼，瀏覽器上黑乎乎一片什麼都沒有啊。

別急，這是由於咱們只是設置了三要素，但並無渲染，只有使用渲染器scene和camera進行渲染以後才能看到內容，在scene.add( cube ); 後面添加一句：

renderer.render(scene, camera); 再試試效果如何：

快看，如今屏幕中出現了一個正方形，這正是咱們所期待的！

可是，咱們使用的Three.js不該該是三維場景嗎，爲何如今只有平面效果？不急，接下來咱們使用requestAnimationFrame讓畫面動起來！

2 讓畫面動起來 將上一步中最後一句代碼：

renderer.render(scene, camera); 替換爲：

// 動畫 function animate() {

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );

requestAnimationFrame( animate );
複製代碼

} animate() 再到瀏覽器看看效果，若是沒有什麼問題的話，如今你所看到的畫面應該是一個旋轉的立方體：

不過我對這個效果仍是不滿意，它看起來像是一個 正方體，但缺乏了陰影燈光效果，接下來咱們添加燈光效果。

3 添加光效 使用點光源THREE.SpotLight，代碼以下：

// 光源 var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -40, 60, -10 ); scene.add( spotLight ); // 光源 end 同時將cube的材質從MeshBasicMaterial換爲MeshLamberMaterial，由於最基本的MeshBasicMaterial材質對光源不會有任何反應。

// 物體 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); // 物體 end

4 添加陰影效果 爲了渲染陰影效果，須要對代碼作以下修改：

renderer.setClearColor(new THREE.Color(0x000000, 1.0)); renderer.shadowMap.enabled = true; 同時要給立方體設置投射陰影：

cube.castShadow = true; 設置地面接受陰影：

plane.receiveShadow = true; 設置spotLight投射陰影：

spotLight.castShadow = true; 爲了添加陰影效果，咱們須要設置一個平面來接受陰影，所以從新建立一個場景，源碼以下：

dawn1 3D body { margin: 0; } canvas { width: 100%; height: 100%; }

渲染結果以下圖：

好多色調都是須要本身去慢慢調的，反正調的本身舒服就好啦。 因此嘛，Come on together！