#Duplicate Needle Engine generate Bug

1 messages · Page 1 of 1 (latest)

frosty bay
#

Hello,

I'm trying to generate multiple needle canvas to manipulate 3D object with commune buttons.
But this error appear :

I'm using the React Template with Needle 3.6.15.

Does somebody have an idea ?

image.png
gilded vessel
#

Mh, I haven't seen that issue before.
Does that only happen in a production build? Not sure what "_a3" is

#

Needle Engine is designed to work with multiple instances per page, however I'm not sure if the react template is set up in a way that this works out of the box

frosty bay
#

Do you have an idea of how could I fix this issue ?

frosty bay
#

It seems to be a problem with Volume.ts error with postProcessing, in this part :

awake() {
        // ensure the profile is initialized
        this.sharedProfile?.init();

        if (debug) {
            console.log(this);
            console.log("Press P to toggle post processing");
            window.addEventListener("keydown", (e) => {
                if (e.key === "p") {
                    console.log("Toggle volume: " + this.name, !this.enabled);
                    this.enabled = !this.enabled;
                }
            });
        }
    }
#

Here the log from the canvas :

image.png
velvet pond
frosty bay
#

Yes, that's it
Here my React component :

const NeedleContainer = ({getNeedle, resetKey}) => {
  return (
      <div id="needleContainer">
        {resetKey ? <NeedleEngine key={resetKey} getNeedle={getNeedle} /> : ""}
      </div>
  );
};

const ResetNeedle = ({ handleReset }) => {
  return (
    <button style={{transform: "translateY(-50px) translateX(80px)", zIndex: "100"}} onClick={handleReset}>
      Réinitialiser la scène 3D
    </button>
  );
};

function NeedleEngine(props) {
  const needleRef = useRef()
  const files = JSON.stringify(globalThis["needle:codegen_files"])

  useEffect(() => {
    
    // console.log("Needle => ", needleRef)

    if(props.getNeedle) props.getNeedle(needleRef)

  }, [])
  

  return <needle-engine ref={needleRef} src={"assets/sceneRoot.glb"}>
      {/* @ts-ignore */}
      {/* <div className="loading"></div> */}
      {/* @ts-ignore */}
      {/* <div className="desktop ar"> {props.children}</div> */}
    </needle-engine>;
}

And I got this error when I duplicate my component like it :

<NeedleContainer getNeedle={getNeedle} handleReset={handleReset} resetKey={resetKey}/>
<NeedleContainer getNeedle={getNeedle} handleReset={handleReset} resetKey={resetKey}/>
#

I tried like it too :

<NeedleContainer getNeedle={getNeedle} handleReset={handleReset} resetKey={resetKey}/>
<needle-engine src={"assets/sceneRoot.glb"}></needle-engine>
velvet pond
#

Ah I see and then the exported scene contains PostProcessing and fails then? Does it work without the Volume component?

frosty bay
#

I will try

velvet pond
#

Thanks

frosty bay
#

The error disappear, and it seems that I can get different canvas

#

I need to verify if the canvas works well

velvet pond
#

Ok - so the problem is caused by the Volume component 🤔

frosty bay
#

Ok it works correctly, the others errors come from my scripts

velvet pond
#

You mean with the Volume component it also works now?

frosty bay
#

No

#

The Volume component don't work with multiple instances of needle canvas