Getting window is not defined when I use the three-fatline npm package in my nextjs project

Questions
,
1

I’m getting window is not defined error when I tried to use the three-fatline package.

fat-line
fat-line720×70 12.4 KB

2

this looks like a clone of line2, which is part of three and you don’t need an extra library for that

import { Line2 } from 'three/examples/jsm/lines/Line2'

threes thick line implementation has a few features missing, i think attenuation for instance, in that case you would normally use meshline by thespite which is maintained here: GitHub - pmndrs/meshline: 🪱 Mesh replacement for THREE.Line

3

It seems this code makes it not node compatible:

The problematic snippet is not present in the three.js repository.

Official demos: three.js examples

4

image

Edit fiddle - JSFiddle - Code Playground

I’m trying to replace the line with Line2 to be able to update the line with the mouse position.
I saw the three.meshLine package. But this meshline is a meshGeometry so that I can’t integrate into my previous code which is line.

5

Yes, I checked the same file as you.
There is a problem with the window variable.

https://threejs.org/examples/?q=fat#webgl_lines_fat
I checked this example first. I still can’t be able to implement the three/addons to my website.

6

Found a solution for this, use nextjs lazy loading to force no SSR can solve this error.

const Orbits = dynamic(() => import('@/app/ui/three/feature/orbits'), {ssr: false})