three.js问题求助

学three.js遇到了一个问题，画面出现了这种情况，有没有大哥能帮我看看是什么原因？

源码如下
import * as THREE from "three"
import {OrbitControls,RenderPass,EffectComposer,OutlinePass} from "three/addons";
import {onMounted} from "vue";
onMounted(()=>{
model_show()
})
const width=window.innerWidth;
const height=window.innerHeight;
const scene=new THREE.Scene()
const camera=new THREE.PerspectiveCamera(75,width/height)
const renderer=new THREE.WebGLRenderer({antialias:true})
const control=new OrbitControls(camera,renderer.domElement)
const composer=new EffectComposer(renderer)
// 创建发光边缘通道
const outline_pass=new OutlinePass(new THREE.Vector2(width,height),scene,camera)
const model_show=function (){
camera.position.set(10,10,10)
camera.lookAt(0,0,0)
renderer.setSize(width,height)
renderer.setPixelRatio(window.devicePixelRatio) //防止模糊
document.body.appendChild(renderer.domElement)
scene.add(new THREE.GridHelper(100,100))
scene.add(new THREE.AxesHelper(100))
const material=new THREE.MeshBasicMaterial({color:"green"})
const geometry=new THREE.BoxGeometry(2,2,2)
const cube=new THREE.Mesh(geometry,material)
outline_pass.selectedObjects=[cube]
scene.add(cube)
// 添加渲染器通道
composer.addPass(new RenderPass(scene,camera))
composer.addPass(outline_pass)
const animate=function (){
requestAnimationFrame(animate)
composer.render()
control.update()
}
animate()
}