three.js有限制的响应渲染器

如何调整渲染器（或摄影机）的大小以避免看到场景中不需要的部分？nstrong>我想达到与这个网站112完全相同的效果。
我已经在使用这个：n***0**是对我的canvas元素的引用，它的大小是100vw和100vh（使用CSS），所以它对我的code的作用与对你的完全相同。我制作了动画GIF来更精确地解释我想要的结果：
我现在拥有的东西：
我想要的东西：
正如你所看到的，第二个GIF中有一个特殊的行为，场景边界永远不会通过。我不知道这是否与相机或渲染器有关，或者两者都有关系。
我的意思是，您应该创建相应的图像/纹理/3dobject/任何对象”屏幕宽度“和”屏幕高度\". 你能在你创建场景的地方发布你的函数吗？
它使用一个名为PixiJS 12的2D引擎。它放置一个背景图像4和一个前景图像3，然后在鼠标移动时转换这两个图像以创建3D效果，这可能使用与示例17类似的代码。
若要回答此问题，可以尝试相对于画布宽度缩放场景。这将需要手动调整，因此我只能给出一个示例，但实际上类似于…nwindow.addEventListener(\"resize\", = (width-optimalWidth)/100 + 1; // change the 100 to something that suits your testing.}scene.scale.set(scale,scale,scale); // can change scene to your mesh here});n，尽管您可能也需要考虑高度，因此与其检查最佳宽度，不如检查宽度/高度之间的最佳比率，但目前这应该是一个不错的结果。
我理解，但我不是在说调整大小处理程序，您仍然可以改进，请检查照相机.镜头及.setsize，您应该会发现一些有用的关于堆栈溢出的文章。
无论如何
我给您举个例子，我有一个3d场景，其中我绘制了矩形来覆盖屏幕，从左到右，从下到上。在我的绘图功能中，我在屏幕宽度广袤屏幕高度高。
我什么意思？我的意思是，当你创建纹理时，你必须用屏幕属性而不是窗口属性来调整它的大小，不管浏览器有多大。这样，可以根据需要调整窗口大小，但第一次渲染将覆盖整个屏幕。我希望我解释得更好。我从来没有用过pixi，你认为这就是他们实现失真的原因吗？我可以看到它有点像一个密集的网格，但我还不能弄清楚它是什么，我仍在试图弄清楚spector js是如何工作的。
另一件事是前景3和背景1都有位移贴图，这也将用于3D.Soo将纹理映射到平面（如PlaneBufferGeometry），并使用置换贴图（GPU侧纹理）赋予它们深度。如果你觉得自己很勇敢，你可以取消源代码的完整性来看看，但这使得它很难阅读。n@ThoughtsRiff根据我对这个问题的理解，nagma
希望加载一个单一的模型一次，并在窗口调整大小时响应地调整3D视图比例，而不是根据初始视图重新绘制对象，这就是我的方法的基础。您可以根据视口设置初始化时的默认值/最佳大小，如果有人在桌面上或在移动设备上，这将适用，然后添加基于这些初始值的响应缩放。n@calrk我很惊讶网站是用Pixi完成的。我确信它是3D的。
我尝试了你的解决方案，它完成了部分工作（我看不到场景的左右边界），但我没有缩放整个视图（就像你在photoshop中所做的那样），而是让相机像东西一样移动：
它似乎与renderer.setViewport或renderer.setScissor有关，但我不确定。
我已经开始了我认为正确的方法是：nfunction onWindowResize() = width / height;if (actualRatio > optimalRatio) { // window too large// something to do maybe with renderer.setViewport, or setSize, or setScissor, and some math stuff using optimalRatio with width or height} else { // window too narrow// idem, but replacing the dimension (width or height) with the>nWhat I don\"t understand is if @nagman \"s texture/3d object has a fixed size that he can choose. Because if it is, when he creates the object he can sets its width and height as screen\"s ones. This way, when he resizes window from shrinked to wide, the texture/image gets to its original size ( as screen ) and doesn\"t stretch.nI\"m gonna create a codepen, I\"ll edit this reply.nEDIT 1: Notice also that if you use perspectiveCamera, FOV and distance are factors that you should count too.n@ThoughtsRiff I do use a perspectiveCamera, and this is why I cannot just set the size of the object.nIt shouldn\"t be that complicated. It is exactly the same effect as a simple object-fit: cover;在CSS中，或者abackground-size: cover;Three.js应该有类似“停止渲染超出此帧的所有内容”，而不必移动相机、其FOV、网格大小等。
是否可以发布您正在使用的完整示例代码，包括模型？哎哟，有点难，因为它在一个Next.js环境，但我可以试试。
您发布的示例似乎在处理图像，您似乎在处理网格。它们具有可用的宽度和高度，可以将其应用于逻辑。你没有这个，只有通过设置camera.fov来基本上有高度。
你需要的是与camera.fov和你的主题相关的东西，你需要以某种方式来框定它。您可以使用边界框、几何检查等等，但最简单的方法是选择一些世界大小的矩形，并将相同的逻辑应用于图像/四边形。
那么您的示例中发生了什么？
假设图像的纵横比为2:1。当您将窗口设置为1000px 500px时，它与图像完全对齐，没有溢出，两边都没有间隙。酷，让我们先把窗口缩小一点，500像素。
现在在500px 500px，我们在水平轴上有溢出。这很酷，这是THREE.PerspectiveCamera默认的行为方式。一秒钟内，我们将进一步介绍。
让我们调整它的大小，使其比图像更宽，1500px 500px。你在你的code中这样做，你会体验到在示例演示中被视为差距的东西。你会看到整个图像，两侧都有250px x 500px的间隙。
好的，我们不想看到，所以我们需要对图像做一些处理。我们希望图像“填满整个窗口”，因此它需要覆盖1500 x 500。它的纵横比是3:1，整个东西是2:1。我们希望图像宽度的1000px适合1500px，因此我们将图像放大1.5x。这给了我们750px的高度，我们只能适合500px。
如果图像位于网格上，n*const>nAnd if you picked some constant fov:n*const>nThere is only one ever position of the camera that would render this mesh to fit a 1000px x 500px>nSweet.Now when we apply the usual resize logic:nAnd we resize the screen to 500px x 500px we get your result. But when we go to 1500px x 500px we see gaps.nWe have:n500 x 5001000 x 5001500 x 500
让我们用500来划分所有这些：n*1x1 2x13x1/pre>
因此1/2的外观是理想的，并且与图像一致没有溢出或间隙。1x1有溢出，3x1有间隙。我们喜欢；1/2的行为。
这个怎么样？nif(aspect code>.setSize( 窗口宽度特别的？1 : = 三，数学，拉多德(阿坦数学（newH））>
小提琴：nhttps://jsfiddle.net/pailhead/qt5j2fbz/74因此，这是该示例的通用实现。您可以根据场景比例，通过反复试验找到这些数字，或者使用一些启发式方法来计算。@pailhead谢谢！！！你是我的救世主，
我不是什么都懂，但我的第一个考验是成功！
我认为使用fov会影响透视效果，但不会。
我将尝试为此写一篇文章，并附上一些插图。我觉得这种问题经常出现。我不喜欢一步一步地解释这个解决方案。n<nagman:npailhead:nblockquote
谭老师( 三，数学，德格托拉德（myFov/2））我想你在这一点上失去了我，我是我们学校数学课上最好的学生，但由于没有人告诉我这有什么用，我已经完全忘记了一切，你还说fov与身高有关吗？
Responsive renderer with limitsn

three.js有限制的响应渲染器

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形