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 相关文章推荐
菜鸟javascript基础资料整理2
Dec 06 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JS扩展方法实例分析
Apr 15 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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
第七节--类的静态成员
2006/11/16 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php对数组排序的简单实例
2013/12/25 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python快速查找算法应用实例
2014/09/26 Python
Python 中的with关键字使用详解
2016/09/11 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
浅谈Python3中print函数的换行
2020/08/05 Python
HTTP状态码详解
2021/03/18 杂记
劳资专员岗位职责
2013/12/27 职场文书
党支部综合考察材料
2014/05/19 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
redis限流的实际应用
2021/04/24 Redis
Go遍历struct,map,slice的实现
2021/06/13 Golang
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技