FilmPass in three.js funktioniert nicht

Question

Also versuche ich gerade, den FilmPass-Effekt in three.js zu prototypieren und egal, was ich versuche, bekomme ich immer die gleichen Fehlermeldungen. Ich war auf einer Menge verschiedener Websites und ich habe immer wieder Probleme. Hier

ist der Code, ich verwende:

<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> 

Hier sind die Fehlermeldungen Ich erhalte:

Answer 1

Die Codezeile 38 enthält einen Verweis auf THREE.Pass.prototype was noch nicht definiert ist. THREE.Pass ist in EffectComposer.js definiert, Sie müssen das also höher in Ihre Skripte legen.

<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>