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大小):

html 复制代码
<canvas ref="canvas" width="500" height="500" style="margin:50px"></canvas>

创建场景和相机:

js 复制代码
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);

添加网格线:

js 复制代码
const size = 500;
const divisions = 10;
const gridHelper = new Three.GridHelper(size, divisions);
scene.add(gridHelper);

开始渲染:

js 复制代码
(function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
})()

现在观察:




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

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

js 复制代码
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实现视图的缩放的,如下:

js 复制代码
//创建控制器
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 的移动是改动的相机的位置

相关推荐
一米八二的矮个子8 分钟前
JavaScript语法进阶(一)
javascript
liyi_hz200818 分钟前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
angelQ34 分钟前
前端fetch手动解析SSE消息体,字符串双引号去除不掉的问题定位
前端·javascript
林希_Rachel_傻希希35 分钟前
JavaScript 解构赋值详解,一文通其意。
前端·javascript
林希_Rachel_傻希希40 分钟前
正则表达式捕获组与全局匹配
前端·javascript
karshey1 小时前
【vue】NoticeBar:滚动通知栏组件手动实现(内容、速度、循环间隔可配置)
前端·javascript·vue.js
花菜会噎住1 小时前
Vue3 路由配置和使用与讲解(超级详细)
开发语言·javascript·ecmascript·路由·router
细节控菜鸡1 小时前
【2025最新】ArcGIS for JavaScript 快速实现热力图渲染
开发语言·javascript·arcgis
Dontla1 小时前
React惰性初始化函数(Lazy Initializer)(首次渲染时执行一次,只执行一次,应对昂贵初始化逻辑)(传入一个函数、传入函数)
前端·javascript·react.js
Cherry Zack2 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js