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'),
    },
  },
}

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.