threejs入門簡單例子
阿新 • • 發佈：2020-08-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> body{ margin: 0; overflow: hidden; } </style> <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script> </head> <body> <script> /** * 建立場景物件Scene */ var scene=new THREE.Scene(); /** * 建立網格模型 */ // var geometry=new THREE.SphereGeometry(60,40,40);//建立一個球體幾何物件 var geometry=new THREE.BoxGeometry(100,100,100);//建立一個立方體幾何物件Geometry var material=new THREE.MeshLambertMaterial({ color:0x0000ff });//材質物件Material var mesh=new THREE.Mesh(geometry,material);//網格模型物件Mesh scene.add(mesh);//網格模型新增到場景中 var geometry1=new THREE.SphereGeometry(60,40,40);//建立一個立方體幾何物件Geometry var material1=new THREE.MeshLambertMaterial({ color:0x00ff00 });//材質物件Material var mesh1=new THREE.Mesh(geometry1,material1);//網格模型物件Mesh mesh1.translateY(120); scene.add(mesh1);//網格模型新增到場景中 var geometry2=new THREE.CylinderGeometry( 50, 50, 100, 25 );//建立一個立方體幾何物件Geometry var material2=new THREE.MeshLambertMaterial({ color:0xff0000 });//材質物件Material var mesh2=new THREE.Mesh(geometry2,material2);//網格模型物件Mesh // mesh2.translateX(120); mesh2.position.set(120,0,0); scene.add(mesh2);//網格模型新增到場景中 //紅色代表 X 軸. 綠色代表 Y 軸. 藍色代表 Z 軸 var axesHelper = new THREE.AxesHelper( 250 ); scene.add( axesHelper ); /** * 光源設定 */ //點光源 var point=new THREE.PointLight(0xffffff); point.position.set(400,200,300);//電光源位置 scene.add(point);//點光源新增到場景中 //環境光 var ambient=new THREE.AmbientLight(0x444444); scene.add(ambient); // console.log(scene); // console.log(scene.children); /** * 相機設定 */ var width=window.innerWidth;//視窗寬度 var height=window.innerHeight;//視窗高度 var k=width/height;//視窗寬高比 var s=200;//三維場景顯示範圍控制係數，係數越大，顯示的範圍越大 //建立相機物件 var camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000); camera.position.set(200,300,200);//設定相機位置 camera.lookAt(scene.position);//設定相機方向(指向的場景物件) /** * 建立渲染器物件 */ var renderer=new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width,height);//設定渲染區域尺寸 renderer.setClearColor(0xb9d3ff,1);//設定背景顏色 document.body.appendChild(renderer.domElement);//body元素中插入canvas物件 //執行渲染操作 指定場景、相機作為引數 // renderer.render(scene,camera); //渲染函式 function render(){ renderer.render(scene,camera);//執行渲染操作 // mesh.rotateY(0.01);//每次繞Y軸旋轉0.01弧度 requestAnimationFrame(render);//請求再次執行渲染函式render，渲染下一幀 } render(); //建立空間物件 相機物件camera作為引數 控制元件可以監聽滑鼠的變化，改變相機物件的屬性 var controls=new THREE.OrbitControls(camera); //監聽滑鼠事件，觸發渲染函式，更新canvas畫布渲染效果 // controls.addEventListener("change",render); </script> </body> </html>