Three.js-多Scene渲染

应用场景

  • 微缩视图

  • 宏观视图(同屏幕展示多个 3D 场景)

案例

PVIS 2025 的多 Scene 渲染

常见问题

通过 viewport 渲染后，发现 scene 的画面大小被拉伸变形了，这是为什么？

代码，详见__setViewport()方法
在使用 WebGLRenderer 的 viewport 属性进行多视口渲染时，如果发现场景被拉伸或变形，这通常是由于视口的宽高比（aspect ratio）与相机的宽高比不匹配所导致的。

在 Three.js 中，相机的宽高比是根据其 aspect 属性自动计算的，这个属性默认是相机画布宽度除以高度。当你更改视口大小时，如果相机的 aspect 没有相应地更新，渲染出的场景可能会出现变形。

解决方法

为了解决这个问题，你需要确保相机的 aspect 属性与视口的宽高比相匹配。以下是一些解决步骤：

  1. 更新相机的 aspect 属性：
    在设置视口之前，更新相机的 aspect 属性以匹配新的视口宽高比。
  2. 调用相机的 updateProjectionMatrix 方法：
    更新 aspect 后，需要调用相机的 updateProjectionMatrix 方法来确保相机的投影矩阵是最新的。
1
2
3
4
5
6
renderer.setViewport(left, bottom, width, height);
renderer.setScissor(left, bottom, width, height);

// 宏观视图渲染多个时，viewport的高宽比不等于渲染器的高宽比，因此需要更新相机的高宽比，否则画面会被拉伸变形
camera.aspect = width / height;
camera.updateProjectionMatrix();

一开始我准备这样解决，发现不行，因为这样的话，3D 的画布没有占据满浏览器，会导致右侧的部分无法渲染(那部分已经不是 canvas 画布了)：

1
2
3
4
#container3d {
  width: min(100vw, 100vh) ;
  height: min(100vw, 100vh) ;
}

参考资料

https://threejs.org/examples/?q=multi#webgl_multiple_elements