three.js中3D視野的縮放實現代碼

來源：懂視網責編：小采時間：2020-11-27 22:25:42

three.js中3D視野的縮放實現代碼

three.js中3D視野的縮放實現代碼:通過Threejs基礎學習——修改版知道創建一個相機的相關知識點 var camera = new THREE.PerspectiveCamera( fov, aspect , near,far ); 視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大縱橫比：aspe

推薦度：

點擊下載本文 文檔為doc格式

導讀three.js中3D視野的縮放實現代碼:通過Threejs基礎學習——修改版知道創建一個相機的相關知識點 var camera = new THREE.PerspectiveCamera( fov, aspect , near,far ); 視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大縱橫比：aspe

通過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視野縮放效果

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

three.js中3D視野的縮放實現代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現代碼視野

熱門焦點

three.js中3D視野的縮放實現代碼

three.js中3D視野的縮放實現代碼

three.js中3D視野的縮放實現代碼

最新推薦

猜你喜歡

熱門推薦