學習three.js的第一個程序---源碼解析
目標：創建一個正方體
實例代碼：
<!DOCTYPE html><html><head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="js/three.js"></script></head><body> <script> //創建一個場景 var scene = new THREE.Scene(); //創建一個相機 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//(視眼角,縱橫比，相機允許物體的最近距離，相機允許物體的最遠距離）默認情況之下,相機的上方向為Y軸,右方向為X軸,向里為Z軸. //實例化一個渲染器 var renderer = new THREE.WebGLRenderer(); //渲染范圍 renderer.setSize(window.innerWidth, window.innerHeight); //把renderer加入到body中，render會創建一個canvas加入body中 document.body.appendChild(renderer.domElement); //創建立方體 var geometry = new THREE.CubeGeometry(1,1,1);//寬、高、深度 //設置材質 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); //將幾何形狀插入網格，并應用材料 var cube = new THREE.Mesh(geometry, material); //將立方體添加到場景中，默認坐標為(0,0,0) scene.add(cube); //移動相機的位置（避免相機和多維數據集重疊） camera.position.z = 5; //定義渲染 function render() { //循環動畫 requestAnimationFrame(render); //讓立方體旋轉 cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } //開始渲染 render(); </script></body></html>
總結：在網頁中渲染物體的三個必要組件---場景（scene）、相機（camera）和渲染器（renderer）
新聞熱點
疑難解答
