急！creator3d的适配问题

Creator 2.x
#1

图1

image.png1635×839 203 KB

上面是1920*1080正常的情况，填充满

图2

image.png1568×734 150 KB

上面是iphoneX，正常情况下，红色背景部分应该是正常应该显示的区域，两边的黑边我们认为不做这样的适配，是正常的可显示的就应该是红色部分

图3

image.png1725×916 277 KB

上面是4:3的比例，红色上面那一部分，是多出来的，但3d的部分并没有进行缩放，导致部分3d模型在窗体可视区域之外

版本：2.3.2
平台：h5

在场景中，ui摄像机和3d摄像机是分开的，canva是19201080，在不同分辨率的适配下，正常的2d是自适应的，但场景中的3d模型没有自适应，如上图显示的，红色部分是背景，他是和canvas一样的分辨率，那么在选用不同设备的时候，当填充高宽的情况下，应该是界面所有展示部分应按照实际的分辨率进行缩放对吧，保持canvas的显示比例，然而现在不是这样的，如图，当选用19201080（16:9）的设备时，他是填充满的，这是期望效果，在选中非1920*1080的分辨率的情况下，那么我们是希望canvas能显示的部分是按照16:9来显示的，当前2d的项目是对的，但是如果有了3d，那么3d不会发生任何变化，即会出现3d部分超出应该显示的区域，超出是第一个问题，第二个问题就是3d的模型没有根据当前的显示比例进行缩放，例如像图3那样，那么就会造成有部分内容显示不出来，请问这是我设置有问题吗？

有没有办法让3d的模型能够和2d的一样，就显示需要显示的部分，并且会随canvas进行放大缩小？

1赞
cocos creator 2.4.2 3d摄像机适配问题
Creator 3D Camera按宽度适配的解决方案
#2

有人能解答一下吗？请问现在是有解决方案，还是需要等下一个版本？

#3

还是没有任何回复？哪怕一个建设的建议试一下就好啊，你们都没遇到过这个问题？

#5

@jare 大佬能看一下吗

#6

@jare @Panda 两位大佬可以帮忙看一下吗，如果解决不了我也理解，我只想知道有没有方案可以解决？

#7

同问哈

#8

正文太长，没细看了。

总之就是，3D相机，透视模式有一个属性fov，是设置视锥角的，这个角度是指垂直方向的，结论就是，屏幕长宽比变化时，3D相机看到的内容，在垂直方向的范围是一样的，水平方向会变化。

怎么让相机在水平方向看到的范围一样呢？

在cocos中编辑场景时，Canvas节点高度为 H1，相机与拍摄目标的距离为 L1，
实际运行游戏时，Canvas节点高度为 H2，相机与拍摄目标的距离应该为 L2，则：

H1 / H2 == L1 / L2

所以，L2 = L1 / H1 * H2。

知道该怎么做了吧。

2赞
#10

非常非常非常的感谢，我试试，太感谢了，万分感谢

#11

感谢大佬~~ 按这个原理，给Camera挂个组件根据实际分辨率修改一下fov就可以了~~~

#12

已解决，附上解决方案：

import { _decorator, Component, Node, CameraComponent, view, SystemEventType, systemEvent } from "cc";
const { ccclass, property, requireComponent } = _decorator;

@ccclass
@requireComponent(CameraComponent)
export class FitWidthCamerats extends Component {

    private _camera!: CameraComponent;
    private _defaultTanFov!: number;

    onLoad() {
        this._camera = this.getComponent(CameraComponent)!;
        this._defaultTanFov = Math.tan(this._camera.fov / 180 * Math.PI);
        this.updateFov();
        window.addEventListener('resize', this.updateFov);
    }

    updateFov = () => {
        let tan2 = view.getVisibleSize().height / view.getDesignResolutionSize().height * this._defaultTanFov;
        this._camera.fov = Math.atan(tan2) / Math.PI * 180;
    }

    onDestroy() {
        window.removeEventListener('resize', this.updateFov);
    }

}

final.gif661×1001 1.69 MB

3赞
#13

mark…

#14

求救，我用了您的方法，但是無論我怎麼改變視窗大小，用預覽或是打包後的，
view.getVisibleSize().height 和 view.getDesignResolutionSize().height 這兩個值仍然固定不變。
還是說creator 3.0的方式需要改寫了？