网站建设深圳市,wordpress菜单小工具,太原网站建设设计,营销型网站策划方案环境#xff1a;
threejs#xff1a;129 #xff08;在浏览器的控制台下输入#xff1a; window.__THREE__即可查看版本#xff09;vscodewindowedge
透视相机或正交相机都有一个zoom参数#xff0c;它可以用来将相机排到的内容在canvas上缩放显示。
注意#xff1a;…环境
threejs129 在浏览器的控制台下输入 window.__THREE__即可查看版本vscodewindowedge
透视相机或正交相机都有一个zoom参数它可以用来将相机排到的内容在canvas上缩放显示。
注意
设置zoom后要调用 camera.updateProjectionMatrix();zoom默认是1它的取值就像是手机拍照一样。值变大画面放大渲染出来的空间变小感觉调整zoom对正交相机来说就像是临时调整了它所拍到的边界即left/right/top/bottom但实际上又没有改
示例正交相机
先定义个canvas500*500大小
canvas refcanvas width500 height500 stylemargin: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)调整zoom0.5观察效果
OrbitControls改变的是相机的zoom
除了上面我们可以自己调节zoom取值外OrbitControls 也是通过更改zoom实现视图的缩放的如下
//创建控制器
new OrbitControls(camera2, renderer.domElement);//渲染的时候打印相机参数
(function animate() {requestAnimationFrame(animate);renderer.render(scene, camera2);console.log(camera2.left${camera2.left},camera2.right${camera2.right} zoom${camera2.zoom})
})()观察效果
