Hello. I’m having real trouble getting anything to show up in my browser. For info I’m using next.js 13 with the App router. As you’ll see from the image, everything is just white. Any help would be appreciated.
by user 426066705643732993
Looks a bit like the height is 0 and thus you don’t see anything? Mind checking with chrome inspector
- if height of the Needle element is 0 (set some height via css)
- if there are any errors in the console (post them here)
Hi this is the error in the console: /node_modules/@needle-tools/engine/lib/engine/engine_physics_rapier.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)
Import trace for requested module:
./node_modules/@needle-tools/engine/lib/engine/engine_physics_rapier.js
./node_modules/@needle-tools/engine/lib/engine/api.js
./node_modules/@needle-tools/engine/lib/needle-engine.js
./src/utils/providers/NeedleEngine.tsx
./src/components/ClientComponents/AR/ARCanvas.tsx
by user 426066705643732993
Also this → WARNING: Multiple instances of Three.js being imported.
eval @ three.module.js:49971
by user 426066705643732993
Hi, have you had a look at the sample here? GitHub - needle-engine/nextjs-sample: Vercel sample project to add Needle Engine — www.needle.tools
The warning above doesnt cause the page to stay white.
I have. Everything is implemented the same as that project.
by user 426066705643732993
It looks a bit like the html element is perhaps just too small or not loading a scene? (no src assigned?)
Because the WebXR buttons are visible
There’s a source assigned.
by user 426066705643732993
Can you check the size of the html element using the browser debug console?
Adding the style width+height might what is missing perhaps
I have this:
by user 426066705643732993
<canvas data-engine="three.js r147dev" width="0" height="0" style="display: block; width: 100%; height: 100%;">
</canvas>
<div class="ar desktop-session-active" style="position: absolute; width: 100%; height: 100%; display: none; visibility: hidden;"></div><div class="webxr-buttons"><button id="ARButton" class="webxr-ar-button webxr-button" style="padding: 12px 6px; border: 1px solid rgb(255, 255, 255); border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgb(255, 255, 255); font: 13px sans-serif; text-align: center; opacity: 0.5; outline: none; z-index: 999; cursor: pointer; width: 100px;">START AR</button><button id="VRButton" class="webxr-ar-button webxr-button" style="padding: 12px 6px; border: 1px solid rgb(255, 255, 255); border-radius: 4px; background: rgba(0, 0, 0, 0.1); color: rgb(255, 255, 255); font: 13px sans-serif; text-align: center; opacity: 0.5; outline: none; z-index: 999; cursor: pointer; width: 100px;">ENTER VR</button></div><div data-needle_engine_debug_overlay="" class="ar desktop debug-container" style="position: absolute; top: 0px; right: 5px; padding-top: 0px; max-width: 70%; max-height: calc(100% - 5px); z-index: 1000; display: flex; align-items: end; flex-direction: column; color: white; overflow: auto;"><style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
div[data-needle_engine_debug_overlay] {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
div[data-needle_engine_debug_overlay] strong {
font-weight: 700;
}
div[data-needle_engine_debug_overlay] a {
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
div[data-needle_engine_debug_overlay] a:hover {
text-decoration: none;
border: none;
}
div[data-needle_engine_debug_overlay] .log strong {
color: rgba(200,200,200,.9);
}
div[data-needle_engine_debug_overlay] .warn strong {
color: rgba(255,255,230, 1);
}
div[data-needle_engine_debug_overlay] .error strong {
color: rgba(255,100,120, 1);
}
</style></div></needle-engine> ```
*by user 426066705643732993*And that’s with me adding:
by user 426066705643732993
<NeedleEngine
loading-style="light"
src={src}
style={{ width: "100%", height: "100%" }}
/>
</div>
by user 426066705643732993
I’m now also getting:
by user 426066705643732993
