<!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>