欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-01 22:53:02
通过threejs基础学习——修改版知道创建一个相机的相关知识点 var camera = new three.perspectivecamera( fov, a...

通过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视野缩放效果

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