<!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. Git使用（1）

    安装git完成后 1.首先配置你的用户信息,用于体现在你的提交记录中包含your name and your email git config --global user.name "you ...

  2. Feign status 400 reading 问题分析

    背景:项目使用的是微服务架构,采用springboot来开发,所有的服务都是基于内嵌tomcat来运行 问题:项目部署到测试环境之后,偶尔在后台日志会看到这样的日志:Feign status 400 ...

  3. 《Java多线程编程核心技术》——多线程与同步

    Java多线程 线程可以理解为是在进程中独立运行的子任务. Java多线程 使用方法 Java中实现多线程主要有以下两种方法: 继承Thread,而后实例化该对象调用start()即启动了新线程; 实 ...

  4. 高可用Hadoop平台－实战尾声篇

    1.概述 今天这篇博客就是<高可用Hadoop平台>的尾声篇了,从搭建安装到入门运行 Hadoop 版的 HelloWorld(WordCount 可以称的上是 Hadoop 版的 Hel ...

  5. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  6. Java-Reflection反射-获取包括父类在内的所有字段

    前言 今天Android移动端要加个新功能,所以回归Android程序员的身份.开发的过程中,发现了之前的代码写的有很多问题,真的应该把时间抽出来重构一下了. 其中有反射的一个坑,工具类某方法反射获取 ...

  7. Java程序读取Properties文件

    一.如果将properties文件保存在src目录下 1.读取文件代码如下: /** * 配置文件为settings.properties * YourClassName对应你类的名字 * / pri ...

  8. 关于Markdown插入图片路径错误的问题

    关于Markdown插入图片路径错误的问题 开发问题 解决方法  妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题 在上篇中,我介绍了一下Markdow ...

  9. [leetcode]238. 除自身以外数组的乘积

    题目描述 给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输 ...

  10. 1.1 PIL：Python图像处理类库

    from PIL import Image img = Image.open('Husky.jpg') # 看看这货长什么样子 img # 看看它的大小 print('The size of this ...