第三章 使用three.js加載blender生成的馬克杯模型
先看看效果圖，這是在firefox里面加載的
代碼如下：
1 var SCREEN_WIDTH = window.innerWidth, 2 SCREEN_HEIGHT = window.innerHeight, 3 windowHalfX = window.innerWidth / 2, 4 windowHalfY = window.innerHeight / 2, 5 container, camera, scene, loaded, 6 renderer, mouseX = 0, mouseY = 0; 7 8 //記錄鼠標位置在動畫中使用 9 document.addEventListener( 'mousemove', function (event) { 10 mouseX = ( event.clientX - windowHalfX ); 11 mouseY = ( event.clientY - windowHalfY ); 12 }, false ); 13 14 init(); 15 16 function init() { 17 container = document.createElement( 'div' ); 18 document.body.appendChild( container ); 19 20 //使用WebGL去渲染，如果用Canvas渲染，瀏覽器會不堪重負 21 renderer = new THREE.WebGLRenderer(); 22 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); 23 renderer.domElement.style.position = "relative"; 24 container.appendChild( renderer.domElement ); 25 26 //使用場景加載，就能夠利用blender建模時設置的相機和光源等，無需我們再定義 27 var loader = new THREE.SceneLoader(); 28 loader.load( "./cup.js", function( result ) { 29 loaded = result; 30 31 camera = loaded.currentCamera; 32 camera.aspect = window.innerWidth / window.innerHeight; 33 camera.updateProjectionMatrix(); 34 scene = loaded.scene; 35 renderer.setClearColor( loaded.bgColor, loaded.bgAlpha ); 36 animate(); 37 }); 38 } 39 40 //通過實時改變相機的位置達到動畫效果 41 function animate() { 42 requestAnimationFrame( animate ); 43 camera.position.x += ( mouseX - camera.position.x ) * 0.001; 44 camera.position.y += ( - mouseY - camera.position.y ) * 0.002; 45 camera.lookAt( scene.position ); 46 renderer.render( scene, camera ); 47 }
與之對應的html代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>three.js webgl - io - scene loader [blender]</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 7 <script src="http://mrdoob.github.com/three.js/build/three.min.js"></script> 8 </head> 9 10 <body> 11 <script> 12 ...... 13 ...... 14 </script> 15 </body> 16 </html>
其中cup.js是按照第一節所述，從blender中導出的js文件。這里我們需要加以注意的是，我們這里導出的文件是scen文件，包括攝像機、光源等參數的，點擊“Export/Three.js(.js)”后出現的面板上，需要注意這部分：
默認情況下“Scene”，“Lights”和“Cameras”是沒有勾選的，我們把它們都勾選上。
另外，請選用FireFox瀏覽器加載我們的html文件。因為這里使用了WebGl的render，而webGL默認是不能跨域訪問的，所以在Chrome里面如果沒做任何配置是不能加載本地的模型文件加以顯示的。當然來自服務器的文件是可以的。使用FireFox則不受這個限制。
至此教程完成了基本的3D模型的制作以及在瀏覽器端的加載。代碼來自於Three.js的例程，但特地做了極度的簡化，整個js代碼不到50行。在后續的教程中，我們將以此為基礎，針對不同的任務需求，結合Three.js的API來完成。