javascript - Three.js - 仅来自 THREE.FilmPass() 的噪声动画

Question

在我的 Learning Three.js 书中 Chapter Eleven 02-post-processing-simple-passes.html ，作者能够通过 var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);

制作噪音动画

In the book's code example轨道运动不会引起噪音效果，因为当我删除轨道动画时，噪音动画仍然存在。它不是来自纹理，因为当我移除它们时，噪声效果仍然存在。

我非常想知道这是如何通过使用 THREE.FilmPass() 完成的。

我已经尝试在自己的实验中使用 THREE.FilmPass()，但无法产生噪音效果。相反，我只是得到了没有噪音的正常扫描线效果。

我所做的不同之处在于:1) 我使用的是 2d 几何体而不是 3d 几何体，2) 不使用 2 个相机 3) 不使用定向光，4) 不使用 THREE.CopyShader 重用我的几何体，5) 不使用轨道。

 function init() {

    var stats = initStats();

    var scene = new THREE.Scene();

    var camera = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);

    scene.add(camera);

    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;

    var coupleTexture =  THREE.ImageUtils.loadTexture('./sina1.jpg');

    var planeGeometry = new THREE.PlaneGeometry(1, 1);
    var planeMaterial = new THREE.MeshBasicMaterial({map: coupleTexture,
                                                    depthTest: false });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.scale.set(1000, 1000, 1, 1);
           scene.add(plane);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    var renderPass = new THREE.RenderPass(scene, camera);
    var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
    effectFilm.renderToScreen = true;

    var composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderPass);
    composer.addPass(effectFilm);



    render();

    function render() {
        stats.update();
        requestAnimationFrame(render);
        composer.render(scene, camera);
    }

Answer 1

好问题!我打开了教程文件，基本上删除和替换了一些东西，直到我进入你的阶段。噪声的产生取决于时间，您最后改变的一件事是渲染场景的方式!尝试将 composer.render(scene, camera); 替换为

var delta = clock.getDelta();
composer.render(delta);

同时将 var clock = new THREE.Clock(); 添加到您的初始化函数中。