three.js创建最简单的模型描边，失效了？

以下是我写的一个小小的案例，但就是最简单的案例却不出现模型描边效果？

// 创建一个几何体作为模型
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshPhongMaterial({color: 0x00ff00}); // 使用MeshPhongMaterial材质
const model = new THREE.Mesh(geometry, material);
scene.add(model);

let outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerWidth), scene, camera);
outlinePass.edgeStrength = 10;//包围线浓度
outlinePass.edgeGlow = 0.1;//边缘线范围
outlinePass.edgeThickness = 1;//边缘线浓度
outlinePass.pulsePeriod = 2;//包围线闪烁评率
outlinePass.visibleEdgeColor.set('#B31985');//包围线颜色
outlinePass.hiddenEdgeColor.set('#190a05');//被遮挡的边界线颜色
let renderPass = new RenderPass(scene, camera);
let composer = new EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(outlinePass);
outlinePass.selectedObjects = [model]
const animate = () => {
    composer.render()
    
    controls.update();
    // 获取相机位置并使点光源跟随相机
    const cameraVector = camera.position.clone();
    //灯光的位置跟随相机照亮
    light.getLight().position.set(cameraVector.x, cameraVector.y, cameraVector.z);
    // 渲染场景
    // TWEEN.update(); // 更新Tween动画
    css2Renderer.render(scene, camera);

    css3Renderer.render(scene, camera);
 
    renderer.render(scene, camera)

    requestAnimationFrame(animate)
}

animate();

然后经过我的逐一排查终于发现了这个问题，在animate这个函数中composer.render()这行代码的应该放在renderer.render(scene, camera)后面去执行，放在前面是无效的，原因是因为vue函数会把函数里面的代码读取完毕之后再去更新视图，而这个时候renderer.render(scene, camera)这个方法会重新渲染视图，所以就会重置视图，所以composer.render()放在前面无效,以下是正确的书写方式：

const animate = () => {
    controls.update();
    // 获取相机位置并使点光源跟随相机
    const cameraVector = camera.position.clone();
    //灯光的位置跟随相机照亮
    light.getLight().position.set(cameraVector.x, cameraVector.y, cameraVector.z);
    // 渲染场景
    // TWEEN.update(); // 更新Tween动画
    css2Renderer.render(scene, camera);

    css3Renderer.render(scene, camera);
 
    renderer.render(scene, camera)
    
    composer.render()
    
    requestAnimationFrame(animate)
}

animate();