three.js实现3D视野缩放效果


Posted in Javascript onNovember 16, 2017

首先,不再废话了,什么是three.js,是干什么的,知道的就是知道,不知道的就百度吧。

小编为大家推荐一篇:Three.js快速入门教程

昨儿发现three.js中的3D视野的缩小和放大效果可以用照相机的远近焦来实现。

three.js实现3D视野缩放效果

缩小后:

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();
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
详解React 在服务端渲染的实现
Nov 16 #Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 #Javascript
You might like
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP CURL使用详解
2019/03/21 PHP
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python 画出来六维图
2019/07/26 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
土木工程应届生求职信
2013/10/31 职场文书
球队口号
2014/06/18 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
运动会广播稿300字
2015/08/19 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Python基础 括号()[]{}的详解
2021/11/07 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python