three.js一个渲染器渲染双场景的相互覆盖问题

问题：

        在three.js中，想要用一个renderer渲染两个尺寸相同的场景，场景A覆盖在场景B上时，达到以下效果：场景A完全透明且不遮盖场景B，场景A与场景B上的模型可正常渲染至页面。

  render() {

    renderer.setViewport(0, 0, clientWidth, clientHeight)

    renderer.render(sceneB, camera)

    renderer.render(sceneA, camera)
  }

       以上这样渲染场景，场景A永远会覆盖场景B所得到的像素，无法在页面中得到两个场景渲染出来的像素。

---

原理：

        在render()时，每执行一次 .render() 方法，帧缓冲区就会得到新的像素，覆盖上有一次渲染得到的像素。每次画布更新时，上一次调用时渲染得到像素被覆盖，如果希望得到多次渲染的数据叠加，就需要对渲染器的 .autoClear 属性值设置为false，使其不再清除。

renderer.autoClear = false    //默认为true

 

---

解决思路：

   设置渲染函数时在前一次渲染时不清除渲染像素，只在最后全部重新渲染

const sceneA = new THREE.Scene()

const sceneB = new THREE.Scene()

 
render() {

    this.renderer.setViewport(0, 0, clientWidth, clientHeight)

    this.renderer.render(this.sceneB, this.camera)

    this.renderer.autoClear = false

    this.renderer.render(this.sceneA, this.camera)

    this.renderer.autoClear = true
  }