溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
首先，不再廢話了，什么是three.js，是干什么的，知道的就是知道，不知道的就百度吧。
小編為大家推薦一篇：Three.js快速入門教程
昨兒發現three.js中的3D視野的縮小和放大效果可以用照相機的遠近焦來實現。
縮小后：
這里采用的是透視照相機:
//照相機配置 var fov = 40;//拍攝距離 var near = 1;//最小范圍 var far = 1000;//最大范圍 var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
在這里可以改變fov的值，并更新這個照相機就可以了。
camera.fov = fov;//fov是變量哦 camera.updateProjectionMatrix(); renderer.render(scene, camera);
另外：咱們都是習慣用鼠標上下滑輪實現放大縮小效果，so看代碼
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;
}
}
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
