three.js中3D视野的缩放实现代码


Posted in Javascript onNovember 16, 2017

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

var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );

视野角:fov 这里视野角(有的地方叫拍摄距离)越大,场景中的物体越小,视野角越小,场景中的物体越大
纵横比:aspect   (3d物体的宽/高比例)
相机离视体积最近的距离:near
相机离视体积最远的距离:far
其中fov视野角(拍摄距离)越大,场景中的物体越小。fov视野角(拍摄距离)越小,场景中的物体越大。

three.js中3D视野的缩放实现代码three.js中3D视野的缩放实现代码

透视相机(近大远小)  PerspectiveCamera 

//透视照相机参数设置
var fov = 45,//拍摄距离 视野角值越大,场景中的物体越小
 near = 1,//相机离视体积最近的距离
 far = 1000,//相机离视体积最远的距离
 aspect = window.innerWidth / window.innerHeight; //纵横比
var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);

改变fov的值,并更新这个照相机

//改变fov值,并更新场景的渲染
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
 //updateinfo();

鼠标上下滑轮实现放大缩小效果  代码如下

//监听鼠标滚动事件
canvas.addEventListener('mousewheel', mousewheel, false);
//鼠标滑轮-鼠标上下滑轮实现放大缩小效果
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;
 }
 }
 //改变fov值,并更新场景的渲染
 camera.fov = fov;
 camera.updateProjectionMatrix();
 renderer.render(scene, camera);
 //updateinfo();
}

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>threejs中3D视野的缩放</title>
 <style>
 #canvas-frame {
 width: 100%;
 height: 600px;
 }
 </style>
 </head>
 <body onload="threeStart()">
 <div id="canvas-frame" ></div>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
 var renderer, //渲染器
 width = document.getElementById('canvas-frame').clientWidth, //画布宽
 height = document.getElementById('canvas-frame').clientHeight; //画布高
 //照相机配置
 var fov = 45,//拍摄距离 视野角值越大,场景中的物体越小
 near = 1,//最小范围
 far = 1000;//最大范围
 //DOM对象
 var canvas = null;
 //初始化DOM对象 
 function initDOM(){
 canvas = document.getElementById("canvas-frame");
 }
 //初始化渲染器
 function initThree(){
 renderer = new THREE.WebGLRenderer({
  antialias : true
  //canvas: document.getElementById('canvas-frame')
 });
 renderer.setSize(width, height);
 renderer.setClearColor(0xFFFFFF, 1.0);
 document.getElementById('canvas-frame').appendChild(renderer.domElement);
  renderer.setClearColor(0xFFFFFF, 1.0);
 }
 //初始化场景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 var camera;
 function initCamera() { //透视相机
 camera = new THREE.PerspectiveCamera(fov, width/height , near, far);
 camera.position.x = 150;
 camera.position.y = 150;
 camera.position.z =250;
 camera.up.x = 0;
 camera.up.y = 1; //相机朝向--相机上方为y轴
 camera.up.z = 0;
 camera.lookAt({ //相机的中心点
  x : 0,
  y : 0,
  z : 0
 });
 }
 function initLight(){
 // light--这里使用环境光
 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
 //light.position.set(600, 1000, 800);
 /* var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度,只考虑光源的位置
 scene.add(light);*/
 }
 function initObject(){ //初始化对象
 //初始化地板
 initFloor();
 }
 function initGrid(){ //辅助网格
 var helper = new THREE.GridHelper( 1000, 50 );
 helper.setColors( 0x0000ff, 0x808080 );
 scene.add( helper );
 }
 function initFloor(){
 //创建一个立方体
 var geometry = new THREE.BoxGeometry(80, 20, 80);
  for ( var i = 0; i < geometry.faces.length; i += 2 ) {
  var hex = Math.random() * 0xffffff;
  geometry.faces[ i ].color.setHex( hex );
  geometry.faces[ i + 1 ].color.setHex( hex );
 }
 var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
 //将material材料添加到几何体geometry
 var mesh = new THREE.Mesh(geometry, material);
 mesh.position = new THREE.Vector3(0,0,0);
 scene.add(mesh);
 }
 //初始化页面加载
 function threeStart(){
 //初始化DOM对象
 initDOM();
 //初始化渲染器
 initThree();
 //初始化场景
 initScene();
 //初始透视化相机
 initCamera();
 //初始化光源
 initLight();
 //模型对象
 initObject();
 //初始化网格辅助线
 initGrid();
 //渲染
 renderer.render(scene, camera);
 //实时动画
 //animation();
 //监听鼠标滚动事件
 canvas.addEventListener('mousewheel', mousewheel, false);
 }
 function animation(){
 //相机围绕y轴旋转,并且保持场景中的物体一直再相机的视野中
 //实时渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
 }
 //鼠标滑轮-鼠标上下滑轮实现放大缩小效果
 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;
 }
 }
 console.info('camera.fov:'+camera.fov);
 console.info('camera.x:'+camera.position.x);
 console.info('camera.y:'+camera.position.y);
 console.info('camera.z:'+camera.position.z);
 //改变fov值,并更新场景的渲染
 camera.fov = fov;
 camera.updateProjectionMatrix();
 renderer.render(scene, camera);
 //updateinfo();
 }
 </script>
</html>

文章缩放来源:three.js实现3D视野缩放效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
javascript常用函数(1)
Nov 04 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
详解React 在服务端渲染的实现
Nov 16 #Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 #Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 #Javascript
You might like
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python聊天室实例程序分享
2016/01/05 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
如何通过Python实现标签云算法
2019/07/02 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers