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 相关文章推荐
js修改input的type属性问题探讨
Oct 12 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
试用php中oci8扩展
2015/06/18 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python 实现链表实例代码
2017/04/07 Python
python解析含有重复key的json方法
2019/01/22 Python
Python流程控制常用工具详解
2020/02/24 Python
Python短信轰炸的代码
2020/03/25 Python
PyQt5实现画布小程序
2020/05/30 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
《故乡》教学反思
2014/04/10 职场文书
纠纷协议书
2014/04/16 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
大学生助学金感谢信
2015/01/21 职场文书
现场施工员岗位职责
2015/04/11 职场文书
地心历险记观后感
2015/06/15 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记