Question

最后，我想渲染一个应用于整个屏幕的像素着色器的网站。

我可以看到如何使用three.js来渲染网站的iframe，我可以看到如何使用three.js将着色器应用于输出但是这些使用不同的渲染器（CSS3DRender和WebGLRenderer）并且它＃39 ;如何结合结果并不明显。

以下是我使用iframe和CSS3Render呈现网页的测试代码...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      overflow: hidden;
    }
    iframe {
        border: none;
        }
  </style>
</head>

<body>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/three.min.js"></script>
<script src="examples/js/controls/TrackballControls.js"></script>
<script src="examples/js/renderers/CSS3DRenderer.js"></script>
<script>

  var camera, controls, scene, renderer;

  function init() {
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 0, -1000);

    controls = new THREE.TrackballControls(camera);
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

    scene = new THREE.Scene();

    var html = [
      '<div style="width:1200px; height:600px;">',
      '<iframe src="https://www.firesharkstudios.com/" width="1200" height="600">',
      '</iframe>',
      '</div>'
    ].join('\n');
    var div = document.createElement('div');
    $(div).html(html);
    div = new THREE.CSS3DObject(div);
    div.position.x = 0;
    div.position.y = 0;
    div.position.z = -185;
    div.rotation.y = Math.PI;
    scene.add(div);

    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'absolute';
    renderer.domElement.style.top = 0;
    document.body.appendChild(renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
  }

  $(document ).ready(function() {
    init();
    animate();
  });
</script>
</body>
</html>

以下是我使用WebGLRenderer应用像素着色器的测试代码...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/three.min.js"></script>
<script src="examples/js/controls/TrackballControls.js"></script>

<script src="examples/js/shaders/DotScreenShader.js"></script>

<script src="examples/js/postprocessing/EffectComposer.js"></script>
<script src="examples/js/postprocessing/RenderPass.js"></script>
<script src="examples/js/postprocessing/DotScreenPass.js"></script>
<script src="examples/js/postprocessing/ShaderPass.js"></script>

<script>

  var controls, camera, scene, renderer, torus, light, composer;

  function init() {
    //camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 0, -1000);

    //controls
    controls = new THREE.TrackballControls(camera);
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

    //Scene
    scene = new THREE.Scene();

    //TorusGeometry
    torus = new THREE.Mesh(new THREE.TorusGeometry(120, 60, 40, 40),
                 new THREE.MeshNormalMaterial());
    torus.position.set(0, 0, 0);
    scene.add(torus);

    //HemisphereLight
    light = new THREE.HemisphereLight(0xffbf67, 0x15c6ff);
    scene.add(light);

    //WebGL Renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0xffffff, 1)
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.zIndex = 5;
    document.body.appendChild(renderer.domElement);

    //Shader
    composer = new THREE.EffectComposer( renderer );
    composer.addPass( new THREE.RenderPass( scene, camera ) );

    var dotScreenPass = new THREE.DotScreenPass();
    dotScreenPass.renderToScreen = true;
    composer.addPass(dotScreenPass);
  }

  function animate() {
    requestAnimationFrame(animate);
    composer.render();
    controls.update();
  }

  $(document ).ready(function() {
    init();
    animate();
  });
</script>
</body>
</html>

是否有某种方法可以将这些组合用于渲染网页，并将像素着色器应用于整个屏幕？

编辑：研究过CSS3DRenderer是否支持渲染到纹理，然后可以在应用了着色器的WebGLRenderer中显示（如http://gamedevelopment.tutsplus.com/tutorials/quick-tip-how-to-render-to-a-texture-in-threejs--cms-25686）。看起来CSS3DRenderer似乎不支持渲染纹理。

编辑：Uggh，还没有找到解决方案。目前这可能是不可能的。

使用three.js将着色器应用于CSS3DRenderer

0 个答案: