Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with orbit controls and effect composer

Tags:

three.js

I'm Gabriele and I'm new in three.js world, I have an issue with a code, my orbitcontrols were works good, but when I added the composer to make the scene blurred they stopped working... Google's Console (in the browser) don't show me any error, so I don't know what happening to the code. I declared every js that I used in the code.

Somebody can help me please?

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.dispose();
controls.update();
controls.reset();

    composer = new THREE.EffectComposer(renderer);

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

     horizontalBlur = new THREE.ShaderPass({
        ...THREE.HorizontalBlurShader,
            uniforms: {
        ...THREE.HorizontalBlurShader.uniforms,
      h: {value: 1.0 / window.innerWidth * window.devicePixelRatio},
    },
  })
 composer.addPass(horizontalBlur)

  verticalBlur = new THREE.ShaderPass({
        ...THREE.VerticalBlurShader,
             uniforms: {
        ...THREE.VerticalBlurShader.uniforms,
      v: {value: 1.0 / window.innerHeight * window.devicePixelRatio },
    },
  })
  composer.addPass(verticalBlur)
}
like image 704
Gabriele Sabatino Avatar asked Mar 23 '26 02:03

Gabriele Sabatino


1 Answers

controls.dispose();
controls.update();
controls.reset();

There is no need to call these methods. Especially calling dispose() is problematic since this method will remove all event listeners of OrbitControls. Just do this and try again:

controls = new THREE.OrbitControls(camera, renderer.domElement);

In general, the usage of EffectComposer should not affect controls in any form.

like image 118
Mugen87 Avatar answered Mar 25 '26 16:03

Mugen87



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!