three.js中的FilmPass無法正常工作

Question

所以我現在只是試圖在three.js中將FilmPass效果原型化，無論我嘗試什麼，我都會收到相同的錯誤消息。我一直在很多不同的網站上，並不斷遇到問題。

這裏是我使用的代碼：

<script src="three.min.js"></script> 

    <script src="CopyShader.js"></script> 
    <script src="DotScreenShader.js"></script> 
    <script src="RGBShiftShader.js"></script> 
    <script src="FilmShader.js"></script> 
    <script src="FilmPass.js"></script> 

    <script src="EffectComposer.js"></script> 
    <script src="RenderPass.js"></script> 
    <script src="MaskPass.js"></script> 
    <script src="ShaderPass.js"></script> 


    <script> 

     var camera, scene, renderer, composer; 
     var object, light; 

     init(); 
     animate(); 

     function init() { 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      var composer = new THREE.EffectComposer(renderer); 

      // 

      camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.z = 400; 

      scene = new THREE.Scene(); 
      scene.fog = new THREE.Fog(0x000000, 1, 1000); 

      object = new THREE.Object3D(); 
      scene.add(object); 

      var geometry = new THREE.SphereGeometry(1, 4, 4); 
      var material = new THREE.MeshPhongMaterial({ color: 0xffffff, shading: THREE.FlatShading }); 

      for (var i = 0; i < 100; i ++) { 

       var mesh = new THREE.Mesh(geometry, material); 
       mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize(); 
       mesh.position.multiplyScalar(Math.random() * 400); 
       mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2); 
       mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50; 
       object.add(mesh); 

      } 

      scene.add(new THREE.AmbientLight(0x222222)); 

      light = new THREE.DirectionalLight(0xffffff); 
      light.position.set(1, 1, 1); 
      scene.add(light); 

      // postprocessing 

      composer = new THREE.EffectComposer(renderer); 
      // composer.addPass(new THREE.RenderPass(scene, camera)); 
      // 
      // var effect = new THREE.ShaderPass(THREE.DotScreenShader); 
      // effect.uniforms[ 'scale' ].value = 4; 
      // composer.addPass(effect); 
      // 
      // var effect = new THREE.ShaderPass(THREE.RGBShiftShader); 
      // effect.uniforms[ 'amount' ].value = 0.0015; 
      // effect.renderToScreen = true; 
      // composer.addPass(effect); 



      var renderPass = new THREE.RenderPass(scene, camera); 
      composer.addPass(renderPass); 

      var effectFilm = new THREE.FilmPass(); 
      effectFilm.renderToScreen = true; 
      composer.addPass(effectFilm); 


      var clock = new THREE.Clock() 

      function render() { 
       var delta = clock.getDelta(); 
       composer.render(delta); //parameter must be set with render 
       requestAnimationFrame(render); 
      } 
      render(); 
      // 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 
      composer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 

      object.rotation.x += 0.005; 
      object.rotation.y += 0.01; 

     // composer.render(); 

     } 

    </script> 

</body> 

下面是錯誤消息我得到：

Answer 1

該問題的行38包含了THREE.Pass.prototype一個參考尚未定義。 THREE.Pass在EffectComposer.js中定義，因此您需要將其放在腳本中。

<script src="EffectComposer.js"></script> <!-- ADD HERE --> 
<script src="CopyShader.js"></script> 
<script src="DotScreenShader.js"></script> 
<script src="RGBShiftShader.js"></script> 
<script src="FilmShader.js"></script> 
<script src="FilmPass.js"></script> 

<!-- <script src="EffectComposer.js"></script> REMOVE HERE --> 
<script src="RenderPass.js"></script> 
<script src="MaskPass.js"></script> 
<script src="ShaderPass.js"></script>