Three.js实现滚轮放大展现不同的模型

在做一个飞机可视化项目...真的垃圾...软件开发交给专业的开发工程师不行吗???

修改OrbitControls.js的源码

不想修改, 但是不懂js是如何继承...无奈出此下策

在OrbitControls.js的源码中增加如下代码

this.getSpherical = function () {

	return spherical;

};

OrbitControls在透视相机(PerspectiveCamera)的控制原理

具体怎么实现看源码, 但对于此案例, 只要知道OrbitControls通过球坐标系的半径(.radius)的数值来放大缩小视野

具体实现

  1. 给对象分层(layers) 可看我上篇博文

  2. 通过radius数值作为触发条件

    var controlsRadius = controls.getSpherical().radius;
    
if (controlsRadius !== 0) {
    
    if (controlsRadius <= 3) {
    
        camera.layers.mask = 2;
    
    } else {
    
        camera.layers.mask = 8;
    
    }
    
}

3.把上述代码放入渲染的函数中

Three.js实现滚轮放大展现不同的模型的更多相关文章

  1. C# GDI绘制矩形框，鼠标左键拖动可移动矩形框，滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  4. allegro设置鼠标滚轮放大缩小

    allegro设置鼠标滚轮放大缩小 allegro16版本以增加可以通过鼠标滚轮进行PCB的放大缩小.具体方法如下: 首先在HOME路径下找到PCBENV文件夹,进入该文件夹打开ENV文件. 在ENV ...

  5. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  6. Backbone.js 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构

    Backbone.js 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和 自定义事件:集合附有可枚举函数 ...

  7. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  8. Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

    onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) ...

随机推荐

  1. 【Java拾遗】Java transient关键字

    1. transient的作用及使用方法 2. transient使用小结 3. transient使用细节--被transient关键字修饰的变量真的不能被序列化吗? 1. transient的作用 ...

  2. 深入理解JVM(四) -- 垃圾内存回收的判定方法和内容

    上一篇文章我们学到了对象在内存中是如何存储的已经是如何被访问的,这篇文章将介绍当内存空间不够时,虚拟机将怎样判定对象可不可以被回收已经哪些地方会发生回收. 垃圾回收主要(不是全部)发生在堆内存中,当一 ...

  3. git下，输入git log 进入log 怎么退出

    解决方案: 英文状态下按Q就可以了 ctrl + c (应该是Linux命令中断的意思,很多中断都是这个命令). Paste_Image.png

  4. 如何通过webpack和node来实现多个静态页面html,多个入口，能打包能热加载开发环境调试

    demo已经传到了github,地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack: ...

  5. python day7： time,datetime,sys,pickle,json模块

    目录 python day 7 1. time模块 2. datetime模块 2.1 date类 2.2 time类 2.3 datetime类 2.4 timedelta类 2.5 tzinfo时 ...

  6. 【layui】layer.photos 相册层动态生成Img 中出现的问题的解决方案

    layui版本:2.5.5 参照文档:https://www.jianshu.com/p/c594811fa882 他的3.8的解决方案有一些调整因为发现他的解决方式有些繁琐而最新的2.5.5版本中有 ...

  7. javascript高级程序设计阅读总结

    5章 引用类型 1.object类型 创建 1.var obj ={} ---对象字面量 2.var obj = new Object(); ---new操作符 2.Array类型 创建 1.var ...

  8. font-size 你所不知道的值

    说起 font-size  ,大家应该都知道是做什么的: CSS 属性指定字体的大小.因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小. 那么font-size 的值也是多 ...

  9. 一分钟读懂低功耗蓝牙（BLE)连接数据包

    一分钟读懂低功耗蓝牙(BLE)连接数据包 1.概述 BLE 连接过程中有三个重要的数据包:SCAN_REQ, SCAN_RSP 和 CONNECT_REQ. SCAN_REQ: 扫描请求,由主设备(M ...

  10. Github的fork进行同步

    最近项目要求每个开发人员都有自己fork,需要在自己的fork下进行开发.这样就涉及的到fork和原仓库的同步问题. 在网上查找到fork和原仓库同步的方法,如下转载自网上查找的内容,使用终端命令行进 ...