通過Threejs基礎學習――修改版知道創建一個相機的相關知識點
var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );
視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大
縱橫比：aspect (3d物體的寬/高比例)
相機離視體積最近的距離：near
相機離視體積最遠的距離：far
其中fov視野角(拍攝距離)越大，場景中的物體越小。fov視野角(拍攝距離)越小，場景中的物體越大。
透視相機(近大遠小) PerspectiveCamera
//透視照相機參數設置var fov = 45,//拍攝距離 視野角值越大，場景中的物體越小 near = 1,//相機離視體積最近的距離 far = 1000,//相機離視體積最遠的距離 aspect = window.innerWidth / window.innerHeight; //縱橫比var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);
改變fov的值，并更新這個照相機
//改變fov值，并更新場景的渲染camera.fov = fov;camera.updateProjectionMatrix();renderer.render(scene, camera); //updateinfo();
鼠標上下滑輪實現放大縮小效果 代碼如下
//監聽鼠標滾動事件canvas.addEventListener('mousewheel', mousewheel, false);//鼠標滑輪-鼠標上下滑輪實現放大縮小效果function mousewheel(e) { e.preventDefault(); //e.stopPropagation(); if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件 if (e.wheelDelta > 0) { //當滑輪向上滾動時 fov -= (near < fov ? 1 : 0); } if (e.wheelDelta < 0) { //當滑輪向下滾動時 fov += (fov < far ? 1 : 0); } } else if (e.detail) { //Firefox滑輪事件 if (e.detail > 0) { //當滑輪向上滾動時 fov -= 1; } if (e.detail < 0) { //當滑輪向下滾動時 fov += 1; } } //改變fov值，并更新場景的渲染 camera.fov = fov; camera.updateProjectionMatrix(); renderer.render(scene, camera); //updateinfo();}實現效果完整代碼 標注具體案例為個人原創
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>threejs中3D視野的縮放</title> <style> #canvas-frame { width: 100%; height: 600px; } </style> </head> <body onload="threeStart()"> <div id="canvas-frame" ></div> </body> <script type="text/javascript" src="./lib/three.js" ></script> <script type="text/javascript"> var renderer, //渲染器 width = document.getElementById('canvas-frame').clientWidth, //畫布寬 height = document.getElementById('canvas-frame').clientHeight; //畫布高 //照相機配置 var fov = 45,//拍攝距離 視野角值越大，場景中的物體越小 near = 1,//最小范圍 far = 1000;//最大范圍 //DOM對象 var canvas = null; //初始化DOM對象 function initDOM(){ canvas = document.getElementById("canvas-frame"); } //初始化渲染器 function initThree(){ renderer = new THREE.WebGLRenderer({ antialias : true //canvas: document.getElementById('canvas-frame') }); renderer.setSize(width, height); renderer.setClearColor(0xFFFFFF, 1.0); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } //初始化場景 var scene; function initScene(){ scene = new THREE.Scene(); } var camera; function initCamera() { //透視相機 camera = new THREE.PerspectiveCamera(fov, width/height , near, far); camera.position.x = 150; camera.position.y = 150; camera.position.z =250; camera.up.x = 0; camera.up.y = 1; //相機朝向--相機上方為y軸 camera.up.z = 0; camera.lookAt({ //相機的中心點 x : 0, y : 0, z : 0 }); } function initLight(){ // light--這里使用環境光 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/ //light.position.set(600, 1000, 800); /* var light = new THREE.AmbientLight(0xffffff); //模擬漫反射光源 light.position.set(600, 1000, 800); //使用Ambient Light時可以忽略方向和角度，只考慮光源的位置 scene.add(light);*/ } function initObject(){ //初始化對象 //初始化地板 initFloor(); } function initGrid(){ //輔助網格 var helper = new THREE.GridHelper( 1000, 50 ); helper.setColors( 0x0000ff, 0x808080 ); scene.add( helper ); } function initFloor(){ //創建一個立方體 var geometry = new THREE.BoxGeometry(80, 20, 80); for ( var i = 0; i < geometry.faces.length; i += 2 ) { var hex = Math.random() * 0xffffff; geometry.faces[ i ].color.setHex( hex ); geometry.faces[ i + 1 ].color.setHex( hex ); } var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} ); //將material材料添加到幾何體geometry var mesh = new THREE.Mesh(geometry, material); mesh.position = new THREE.Vector3(0,0,0); scene.add(mesh); } //初始化頁面加載 function threeStart(){ //初始化DOM對象 initDOM(); //初始化渲染器 initThree(); //初始化場景 initScene(); //初始透視化相機 initCamera(); //初始化光源 initLight(); //模型對象 initObject(); //初始化網格輔助線 initGrid(); //渲染 renderer.render(scene, camera); //實時動畫 //animation(); //監聽鼠標滾動事件 canvas.addEventListener('mousewheel', mousewheel, false); } function animation(){ //相機圍繞y軸旋轉，并且保持場景中的物體一直再相機的視野中 //實時渲染成像 var timer = Date.now()*0.0001; camera.position.x = Math.cos(timer)*100; camera.position.z = Math.sin(timer)*100; camera.lookAt(scene.position); renderer.render(scene, camera); requestAnimationFrame(animation); } //鼠標滑輪-鼠標上下滑輪實現放大縮小效果 function mousewheel(e) { e.preventDefault(); //e.stopPropagation(); if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件 if (e.wheelDelta > 0) { //當滑輪向上滾動時 fov -= (near < fov ? 1 : 0); } if (e.wheelDelta < 0) { //當滑輪向下滾動時 fov += (fov < far ? 1 : 0); } } else if (e.detail) { //Firefox滑輪事件 if (e.detail > 0) { //當滑輪向上滾動時 fov -= 1; } if (e.detail < 0) { //當滑輪向下滾動時 fov += 1; } } console.info('camera.fov:'+camera.fov); console.info('camera.x:'+camera.position.x); console.info('camera.y:'+camera.position.y); console.info('camera.z:'+camera.position.z); //改變fov值，并更新場景的渲染 camera.fov = fov; camera.updateProjectionMatrix(); renderer.render(scene, camera); //updateinfo(); } </script></html>文章縮放來源：three.js實現3D視野縮放效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
