Vite Can not resolve #include <uv2_pars_vertex>

Questions
1

Hi, I’m trying to integrate an gui library that is targeting older three0.134. When I put it in my project using three 0.153, vite has this error

1. Can not resolve #include <uv2_pars_vertex> at includeReplacer (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:11783:11) at String.replace (<anonymous>) at resolveIncludes (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:11778:17) at new WebGLProgram (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:12126:18) at Object.acquireProgram (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:12715:17) at getProgram (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:17585:32) at setProgram (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:17703:19) at WebGLRenderer.renderBufferDirect (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:17178:23) at renderObject (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:17553:15) at renderObjects (http://localhost:5173/node_modules/.vite/deps/three.js?v=e24017c3:17535:11)
2. this: undefined
3. include: "uv2_pars_vertex"

I’m new to three.js, how do I resolve this?

2

FairyGUI isn’t compatible with three versions above 151 - since it wasn’t updated to handle multiple UV channels.

See this and this for more details - but unless the shaders in in FairyGUI are updated, it likely won’t work with newer three.

3

Ok, thanks. So I’m trying to fix the shader, it compile but the color is wrong. It seems threejs changed something it how it calculates the alpha

This is the original shader code

        void main() {
            #include <clipping_planes_fragment>
            vec4 diffuseColor = vec4( diffuse, opacity );
            #include <logdepthbuf_fragment>
            #ifdef USE_MAP
                #ifdef TEXT
                    vec4 sampleColor = texture2D( map, vUv );
                    if(vColor.a<0.1)
                        diffuseColor.a *= sampleColor.r;
                    else if(vColor.a<0.4)
                        diffuseColor.a *= sampleColor.g;
                    else
                        diffuseColor.a *= sampleColor.b;
                #else
                    #include <map_fragment>
                #endif
            #endif

The text disppears. If I comment it the whole thing out,

            #ifdef USE_MAP
                #ifdef TEXT
//                    vec4 sampleColor = texture2D( map, vUv );
//                    if(vColor.a<0.1)
//                        diffuseColor.a *= sampleColor.r;
//                    else if(vColor.a<0.4)
//                        diffuseColor.a *= sampleColor.g;
//                    else
//                        diffuseColor.a *= sampleColor.b;
                #else
                    #include <map_fragment>
                #endif
            #endif

image
image1148×646 41.4 KB

The text alpha is wrong, and also the texture color seems different. Something changed in how threejs calculates color?