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. ASP.NET MVC+Entity Framework code first 迁移

    再来一张,选择 MVC 模版,其他的没选过,不会用 =_=!! 身份验证用个人用户账户,这个是为了偷懒,话说 ASP.NET Identity  还是很给力的,不用白不用 ^_^~ 点击确定之后,会看 ...

  2. 【kubernetes】通过rancher2部署k8s

    1. K8S相关介绍 十分钟带你理解Kubernetes核心概念 2. 部署rancher # 更新操作系统软件包 yum update -y # 删除历史容器及数据 docker rm -f $(d ...

  3. 批量导入数据到InnoDB表速度优化

    1.使用Load data: 2. SET autocommit=0; ... SQL import statements ... COMMIT; 3. SET unique_checks=0; .. ...

  4. Chrome快捷键统计

    Chrome快捷键: Chrome 个人常用快捷键 1 将当前网页保存为书签 Ctrl + d 2 重新加载当前网页 Ctrl + r或F5 3 打开书签管理器 Ctrl + Shift + o 4 ...

  5. github markdown语法及使用

    历史 Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber).它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档 ...

  6. zabbix监控内存

    取内存百分比 取出内存的可用的MB大小 / 总的内存大小 = 实际可用的百分比 avilable 710 X 100 / total 974 free -m|awk '/^Mem/{print $NF ...

  7. Matlab Cordic 一个数开方代码，适用FPGA

    function [sqrt_value] = calsqrt(a)NormKn = ceil(log2(a)) - 1;fprintf("Normalization input data ...

  8. mysqlslap压测

    mysqlslap 是MySQL自带的压测工具: -P --create-schema=test -S /tmp/mysql_sandbox18601.sock --number-of-queries ...

  9. 使用Visual Studio快速开发STM32F4-Discovery探索板入门

    本本将主要介绍如何使用Visual Studio创建一个基于STM32F4-Discovery探索板的简单工程. 本文使用以下硬件和软件: ●      Microsoft Visual Studio ...

  10. SpringCloud学习心得之Eureka注册中心的基本使用

      SpringCloud学习心得——Eureka注册中心 示范代码链接 定义 SpringCloud Eureka是 SpringCloud Netflix微服务套件的一部分,基于 REST 的服务 ...