本文主要為大家詳細介紹了three.js實現3D視野縮放效果,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。
首先,不再廢話了,什麼是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(); }相關推薦:
以上是three.js3D視野縮放效果實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!