three.js
three.js copied to clipboard
WebGLRenderTarget Texture breaks glTF export
Description
WebGLRenderTarget textures assigned to objects in the scene cause the GLTFExporter to throw at image export resulting in the glTF export to not work at all
Not sure how to fix this properly - but I believe this shouldnt cause the export from failing altogether
Reproduction steps
- Create a WebGLRenderTarget
- Assign
renderTarget.texture
to some material used in the scene - Try export with GLTFExporter
- Observe error
Error: THREE.GLTFExporter: Invalid image type. Use HTMLImageElement, HTMLCanvasElement, ImageBitmap or OffscreenCanvas.
at GLTFWriter.processImage (GLTFExporter.js:1323:12)
at GLTFWriter.processTexture (GLTFExporter.js:1430:17)
at GLTFWriter.processMaterial (GLTFExporter.js:1516:17)
at GLTFWriter.processMesh (GLTFExporter.js:1929:26)
at GLTFWriter.processNode (GLTFExporter.js:2284:27)
at GLTFWriter.processScene (GLTFExporter.js:2360:28)
at GLTFWriter.processInput (GLTFExporter.js:2416:10)
at GLTFWriter.write (GLTFExporter.js:552:8)
at GLTFExporter.parse (GLTFExporter.js:202:10)
at exportGLTF (misc_exporter_gltf.html:43:18)
Code
setTimeout(()=>{
const renderTexture = new THREE.WebGLRenderTarget(256, 256);
// not necessary but let's render the scene once
renderer.setRenderTarget( renderTexture );
renderer.render( scene1, camera );
renderer.setRenderTarget( null );
// add the render texture to an object in the scene
const cube = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xffffff, map: renderTexture.texture } ) );
scene1.add( cube );
}, 10)
Live example
https://github.com/needle-tools/three.js/tree/webglrendertarget-breaks-gltfexport
Screenshots
No response
Version
r165
Device
Desktop, Mobile, Headset
Browser
Chrome, Safari
OS
MacOS