通过Threejs基础学习——修改版知道创建一个相机的相关知识点

  1. var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );
  2. 视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
  3. 纵横比：aspect   (3d物体的宽/高比例)
  4. 相机离视体积最近的距离：near
  5. 相机离视体积最远的距离：far

其中fov视野角(拍摄距离)越大，场景中的物体越小。fov视野角(拍摄距离)越小，场景中的物体越大。

  1. 透视相机(近大远小)  PerspectiveCamera  
  1. //透视照相机参数设置
  2. var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
  3.     near = 1,//相机离视体积最近的距离
  4.     far = 1000,//相机离视体积最远的距离
  5.     aspect =  window.innerWidth / window.innerHeight; //纵横比
  6. var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);
  1. 改变fov的值，并更新这个照相机
  1. //改变fov值，并更新场景的渲染
  2. camera.fov = fov;
  3. camera.updateProjectionMatrix();
  4. renderer.render(scene, camera);
  5.  //updateinfo();
  1. 鼠标上下滑轮实现放大缩小效果  代码如下
  1. //监听鼠标滚动事件
  2. canvas.addEventListener('mousewheel', mousewheel, false);
  1. //鼠标滑轮-鼠标上下滑轮实现放大缩小效果
  2. function mousewheel(e) {
  3.             e.preventDefault();
  4.             //e.stopPropagation();
  5.             if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
  6.                 if (e.wheelDelta > 0) { //当滑轮向上滚动时
  7.                     fov -= (near < fov ? 1 : 0);
  8.                 }
  9.                 if (e.wheelDelta < 0) { //当滑轮向下滚动时
  10.                     fov += (fov < far ? 1 : 0);
  11.                 }
  12.             } else if (e.detail) {  //Firefox滑轮事件
  13.                 if (e.detail > 0) { //当滑轮向上滚动时
  14.                     fov -= 1;
  15.                 }
  16.                 if (e.detail < 0) { //当滑轮向下滚动时
  17.                     fov += 1;
  18.                 }
  19.             }
  20.             //改变fov值，并更新场景的渲染
  21.             camera.fov = fov;
  22.             camera.updateProjectionMatrix();
  23.             renderer.render(scene, camera);
  24.             //updateinfo();
  25. }

