03-Three.js 场景对浏览器的自适应

透视投影相机PerspectiveCamera自适应渲染

window.addEventListener('resize', onResize, false);
function onResize() {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 通常是使用画布的宽/画布的高。默认值是1
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新摄像机投影
    camera.updateProjectionMatrix();
}

正投影相机OrthographicCamera自适应渲染

window.addEventListener('resize', onResize, false);
function onResize() {
   // 三维场景显示范围控制系数,系数越大,显示的范围越大
   var s = 200; 
   // 重置渲染器输出画布canvas尺寸
   renderer.setSize(window.innerWidth,window.innerHeight);
   // 重置相机投影的相关参数
   k = window.innerWidth/window.innerHeight;//窗口宽高比
  camera.left = -s*k;
  camera.right = s*k;
  camera.top = s;
  camera.bottom = -s;
  // 更新摄像机投影
  camera.updateProjectionMatrix ();
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容