Causes different Render Effect. #5

Azure-Phoenix · 2024-11-12T15:12:25Z

Hi!
This Fluid is a great library!
But I found an issue while using this.

import { Suspense } from "react";
import * as THREE from "three";

import { Canvas, useLoader } from "@react-three/fiber";

import { PerspectiveCamera } from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

import { Fluid } from "@whatisjery/react-fluid-distortion";
import { EffectComposer } from "@react-three/postprocessing";

import CanvasLoader from "../../../components/three.js/CanvasLoader";
import HeroCamera from "../../../components/three.js/HeroCamera";

const Hand = () => {
  const handModel = useLoader(GLTFLoader, "models/untitled.glb", (loader) => {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("/draco/");
    loader.setDRACOLoader(dracoLoader);
  });

  return (
    <div className="w-full h-full inset-0 fixed">
      <Canvas className="w-full h-full">
        <EffectComposer>
          <Fluid />
          <Suspense fallback={<CanvasLoader />}>
            <PerspectiveCamera makeDefault position={[0, 0, 30]} />
            <HeroCamera>
              {/* <axesHelper args={[5]} /> */}
              <primitive object={handModel.scene} scale={2} />
            </HeroCamera>
            <ambientLight intensity={10} />
          </Suspense>
        </EffectComposer>
      </Canvas>
    </div>
  );
};

export default Hand;

Here, as you can see, without Fluid, my gradient transparent arm looks fine, but with Fluid, it looks awful.
What is the issue here?
Could you help me with this?

chrome_ipyW4nwxZg.mp4

Azure-Phoenix · 2024-11-12T15:26:20Z

I just found what makes this issue here.
That's showBackground props.
If I set it as false, gradient works fine.
But I really need to show background.
How to fix this issue? @whatisjery

chrome_3PDdZ7B1FN.mp4

whatisjery · 2024-11-15T06:01:56Z

Have you tried moving the Suspense block outside EffectComposer? It should only be used to render post processing effects.

Azure-Phoenix · 2024-11-15T06:35:29Z

Thanks for your reply first of all!!

Have you tried moving the Suspense block outside EffectComposer? It should only be used to render post processing effects.

Yeah, I have tried just now.
But.. nothing changes..

Azure-Phoenix · 2024-11-15T06:41:03Z

https://drive.google.com/file/d/1BKJXrLP8HEu6VpfVADVw3FC6JrsVPjR6/view?usp=sharing

This is just that model file.
As I said before, when I set showBackground as false, it works fine. But not good when I set it as true.
I think it's due to some different renderer settings between true and false of showBackground.
But I have no clue what is different..

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Causes different Render Effect. #5

Causes different Render Effect. #5

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Causes different Render Effect. #5

Causes different Render Effect. #5

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!