three.js 辅助坐标系不显示，怎么解决？

问题遇到的现象和发生背景

我使用 vue 3和 three.js 编写代码，我在场景中添加了辅助坐标系，但是页面窗口在最大化时没有显示坐标系，如果我把开发者工具向上拉，此时刷新页面能看到一条 y 轴。怎么能正确显示辅助坐标系？

用代码块功能插入代码，请勿粘贴截图

//初始化场景
    initThree(){
        let _this = this;
        let width = this.el.offsetWidth;
        let height = this.el.offsetHeight;
        
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000);
        
        this.renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true,
        });
        
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(width, height);
        this.el.append(this.renderer.domElement);
        this.renderer.setClearColor('#000');
        
        window.addEventListener('resize', function(){
            _this.camera.aspect = _this.el.offsetWidth / _this.el.offsetHeight;
            _this.camera.updateProjectionMatrix();
            _this.renderer.setSize(_this.el.offsetWidth, _this.el.offsetHeight);
        }, false);
    }
    
    //初始化 helper
    initHelper(){
        this.scene.add(new THREE.AxesHelper(100));
    }

运行结果及报错内容

只看到黑色背景的页面，无报错。

我的解答思路和尝试过的方法

我把宽高改为 window.innerWidth, window.innerHeight，结果是一样的。

我想要达到的结果

辅助坐标系显示在页面中间。

camera.lookAt( 0, 0, 0 );

我找到问题所在了，应该加上这行，辅助坐标系就能显示了。

new THREE.AxesHelper(5)