<!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. 关于一点儿对仓储(Repository)的理解

    仓储(Repository) 内容来源于dudu的 关于Repository模式一文 Repository是一个独立的层,介于领域层与数据映射层(数据访问层)之间.它的存在让领域层感觉不到数据访问层的 ...

  2. 全网最详细的zkfc启动以后，几秒钟以后自动关闭问题的解决办法（图文详解）

    不多说,直接上干货! 问题详情 情况描述如题所示,zkfc启动以后,几秒钟以后自动关闭. 解决办法: 1.检查下每台机器的时间是否同步: 2.检查下每台机器的防火墙是否关闭: 3.查看zkfc的日志路 ...

  3. Javac中的nullcheck

    Javac会通过调用引用对象的getClass()来判空,主要有几处: (1)JCMethodInvocation()方法中,如下实例: class A{ class B{} } public cla ...

  4. C语言中求字符串的长度

    在C语言中求字符串的长度,可以使用sizeof()函数和strlen()函数,后者需要引入string.h (#include <string.h>) 因为C语言字符串是以 \0 结尾表示 ...

  5. Solidity遍历

    实际上,映射对于存储地址的标记值非常有用. 我们在许多合约中都看到了它们,它们通常以这种方式定义: mapping (address => uint) public users; 由于映射是公共 ...

  6. 大数据之superset

    1.概述 superset大数据可视化的利器,深度集成durid,结合kylin.presto完成强大的大数据可视化功能,曾用名Panoramix.caravel.相比caravel它有个比较抢眼的功 ...

  7. java json-lib配置

    用法 项目中要用到json-lib,mvnrepository.com查找它的dependency时结果如下: import net.sf.json.JSONArray; import net.sf. ...

  8. CodeForces -977F(突破定式思维+map应用)

    题目链接: https://cn.vjudge.net/problem/CodeForces-977F /* 问题 输入n和n个数的数列 计算并输出最长增量为1的上升子序列 解题思路 用n2的最长上升 ...

  9. T4模板根据数据库表和列的Description生成代码的summary的终极解决方案

    相信很多人都用T4模版生成代码,用T4模版生成标准代码真的很方便.我们经常根据表生成相关的代码, 但是估计很多人都遇见过同一个问题, 特别是我们在生成model的时候,代码中model中的Summar ...

  10. Docker配置daocloud加速器

    首先注册daocloud网站的账号(免费的!!!),并登陆自己的账号,并在这里获取自己的daocloud加速器配置脚本. 获取到自己的daocloud加速器配置脚本之后只需要在已安装Docker服务的 ...