Three.js中视角指示器viewHelper使用问题

在使用Three.js中的viewHelper时，会发现明明已经引入了相关方法，也渲染了，但是场景中却没有出现视角指示器

//.......
const viewHelper = new ViewHelper(camera, renderer.domElement)
//.......
function animate() {
		requestAnimationFrame(animate);
		viewHelper.render(renderer)
		renderer.render(scene, camera);

}
animate();

这是因为在添加viewHelper之后 viewHelper.render()和renderer.render()发生冲突，哪个在后面就渲染谁，要么场景全黑有helper，要么没有helper

解决方案：

添加   renderer.autoClear = false;

//.......
const viewHelper = new ViewHelper(camera, renderer.domElement)
renderer.autoClear = false;
//.......
function animate() {
		requestAnimationFrame(animate);
		viewHelper.render(renderer)
		renderer.render(scene, camera);
}
animate();

原理：

执行渲染器WebGLRenderer的渲染方法.render()，本质上就相当于调用WebGL绘制函数gl.drawArrays()，每执行一次渲染方法.render()帧缓冲区都会得到新的片元(像素)数据，覆盖帧缓冲区原来的像素数据，或者说每执行一次渲染方法.render()，canvas画布更新一次，canvas画布上上次执行.render()得到像素被覆盖。