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

程序员文章站 2022-09-01 22:53:02

通过threejs基础学习——修改版知道创建一个相机的相关知识点 var camera = new three.perspectivecamera( fov, a...

var camera = new three.perspectivecamera( fov, aspect , near,far );

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

透视相机(近大远小) 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视野缩放效果

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

上一篇：在 Node.js 中使用 async 函数的方法

下一篇： Bootstrap table使用方法汇总

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

微信小程序中实现手指缩放图片的示例代码

C#中WinForm控件的拖动和缩放的实现代码

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

基于three.js实现的3D粒子动效实例代码

three.js实现3D模型展示的示例代码

three.js实现3D影院的原理的代码分析

Vue中实现3D标签云的详细代码

three.js实现3D视野缩放效果

C#中WinForm控件的拖动和缩放的实现代码

微信小程序中实现手指缩放图片的示例代码