西安SEO网站建设哪家好,广州网页设计公司排名,中国做网站推广哪家好,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 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 的移动是改动的相机的位置