three-exports.js

// Only export the things that are actually needed, cut out everything else

export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'
export { ShaderLib } from 'three/src/renderers/shaders/ShaderLib.js'
export { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js'
export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js'
export { ShaderChunk } from 'three/src/renderers/shaders/ShaderChunk.js'
export { Scene } from 'three/src/scenes/Scene.js'
export { Mesh } from 'three/src/objects/Mesh.js'
export { LineSegments } from 'three/src/objects/LineSegments.js'
export { Line } from 'three/src/objects/Line.js'
export { CubeTexture } from 'three/src/textures/CubeTexture.js'
export { CanvasTexture } from 'three/src/textures/CanvasTexture.js'
export { Group } from 'three/src/objects/Group.js'
export { SphereGeometry, SphereBufferGeometry } from 'three/src/geometries/SphereGeometry.js'
export { PlaneGeometry, PlaneBufferGeometry } from 'three/src/geometries/PlaneGeometry.js'
export { BoxGeometry, BoxBufferGeometry } from 'three/src/geometries/BoxGeometry.js'
export { ConeGeometry, ConeBufferGeometry } from 'three/src/geometries/ConeGeometry.js'
export { CylinderGeometry, CylinderBufferGeometry } from 'three/src/geometries/CylinderGeometry.js'
export { CircleGeometry, CircleBufferGeometry } from 'three/src/geometries/CircleGeometry.js'
export { RingGeometry, RingBufferGeometry } from 'three/src/geometries/RingGeometry.js'
export { EdgesGeometry } from 'three/src/geometries/EdgesGeometry.js'
export { Material } from 'three/src/materials/Material.js'
export { MeshPhongMaterial } from 'three/src/materials/MeshPhongMaterial.js'
export { MeshPhysicalMaterial } from 'three/src/materials/MeshPhysicalMaterial.js'
export { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js'
export { LineDashedMaterial } from 'three/src/materials/LineDashedMaterial.js'
export { SpriteMaterial } from 'three/src/materials/SpriteMaterial.js'
export { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial.js'
export { TextureLoader } from 'three/src/loaders/TextureLoader.js'
export { Texture } from 'three/src/textures/Texture.js'
export { Sprite } from 'three/src/objects/Sprite.js'
export { SpotLightShadow } from 'three/src/lights/SpotLightShadow.js'
export { SpotLight } from 'three/src/lights/SpotLight.js'
export { SpotLightHelper } from 'three/src/helpers/SpotLightHelper.js'
export { CameraHelper } from 'three/src/helpers/CameraHelper.js'
export { PointLight } from 'three/src/lights/PointLight.js'
export { DirectionalLight } from 'three/src/lights/DirectionalLight.js'
export { AmbientLight } from 'three/src/lights/AmbientLight.js'
export { LightShadow } from 'three/src/lights/LightShadow.js'
export { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js'
export { OrthographicCamera } from 'three/src/cameras/OrthographicCamera.js'
export { BufferGeometry } from 'three/src/core/BufferGeometry.js'
export { Geometry } from 'three/src/core/Geometry.js'
export * from 'three/src/core/BufferAttribute.js'
export { Face3 } from 'three/src/core/Face3.js'
export { Object3D } from 'three/src/core/Object3D.js'
export { Raycaster } from 'three/src/core/Raycaster.js'
export { Triangle } from 'three/src/math/Triangle.js'
export { _Math as Math } from 'three/src/math/Math.js'
export { Spherical } from 'three/src/math/Spherical.js'
export { Cylindrical } from 'three/src/math/Cylindrical.js'
export { Plane } from 'three/src/math/Plane.js'
export { Frustum } from 'three/src/math/Frustum.js'
export { Sphere } from 'three/src/math/Sphere.js'
export { Ray } from 'three/src/math/Ray.js'
export { Matrix4 } from 'three/src/math/Matrix4.js'
export { Matrix3 } from 'three/src/math/Matrix3.js'
export { Box3 } from 'three/src/math/Box3.js'
export { Box2 } from 'three/src/math/Box2.js'
export { Line3 } from 'three/src/math/Line3.js'
export { Euler } from 'three/src/math/Euler.js'
export { Vector4 } from 'three/src/math/Vector4.js'
export { Vector3 } from 'three/src/math/Vector3.js'
export { Vector2 } from 'three/src/math/Vector2.js'
export { Quaternion } from 'three/src/math/Quaternion.js'
export { Color } from 'three/src/math/Color.js'
export { GridHelper } from 'three/src/helpers/GridHelper.js'
export { AxesHelper } from 'three/src/helpers/AxesHelper.js'
export * from 'three/src/constants.js'
export { InstancedBufferGeometry } from 'three/src/core/InstancedBufferGeometry.js'
export { InstancedInterleavedBuffer } from 'three/src/core/InstancedInterleavedBuffer.js'
export { InterleavedBufferAttribute } from 'three/src/core/InterleavedBufferAttribute.js'
export { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js'
export { WireframeGeometry } from 'three/src/geometries/WireframeGeometry.js'

webpack.config.js

module.exports = {
  resolve: {
    alias: {
      // Forward all three imports to our exports file
      three$: path.resolve('./build/three-exports.js'),
    },
  },
}

This does not work out of the box, because three internals load static files.

Error: ../node_modules/three/src/renderers/shaders/ShaderLib/distanceRGBA_frag.glsl 1:0

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #define DISTANCE
|
| uniform vec3 referencePosition;
 @ ../node_modules/three/src/renderers/shaders/ShaderChunk.js 91:0-67 203:20-37

The line in question:

$ rg 'distanceRGBA_frag.glsl'
src/renderers/shaders/ShaderChunk.js

import distanceRGBA_frag from './ShaderLib/distanceRGBA_frag.glsl';

Do you already have a webpack config set up to make this work?

you probably just need some glsl loader, or maybe even just load glsl's with raw-loader in your webpack config. it's a bit strange, i just tried this recently in cra and it seemed to handle glsl's out of the box.

here's a real world example: https://github.com/drcmda/r3fv4

config-overrides (for webpack): https://github.com/drcmda/r3fv4/blob/master/config-overrides.js
three import catalogue: https://github.com/drcmda/r3fv4/blob/master/src/utils/three.js

edit:

and yes, looks like CRA uses raw-loader for all unknown assets: facebook/create-react-app#2079

Dare I ask why you pulled out your own ShaderChunk.js, etc?

i tried to cut it down but it's pulled in before by something else, so to no avail. same with shaderutils which contain unnecessary things like earcut etc. it can be done with some more aggressive aliasing i guess

Ah, three uses a custom rollup config to import .glsl files:

https://github.com/mrdoob/three.js/blob/5f74ae5dc3e2e073e06afcf4a6a2b74a762f9d69/utils/build/rollup.config.js#L171-L201

file-loader won't work out of the box here

Given the complex nature of the above file, like replacing constants, I don't think this three-exports.js pattern is a viable tradeoff if you need shader information in your r3f app

no, i think that's all done. the shaders are all ready to be imported as they are in plaintext via raw-loader. just link raw-loader to the glsl extension and it will work.

@AndrewRayCode I know it's old but here is how I did it in Next.js:

config.module.rules.push({
   // shader import support
   test: /\.glsl$/,
   use: ['webpack-glsl-loader'],
})

should be the same in other webpack apps

I think directly doing import { WebGLRenderer, Scene, PerspectiveCamera, DirectionalLight, SphereGeometry, TextureLoader, MeshPhongMaterial, Mesh, Vector3 } from 'three'; have the same effect as keeping a separate export file ?
In next-js we need to changejsconfig.json

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "three$": ["three-exports"],
      }
    }
}

Is the syntax right

I'm using NextJS, How can I use the export file with NextJS 13? It's not working neither with the webpack config file nor with the nextjs config file.