I saw this example on Total Data by Mathieu Boulet on Dribbble but I don’t not is it possible to achieve behavior with threejs like that
it would be pretty easy to do with webglrendertargets. your examples uses planes whose textures display extra renders of an alternative scene with the same camera.
it’s not a rectangle but the same principle
another variation of it are portals, but they’re also just based on rendertargets
in vanilla threejs you need to look up THREE.WebGLRenderTarget
- create one
const buffer = new WebGLRenderTarget(width, height, options)
- render into it
gl.setRenderTarget(buffer)
gl.render(specialScene, sameCameraAsMainScene)
gl.setRenderTarget(null)
- plug the rendertarget.texture into the
mapproperty of your material
const m = new MeshStandardMaterial({ map: buffer.texture })
const g = new PlaneGeometry()
const mesh = new Mesh(g, m)
2 Likes
thank you so much !!! this is exactly what I want 