问关于如何在墙上创建窗户的建议

EN

const gl = renderer.getContext() //obtain the actual webgl context, because three has no stencil functionality

const myWindow, myWall //two meshes, you loaded them, instantiated them

//for a proof of concept you can do something like this

const maskScene = new THREE.Scene()
const wallScene = new THREE.Scene()
const windowScene = new THREE.Scene()

maskScene.add(myWindow)
wallScene.add(myWall)
windowScene.add(myWindow)

render(){
  gl.enable(gl.STENCIL_TEST) //enable stencil testing

  gl.clearStencil( 0 ) //set stencil clear value

  gl.clear( _gl.STENCIL_BUFFER_BIT ) //clear the stencil buffer with set value

  gl.stencilFunc( gl.ALWAYS, 1, 1) //always pass the stencil test, with ref 1


  gl.stencilOp( gl.REPLACE , gl.REPLACE , gl.REPLACE ) //replace the stencil value with the ref 

  gl.colorMask(false, false, false, false) //do not write any color 
  gl.depthMask(false) //do not write to depth

  myRenderer.render(maskScene, myCamera) //only the stencil is drawn


  //now you have a region in the frame buffer with stencil value of 1, and the rest 0, you can draw the wall in 0 and the window back at 1

  gl.colorMask(true, true, true, true) //enable writing
  gl.depthMask(true)

  gl.stencilFunc( gl.EQUAL , 0 , 1 )  //set the stencil function to EQUAL
  gl.stencilOp( gl.KEEP, gl.KEEP, gl.KEEP ) //keep the stencil value in all three tests

  myRenderer.render( wallScene, myCamera ) //draw the wall where stencil is 0 (around the window)


  gl.stencilFunc( gl.EQUAL , 1 , 1 ) // now func is EQUAL but to value 1

  myRenderer.render( windowScene, myCamera ) //draw the window

}