实现效果完整代码  标注具体案例为个人原创

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>threejs中3D视野的缩放</title>
  6.         <style>
  7.         	#canvas-frame {
  8.         		width: 100%;
  9.         		height: 600px;
  10.         	}
  11.         </style>
  12.     </head>
  13.     <body onload="threeStart()">
  14.         <div id="canvas-frame" ></div>
  15.     </body>
  16.     <script type="text/javascript" src="./lib/three.js" ></script>
  17.     <script type="text/javascript">
  18.         	var renderer, //渲染器
  19.         	    width = document.getElementById('canvas-frame').clientWidth, //画布宽
  20.         	    height = document.getElementById('canvas-frame').clientHeight; //画布高
  21.         	//照相机配置
  22. 	        var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
  23. 	            near = 1,//最小范围
  24. 	            far = 1000;//最大范围
  25. 	        //DOM对象
  26. 	        var canvas = null;
  27. 	        //初始化DOM对象
  28. 	        function initDOM(){
  29. 	            canvas = document.getElementById("canvas-frame");
  30. 	        }
  31.         	//初始化渲染器
  32.         	function initThree(){
  33.         		renderer = new THREE.WebGLRenderer({
  34. 	            	 antialias : true
  35. 	                 //canvas: document.getElementById('canvas-frame')
  36. 	            });
  37. 	            renderer.setSize(width, height);
  38. 	            renderer.setClearColor(0xFFFFFF, 1.0);
  39. 	            document.getElementById('canvas-frame').appendChild(renderer.domElement);
  40.                     renderer.setClearColor(0xFFFFFF, 1.0);
  41.         	}
  42.             //初始化场景
  43.             var scene;
  44.             function initScene(){
  45.             	scene = new THREE.Scene();
  46.             }
  47.             var camera;
  48.             function initCamera() {  //透视相机
  49.                 camera = new THREE.PerspectiveCamera(fov,  width/height , near, far);
  50.                 camera.position.x = 150;
  51.                 camera.position.y = 150;
  52.                 camera.position.z =250;
  53.                 camera.up.x = 0;
  54.                 camera.up.y = 1; //相机朝向--相机上方为y轴
  55.                 camera.up.z = 0;
  56.                 camera.lookAt({  //相机的中心点
  57.                     x : 0,
  58.                     y : 0,
  59.                     z : 0
  60.                 });
  61.             }
  62.             function initLight(){
  63.             	// light--这里使用环境光
  64. 	            //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
  65. 	            //light.position.set(600, 1000, 800);
  66. 	           /* var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
  67. 	            light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
  68. 	            scene.add(light);*/
  69.             }
  70.             function initObject(){  //初始化对象
  71.             	//初始化地板
  72.             	initFloor();
  73.             }
  74.             function initGrid(){ //辅助网格
  75.                 var helper = new THREE.GridHelper( 1000, 50 );
  76.                 helper.setColors( 0x0000ff, 0x808080 );
  77.                 scene.add( helper );
  78.             }
  79.             function initFloor(){
  80. 	            //创建一个立方体
  81. 	            var geometry = new THREE.BoxGeometry(80, 20, 80);
  82. 	             for ( var i = 0; i < geometry.faces.length; i += 2 ) {
  83.                     var hex = Math.random() * 0xffffff;
  84.                     geometry.faces[ i ].color.setHex( hex );
  85.                     geometry.faces[ i + 1 ].color.setHex( hex );
  86.                 }
  87. 	            var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
  88. 	            //将material材料添加到几何体geometry
  89. 	            var mesh = new THREE.Mesh(geometry, material);
  90. 	            mesh.position = new THREE.Vector3(0,0,0);
  91. 	            scene.add(mesh);
  92.         	}
  93.             //初始化页面加载
  94.             function threeStart(){
  95.             	//初始化DOM对象
  96.             	initDOM();
  97.             	//初始化渲染器
  98.         	initThree();
  99.         	//初始化场景
  100.         	initScene();
  101.         	//初始透视化相机
  102.                 initCamera();
  103.                 //初始化光源
  104.                 initLight();
  105.                 //模型对象
  106.                 initObject();
  107.                 //初始化网格辅助线
  108.                 initGrid();
  109.                 //渲染
  110.                 renderer.render(scene, camera);
  111.                 //实时动画
  112.         	//animation();
  113.         	//监听鼠标滚动事件
  114.         	canvas.addEventListener('mousewheel', mousewheel, false);
  115.             }
  116.             function animation(){
  117.             	//相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
  118.             	//实时渲染成像
  119.         	    var timer = Date.now()*0.0001;
  120.                 camera.position.x = Math.cos(timer)*100;
  121.                 camera.position.z = Math.sin(timer)*100;
  122.                 camera.lookAt(scene.position);
  123.                 renderer.render(scene, camera);
  124.                 requestAnimationFrame(animation);
  125.             }
  126.         //鼠标滑轮-鼠标上下滑轮实现放大缩小效果
  127.         function mousewheel(e) {
  128.             e.preventDefault();
  129.             //e.stopPropagation();
  130.             if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
  131.                 if (e.wheelDelta > 0) { //当滑轮向上滚动时
  132.                     fov -= (near < fov ? 1 : 0);
  133.                 }
  134.                 if (e.wheelDelta < 0) { //当滑轮向下滚动时
  135.                     fov += (fov < far ? 1 : 0);
  136.                 }
  137.             } else if (e.detail) {  //Firefox滑轮事件
  138.                 if (e.detail > 0) { //当滑轮向上滚动时
  139.                     fov -= 1;
  140.                 }
  141.                 if (e.detail < 0) { //当滑轮向下滚动时
  142.                     fov += 1;
  143.                 }
  144.             }
  145.             console.info('camera.fov:'+camera.fov);
  146.             console.info('camera.x:'+camera.position.x);
  147.             console.info('camera.y:'+camera.position.y);
  148.             console.info('camera.z:'+camera.position.z);
  149.             //改变fov值，并更新场景的渲染
  150.             camera.fov = fov;
  151.             camera.updateProjectionMatrix();
  152.             renderer.render(scene, camera);
  153.             //updateinfo();
  154.         }
  155.     </script>
  156. </html>

