-
-
Save drcmda/974f84240a329fa8a9ce04bbdaffc04d to your computer and use it in GitHub Desktop.
// 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' |
module.exports = { | |
resolve: { | |
alias: { | |
// Forward all three imports to our exports file | |
three$: path.resolve('./build/three-exports.js'), | |
}, | |
}, | |
} |
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 change
jsconfig.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.
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