We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Issue with Black Model Display in secondaryRenderer When Creating Multiple Views

Home Forums Programming Issue with Black Model Display in secondaryRenderer When Creating Multiple Views

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #80614
    anan
    Participant

    Hello everyone, I want to create multiple views in my app, and I referred to this demo: https://threejs.org/examples/?q=line#webgl_lines_fat. I created a new app through the App Manager, and then inserted the following code using the exec script puzzle. After running the project, I noticed that the model appears black in the secondaryRenderer window. The possible reason might be that the HDR exported from Blender is not rendering correctly in the secondaryRenderer. Could you please help me figure out how to resolve this issue? Thank you! :rose:

    
    const container = document.createElement('div');
    container.id = 'secondary-view';
    container.style.position = 'absolute';
    container.style.top = '20px';
    container.style.right = '20px';
    container.style.width = '300px';
    container.style.height = '300px';
    document.body.appendChild(container);
    
    const secondaryRenderer = new v3d.WebGLRenderer({
      antialias: true,
      canvas: document.createElement('canvas')
    });
    
    secondaryRenderer.setPixelRatio(window.devicePixelRatio);
    secondaryRenderer.setSize(container.clientWidth, container.clientHeight);
    secondaryRenderer.autoClear = false;
    container.appendChild(secondaryRenderer.domElement);
    
    secondaryRenderer.physicallyCorrectLights = app.renderer.physicallyCorrectLights;
    secondaryRenderer.outputEncoding = app.renderer.outputEncoding;
    secondaryRenderer.toneMapping = app.renderer.toneMapping;
    secondaryRenderer.toneMappingExposure = app.renderer.toneMappingExposure;
    
    const camera2 = app.scene.getObjectByName('Camera')
    
    function bindEnvironment(scene) {
      scene.traverse((obj) => {
        if (obj.material) {
          if (obj.material.isMeshStandardMaterial) {
            obj.material.envMap = scene.environment;
            obj.material.needsUpdate = true;
          }
          if (obj.material.isShaderMaterial) {
            obj.material.uniforms.envMap.value = scene.environment;
            obj.material.uniformsNeedUpdate = true;
          }
        }
      });
    }
    
    bindEnvironment(app.scene);
    
    function animate() {
      requestAnimationFrame(animate);
    
      secondaryRenderer.render(app.scene, camera2);
    }
    
    animate();
    
    window.addEventListener('resize', () => {
      const width = container.clientWidth;
      const height = container.clientHeight;
      
      secondaryRenderer.setSize(width, height);
    });
    #80615

    Hi,
    You might take a look at this plugin which simplifies creation of multi-view apps.

    Soft8Soft Tech Chief
    X | FB | LinkedIn

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.