Duplicate Needle Engine generate Bug

🌵 Needle Engine
1

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
image.png915×264 42.5 KB

Original Post on Discord

by user 224464722878005248

2

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

3

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

4

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

by user 224464722878005248

5

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;
                }
            });
        }
    }

by user 224464722878005248

6

Here the log from the canvas :
image.png

by user 224464722878005248

7

Hi, can you explain what you do here? Do you mean you have a webpage with multiple components ?

8

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

by user 224464722878005248

9

I tried like it too :

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

by user 224464722878005248

10

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

11

I will try

by user 224464722878005248

12

Thanks

13

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

by user 224464722878005248

14

I need to verify if the canvas works well

by user 224464722878005248

15

Ok - so the problem is caused by the Volume component :thinking:

16

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

by user 224464722878005248

17

You mean with the Volume component it also works now?

18

No

by user 224464722878005248

19

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

by user 224464722878005248

20

Thanks for the clarification! I added a task for it :slightly_smiling_face: