threejs是webgl的一個庫,通過它我們可以利用大量已有的api做出很好的3d圖形.
第一部分：html頁面框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>threejs</title> <script src="cdn.bootcss.com/jquery/3.1.1/core.js"></script> <!-- 引入jqury簡化js復雜的操作，可以引入，但不是必須的 --> <script src="cdn.bootcss.com/three.js/r83/three.js"></script> <!-- 引入threejs核心庫，必須的 --> <style> body{ margin:0; overflow: hidden; } /*這里設置margin:0; 和overflow:hidden; 可以保證移除所有的滾動條*/ </style> </head> <body> <div class="webgl_output"> </div> <script> $(function () { // here we run the there.js }); </script> </body> </html>
第二部分：Three.js中的坐標軸
我們要建立三位場景，那么一定是離不開坐標軸的。
創建一個場景非常的簡單，就是var scene = new THREE.Scene(); 而創建一個坐標軸就是用 var axes = new THREE.AxisHelper();
坐標軸的具體指向如下：
顯然，其中xy平面即為電腦屏幕的平面。這里的坐標軸和css3中的3d旋轉是一樣的。
第三部分：實例解析
最終效果如下：
源代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>threejs</title> <!-- <script src="http://cdn.bootcss.com/jquery/3.1.1/core.js"></script> --> <!-- 引入jqury簡化js復雜的操作，可以引入，但不是必須的 --> <script src="http://cdn.bootcss.com/three.js/r83/three.js"></script> <!-- 引入threejs核心庫，必須的 --> <style> body{ margin:0; overflow: hidden; } /*這里設置margin:0; 和overflow:hidden; 可以保證移除所有的滾動條*/ </style> </head> <body> <div class="webgl_output"> </div> <script> // $(function () { // here we run the there.js // 基礎工作 var scene = new THREE.Scene(); // 創建一個THREE的場景，場景就是我們最終看到的，也就是我們描繪三維圖圖形的地方，可以看出THREE類似一個對象，我們使用其下的方法 var camera = new THREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,0.1,1000); // 創建一個相機，雖然有場景，但是看不到啊，必須指定一個相機，通過相機我們可以看到場景的內容。 // 這里的55可以理解為舉例，值越大，我們看到的場景月 var renderer = new THREE.WebGLRenderer(); // 創建一個渲染器 renderer.setClearColor(0x111111); // 注意，之前的版本是setClearColorHex，現在只有setClearColor可以使用，可以去查看源碼 // 將scene的背景色設置為eeeeee renderer.setSize(window.innerWidth,window.innerHeight); // 設置scene的尺寸 // 這時，我們就已經創建了場景（買了一塊空地）、 一個相機（通過眼睛觀察這塊地）、一個渲染器（用戶施工的工具） // 創建一個坐標軸 var axes = new THREE.AxisHelper(30); // 這里的30，即創建出的坐標軸的相對長度 // 創建一個坐標軸 scene.add(axes); // 把坐標軸添加到場景中 // 創建一個二維平面 var planeGeometry = new THREE.PlaneGeometry(60,25,2,1); // 創建一個二維的平面幾何形狀（這是身體，還沒有靈魂），其寬為60，高20，而后面兩個參數卻幾乎沒有影響,即使不要也是可以的 var planeMaterial = new THREE.MeshBasicMaterial({color:0xff0000}); // 創建一個材質，顏色為紅色，這里便是幾何形狀的靈魂。 var plane = new THREE.Mesh(planeGeometry,planeMaterial); // 使用Mesh將創建的二維平面和材質結合起來 plane.rotation.x =-0.5*Math.PI; plane.rotation.y =-0.1*Math.PI; // 將平面沿着x軸旋轉-90度，這里的旋轉和CSS3中的3d旋轉是一樣的。 plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; //確定這個平面在坐標軸的位置 scene.add(plane); // 剛才它是一個孤魂野鬼，現在將之將平面置於場景中 // 創建一個方塊 var cubeGeometry = new THREE.CubeGeometry(4,4,4); // 創建一個方塊的幾何形狀 var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00,wireframe: true}); // 創建好一個方塊的材質 var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); // 把它的形體和它的靈魂相結合，這時他就是一個完整的人 cube.position.x = -4; cube.position.y = 10; cube.position.z = 15; // 同樣的，得指定它在坐標系中的位置。 scene.add(cube); //同上，創建好之后，它只是一個孤魂野鬼，必須把它加在這個場景中 // 創建一個球體 var sphereGeometry = new THREE.SphereGeometry(8,20,20); // 創建一個球體殼 var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff,wireframe:true}); // 創建一個球體的靈魂 var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); // 將形體和靈魂相結合 sphere.position.x = 20; sphere.position.y = 12; sphere.position.z = -20; // 指定球體的位置 scene.add(sphere); //將球體放在場景中 // 最開始我們確實創建了一個相機，但是並沒有將之放在場景中，所以我們是看不到的。 camera.position.x = -30; camera.position.y = 4; camera.position.z = 2; // 這樣就確定了其位置 camera.lookAt(scene.position); // 指定觀察的方位 var dom = document.querySelector(".webgl_output"); dom.append(renderer.domElement); // renderer是一個渲染器，將渲染器得到的dom添加到div中 // 將camera放在場景中，這樣就可以看到了 renderer.render(scene,camera); // }); </script> </body> </html> <!-- 注意點material不要拼錯了，16進制的是0x，而不是ox -->