环境:
- 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}`)
})()
观察效果: