【three.js练习程序】鼠标滚轮缩放
<!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练习程序】鼠标滚轮缩放的更多相关文章
- js 禁止用户使用Ctrl+鼠标滚轮缩放网页
为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! <html> <head> <title>测试</title> <script lang ...
- Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- SceneControl+AE+鼠标滚轮缩放
要为SceneControl设置鼠标滚轮缩放必须定义委托,因为SceneControl没有Wheel事件,所以委托From的Wheel事件 public Form1() { InitializeCom ...
- Engine中如何实现鼠标滚轮缩放反置?
来自:http://zhihu.esrichina.com.cn/?/question/6666 [解决办法]:1,禁用IMapControl的默认鼠标滚轮事件.即设置IMapControl4.Aut ...
- PCB Genesis 鼠标滚轮缩放与TGZ拖放 插件实现
一.背景: 做过CAM的人都用过Geneiss软件,由于处理资料强大,目前奥宝公司出品的Genesis占领整个PCB行业,整个行业无人不知呀, 而此软件有一个吐槽点Genesis 无滚轮缩放与TGZ拖 ...
- JS如何判断鼠标滚轮向上还是向下滚动
前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法
在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
- js/jq判断鼠标滚轮方向
js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...
随机推荐
- C# String.Format的格式限定符与Format方法将多个对象格式化一个字符串原理
Format方法将多个对象格式化成一个字符串Format方法解析格式字符串的原理: (1).格式字符串中的{0}会被替换成格式字符串之后的第一个参数,以此类推 (2).Format方法解析格式字符串时 ...
- tomcat 的自问自答与总结
目录 1 tomcat 的加载问题,启动后更新是否自动加载 2 tomcat 的context.xml 文件读取顺序与覆盖原则 3 就是 建议的tomcat 配置 4 避免二次部署加载的问题 在查看了 ...
- spring boot实现ssm(1)功能
前面完成了ssm的整合, 整个过程可以说很繁杂, 各种配置, 很容易让人晕掉. 这里使用spring boot 的方式来实现ssm(1)中的功能. 一. 建项目 1. 使用 idea 来创建 spri ...
- Docker轻量级web图形页面管理 - Portainer部署记录
Docker图形页面管理工具基本常用的有三种: Docker UI,Shipyard,Portainer,之前分别介绍了Docker UI和Shipyard部署,下面简单介绍下Portainer部署. ...
- HTTPS加密越来越流行,为何要加密?
继谷歌之后,国内最大的搜索引擎百度在2015年5月实现了全站HTTPS加密.搜狗搜索.360搜索.bing搜索.淘宝.天猫.知乎等也都实现了全站HTTPS加密,互联网即将迎来全网HTTPS加密时代. ...
- ASP.NET MVC5+EF6+LayUI实战教程,通用后台管理系统框架(6)- 创建数据库
前言 其实网站就是一座连接用户和数据库的梁桥,数据库通过网站,将信息以不同的方式,展现给客户,客户通过网站,对数据库进行各种操作 下面,我们用一个例子,给大家展示下基本的增删改查操作 创建数据库 创建 ...
- 网络之XML解析-GData
GDataXML是一套Google使用Objective-C开发的DOM方式XML解析类库,支持读取和修改XML文档,支持XPath方式查询, GDataXML 是 iOS 下的一款轻量级 XML 解 ...
- 微信开发(一)基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
- Git使用(一)——Cygwin
1.下载2.安装镜像:1)上海交大的FTP:ftp://ftp.sjtu.edu.cn/sites/cygwin.com/pub/cygwin/2)163的镜像:http://mirrors.163. ...
- order by与索引(转载)
order by与索引 ORDER BY 通常会有两种实现方法,一个是利用有序索引自动实现,也就是说利用有序索引的有序性就不再另做排序操作了.另一个是把结果选好之后再排序. 用有序索引这种,当然是 ...