文章缩放来源  http://blog.csdn.net/u_9_5/article/details/50542847

转 threejs中3D视野的缩放实现的更多相关文章

  1. 在threejs中对3D物体旋转的思考

    今天在写threejs时,突然想到一个问题:一个3D物体需要旋转时,一般情况下简单的旋转我都是使用欧拉角,稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转(欧拉角复杂旋转可能会产生的死锁问题),但是 ...

  2. 用threejs 实现3D物体在浏览器展示

    用threejs 实现3D物体在浏览器展示,通过鼠标平移,缩放,键盘箭头按钮左右移动等功能展示. <!DOCTYPE html> <html> <head> < ...

  3. Threejs 开发3D地图实践总结【转】

    Threejs 开发3D地图实践总结   前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...

  4. threejs和3d各种效果的学习

    写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...

  5. Threejs 开发3D地图实践总结

    前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂直于我们想要照亮的物体表面的向量.法线代表 ...

  6. ThreeJS中的点击与交互——Raycaster的用法

    基础概念 坐标系 我们的手机屏幕是二维的,但是我们展示物体的世界是三维的,当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建,而转化为屏幕坐标展示在我们眼前,则需要经历多道矩阵变化,中间 ...

  7. 教你如何利用threejs对3D模型皮肤进行DIY

    一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能. 模型准备 模型制作 模型可以通过网上下载,也可以自己通过c4d.maya.blender等模型制作软件得到.这里就不叙述有关模 ...

  8. HT for Web中3D流动效果的实现与应用

    流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...

  9. WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

    原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...

随机推荐

  1. Android Socket连接PC出错问题及解决

    最近测试问题:Android 通过Socket链接电脑,ip和端口都是正确的,也在同一网段,可android端就是报异常如下: 解决办法:测试电脑的防火墙可能开着,在控制面板把防火墙打开即可.

  2. SQL 提示介绍 hash/merge/concat union

    查询提示一直是个很有争议的东西,因为他影响了sql server 自己选择执行计划.很多人在问是否应该使用查询提示的时候一般会被告知慎用或不要使用...但是个人认为善用提示在不修改语句的条件下,是常用 ...

  3. 用SecureCRT连接虚拟机中的Linux系统(Ubuntu)

    今天突然练习linux命令行的时候,想在window中联系linux命令行.经过一番dudu找到了一个不错的的工具(SecureCRT--意思安全)就是用SSH链接linux主机.推荐大家使用.毕竟w ...

  4. mysql源码包手动安装、配置以及测试（亲测可行）

    笔记编者:小波/qq463431476博客首页:http://www.cnblogs.com/xiaobo-Linux/ 记下这篇mysql笔记,望日后有用! redhat6采用centos yum源 ...

  5. IOS开发之—— 在AFN基础上进行的网络请求的封装

    网络请求的思路:如果请求成功的话AFN的responseObject就是解析好的. 1发送网络请求:get/post/或者别的 带上URL,需要传的参数 2判断后台网络状态码有没有请求成功: 3 请求 ...

  6. 揭秘Windows10 UWP中的httpclient接口[2]

    阅读目录: 概述 如何选择 System.Net.Http Windows.Web.Http HTTP的常用功能 修改http头部 设置超时 使用身份验证凭据 使用客户端证书 cookie处理 概述 ...

  7. ABP(现代ASP.NET样板开发框架)系列之5、ABP启动配置

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之5.ABP启动配置 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  8. atitit 商业项目常用模块技术知识点 v3 qc29

    atitit 商业项目常用模块技术知识点 v3 qc29 条码二维码barcodebarcode 条码二维码qrcodeqrcode 条码二维码dm码生成与识别 条码二维码pdf147码 条码二维码z ...

  9. iOS App引导页功能实现

    一.写作原因 以前都没有想着来写点东西,今天遇到件事情让我决定每次还是要做记录.因为以前自己可以轻松的完成pod spec的配置,但是今天在做的时候还是忘了遇到了很多坑.pod spec配置遇到的坑不 ...

  10. Redis数据结构详解之List（二）

    序言 思来想去感觉redis中的list没什么好写的,如果单写几个命令的操作过于乏味,所以本篇最后我会根据redis中list数据类型的特殊属性,同时对比成熟的消息队列产品rabbitmq,使用red ...