three.js入门二：相机的zoom参数

环境：

threejs：129 （在浏览器的控制台下输入： window.__THREE__即可查看版本）
vscode
window
edge

透视相机或正交相机都有一个zoom参数，它可以用来将相机排到的内容在canvas上缩放显示。

要点：

设置zoom后要调用 camera.updateProjectionMatrix();
zoom默认是1，它的取值就像是手机拍照一样。值变大，画面放大，看到的变少；值变小，画面缩小，看到的变多；
调整zoom对正交相机来说就像是临时调整了它所拍到的边界，即：left/right/top/bottom，但实际上又没有改；

一、示例：正交相机

先定义个canvas（500*500大小）：

<canvas ref="canvas" width="500" height="500" style="margin:50px"></canvas>

创建场景和相机：

let scene = new Three.Scene();
let renderer = new Three.WebGLRenderer({ canvas: canvasDom });
let camera = new Three.OrthographicCamera(-250, 250, 250, -250, 1, 1000);
camera.zoom = 1;//改为2,将看到原画面的一半
camera.updateProjectionMatrix();
camera.position.set(0, 100, 0);
camera.lookAt(0, 0, 0);

添加网格线：

const size = 500;
const divisions = 10;
const gridHelper = new Three.GridHelper(size, divisions);
scene.add(gridHelper);

开始渲染：

(function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
})()

现在观察：

二、验证：zoom 对正交相机来说，等同于是临时修改相机的 left/right/top/bottom

在场景中加入半径为500的球体：

let mesh = new Three.Mesh(new Three.SphereGeometry(500, 16, 8), new Three.MeshBasicMaterial({ color: 0xff0000, wireframe: true }))
scene.add(mesh)

调整zoom=0.5，观察效果：

三、正交相机结合 OrbitControls

3.1 OrbitControls 默认改变的是相机的zoom

除了上面我们可以自己调节zoom取值外，OrbitControls 也是通过更改zoom实现视图的缩放的，如下：

//创建控制器
new OrbitControls(camera, renderer.domElement);//渲染的时候打印相机参数
(function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);console.log(`camera2.left=${camera.left},camera2.right=${camera.right} zoom=${camera.zoom}`)
})()

观察效果：

3.2 OrbitControls 的移动是改动的相机的位置

three.js入门二：相机的zoom参数相关推荐

js实现二维码携带参数
<div ref="qrcodeDom" class="qrClass"></div>impor ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
js入门笔记整理（二）——操作符
上一篇:js入门笔记整理一元操作符递增递增分为前置递增和后置递增前置型--两个加号(++)放在前面 var num = 1;++num; 这个操作其实就是给num加1,上面的列子等效于: va ...
【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档很详细,但是API部分单独 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
Ember.js入门教程、博文汇总
第一章对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
Three.js入门——画星空（star field）
Three.js是一个很流行的3D JavaScript库.这里有一个three.js的入门教程,在浏览器窗口中画出星空.我按照教程重新实现了一遍,这里的这篇博客把教程大致翻译了一遍.我的demo.T ...
Three.js入门指南
1.threejs导入3d模型到web端,3d模型的文件格式可以找个建模软件转化为threejs所支持的格式,如.dae .obj .mtl stl gld等 harp.gl 3D地图渲染引擎 key ...