Rendering CubeTextures with Three.js Off-DOM

Based on the information available, I can provide some guidance about rendering CubeTextures in Three.js without attaching the renderer to the DOM.

Understanding the Issue

In your jsfiddle example, you're trying to create an environment map using a CubeTexture. The difference between lines 23 and 24 appears to be related to how the renderer is being initialized and attached to the DOM.

Three.js Renderers and DOM Attachment

Three.js's WebGLRenderer doesn't inherently require attachment to the DOM to function. You can create a renderer without appending its canvas to the document, and it will still be able to render to its internal canvas.

For your specific use case of displaying the same scene in multiple views, you have a few options:

1. Create a single renderer that's not attached to the DOM and use it to render your CubeTexture. Then use the resulting texture across multiple view-specific renderers.

2. Use WebGLRenderTarget or WebGLCubeRenderTarget to render to an off-screen buffer, which can then be used as a texture in your scene.

Implementation Approach

Here's how you might approach this:

JAVASCRIPTCopied
// Create a renderer without attaching to DOM
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
// Don't append to document: document.body.appendChild(renderer.domElement);

// Create a cube render target
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(size);

// Use the renderer to update the cube render target
renderer.setRenderTarget(cubeRenderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);

// Now cubeRenderTarget.texture can be used as your environment map
// across multiple view-specific renderers

For your specific case with HDR loading and environment maps, you might need to use the PMREMGenerator to process your HDR texture into a suitable environment map format, which can then be shared across multiple renderers/views.

Remember that while the renderer doesn't need to be attached to the DOM to function, it still needs a valid WebGL context, which is created when you instantiate the WebGLRenderer.