<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ceshi</title>

    <script type="text/javascript" src=".\build\three.js"></script>

    <style>

        body

        {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <!-- 作为Three.js渲染器输出元素 -->

    <div id="WebGL-output">

    </div>

    <!-- 第一个 Three.js 样例代码 -->

    <script type="text/javascript">

        var cube = new Array(100);

        var camera, scene, renderer;

        var id = null;

        var fov = 45;

        var near = 0.1;

        var far = 1000;

        init();

        function init() {

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

            camera.position.x = 100;

            camera.position.y = 100;

            camera.position.z = 100;

            camera.lookAt(scene.position);

            //创建一个WebGL渲染器并设置其大小

            renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color(0xEEEEEE));

            renderer.setSize(window.innerWidth, window.innerHeight);

            var axes = new THREE.AxisHelper(200);

            scene.add(axes);

            for (var i = 0; i < 100; i++) {

                var geometry = new THREE.BoxGeometry(5, 5, 5);

                for (var j = 0; j < geometry.faces.length; j += 2) {

                    var hex = Math.random() * 0xffffff;

                    geometry.faces[j].color.setHex(hex);

                    geometry.faces[j + 1].color.setHex(hex);

                }

                var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 });

                cube[i] = new THREE.Mesh(geometry, material);

                cube[i].position.x = Math.random() * 100 - 50;

                cube[i].position.y = Math.random() * 100 - 50;

                cube[i].position.z = Math.random() * 100 - 50;

                scene.add(cube[i]);

                id = setInterval(render, 33);

            }

            document.addEventListener('mousewheel', mousewheel, false);

        }

        function render() {

            for (var i = 0; i < 100; i++) {

                cube[i].position.x += Math.random() - 0.5;

                cube[i].position.y += Math.random() - 0.5;

                cube[i].position.z += Math.random() - 0.5;

                if (Math.abs(cube[i].position.x) > 100)

                    cube[i].position.x = 0;

                if (Math.abs(cube[i].position.y) > 100)

                    cube[i].position.y = 0;

                if (Math.abs(cube[i].position.z) > 100)

                    cube[i].position.z = 0;

            }

            renderer.render(scene, camera);

        }

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

        }

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

    </script>

</body>

</html>

【three.js练习程序】鼠标滚轮缩放的更多相关文章

  1. js 禁止用户使用Ctrl+鼠标滚轮缩放网页

    为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! <html> <head> <title>测试</title> <script lang ...

  2. Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  3. SceneControl+AE+鼠标滚轮缩放

    要为SceneControl设置鼠标滚轮缩放必须定义委托,因为SceneControl没有Wheel事件,所以委托From的Wheel事件 public Form1() { InitializeCom ...

  4. Engine中如何实现鼠标滚轮缩放反置？

    来自:http://zhihu.esrichina.com.cn/?/question/6666 [解决办法]:1,禁用IMapControl的默认鼠标滚轮事件.即设置IMapControl4.Aut ...

  5. PCB Genesis 鼠标滚轮缩放与TGZ拖放 插件实现

    一.背景: 做过CAM的人都用过Geneiss软件,由于处理资料强大,目前奥宝公司出品的Genesis占领整个PCB行业,整个行业无人不知呀, 而此软件有一个吐槽点Genesis 无滚轮缩放与TGZ拖 ...

  6. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  7. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  8. 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法

    在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...

  9. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  10. js/jq判断鼠标滚轮方向

    js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...

随机推荐

  1. 微信web开发者工具、破解文件、开发文档和开发Demo下载

    关注,QQ群,微信应用号社区 511389428 下载: Win: https://pan.baidu.com/s/1bHJGEa Mac: https://pan.baidu.com/s/1slhD ...

  2. SQL Server 跨域访问

    # SQL Server 跨服务器访问数据 参考链接: [sp_addlinkedserver](https://msdn.microsoft.com/zh-cn/library/ms190479.a ...

  3. spring 资源访问

    spring 资源访问 Resource resource=null; //访问网络资源 resource=new UrlResource("file:bool.xml"); // ...

  4. Silverlight中使用MVVM(4)—演练

    本来打算用MVVM实现CRUD操作的,这方面例子网上资源还挺多的,毕竟CRUD算是基本功了,因为最近已经开始学习Cailburn框架了,感觉时间 挺紧的,这篇就实现其中的更新操作吧.         ...

  5. koa-router post请求接收的参数为空

    注:koa-router路由和koa-bodyparser中间件  post请求中参数为空. 页面代码 <!DOCTYPE html> <html> <head> ...

  6. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  7. [Java初探外篇]__关于时间复杂度与空间复杂度

    前言 我们在前面的排序算法的学习中了解到了,排序算法的分类,效率的比较所使用到的判断标准,就包括时间复杂度和空间复杂度,当时因为这两个定义还是比较难以理解的,所以决定单独开一篇文章,记录一下学习的过程 ...

  8. Spring mvc 4系列教程（一）

    一.Spring框架概览 Spring框架是一种轻量级.一站式解决企业级应用的解决方案.不仅如此,Spring的模块化的特点,可以使你只引用所需要的部分,而无需引用全部.你可以使用控制反转容器(IoC ...

  9. mysql建立索引的一些小规则

    1.表的主键.外键必须有索引: 2.数据量超过300的表应该有索引: 3.经常与其他表进行连接的表,在连接字段上应该建立索引: 4.经常出现在Where子句中的字段,特别是大表的字段,应该建立索引: ...

  10. 如何自定义Tomcat Realm实现我们的用户认证需求

    导读 Tomcat对于J2EE或Java web开发者而言绝不陌生,但说到Realm,可能有些人不太清楚甚至没有听说过,那么到底什么是Realm?简单一句话就是:Realm是Tomcat中为web应用 ...