three_js

three_js

A 3D rendering engine for dart (based on three.js and three_dart) that allows users to view, edit and manipulate their 3D objects. The current builds uses angle for desktop and mobile, and WebGL2 for web applications.

Features

This is a dart conversion of three.js and three_dart, originally created by @mrdoob and has a coverted dart fork by @wasabia.

Requirements

MacOS

• Minimum os Deployment Target: 10.15
• Xcode 13 or newer
• Swift 5
• Metal supported

iOS

• Minimum os Deployment Target: 13.0
• Xcode 13 or newer
• Swift 5
• Metal supported

iOS-Simulator

• Minimum os Deployment Target: 13.0
• Xcode 13 or newer
• Swift 5
• Metal supported

Android

• compileSdkVersion: 34
• minSdk: 21
• OpenGL supported
• Vulkan supported

Android Emulator

• compileSdkVersion: 34
• minSdk: 21
• OpenGL supported

Windows

• Intel supported
• AMD supported
• Qualcom supported
• Direct3D 11 supported
• OpenGL supported

Web

• WebGL2 supported. please add <script src="https://cdn.jsdelivr.net/gh/Knightro63/flutter_angle/assets/gles_bindings.js"></script> to your index.html to load the js_interop file.

WASM

• WebGL2 supported. please add <script src="https://cdn.jsdelivr.net/gh/Knightro63/flutter_angle/assets/gles_bindings.js"></script> to your index.html to load the js_interop file.

Linux

• Currenlty only works for flutter < 3.27
• Ubuntu supported (Tested on Linux Mint)
• OpenGL supported

Getting started

To get started add three_js to your pubspec.yaml file. Adding permissions for audio and video is required if using either item. Please use Permission Handler package to help with this.

Usage

This project is a simple 3D rendering engine for flutter to view, edit, or manipulate 3D models.

Legacy

Please use three_js_webgl for three_dart type renderer.

As this project moves twards impeller renderer google's ANGLE will be removed and this version will be moved to three_js_angle, which currenly does not exists.

Example

Find the example for this API here, for more examples you can click here, and for a preview go here.

Know Issues

All

• MD2 annimations do not work
• Collada animations do not work
• Collada kinnametics does not work
• PMREM gives weird artifacts or is completely black

MacOS

• N/A

iOS

• Protoplanets does not function correctly

Android

• Morphtargets does not work on some devices
• Some RGBELoaders cause app to crash

Windows

• Tonemapping turns screen black
• Some RGBELoaders cause app to crash

Web

• Lens Flare not working correctly
• Simplify modifer has weird artifacts

WASM

• Simple GI does not work
• Simplify modifer has weird artifacts

Linux

• Tonemapping turns screen black
• Postprocessing does not work
• Track pad does not zoom out
• Some RGBELoaders cause app to crash

Libraries and Plugins

Other Libs

• Advanced Exporters a USDZ exporter to your three_js project.
• Audio an audio api using flutters audioplayer from pub.dev do not use with any other audio package..
• Audio Latency an audio api using SoLoud from pub.dev do not use with any other audio package..
• BVH CSG a bvh csg api for three_js.
• Exporters an api to add STL, OBJ or PLY exporter for three_js.
• Geometry an api to add complex geometries to three_js.
• Line an api to add more line types to three_js.
• Helpers an api to add helpers to three_js.
• Modifers an api to add simplify or subdivision to three_js.
• Post Processing a post processor to three_js.
• SVG an api to add a svg importer and exporter to three_js.
• Three JS Loader a loader to add three js json files to three_js.
• Transfrom Controls a transfor controller for 3d objects for three_js.
• Video Texture an api to add videos and audio to three_js do not use with any other audio package.

ADD-ONS

• Omio a physics engine for three_js.
• Cannon a physics engine for three_js.
• Terrain a map generator for three_js.
• XR a VR/AR/MR sdk for three_js. (web working, android/ios experimental)
• Yuka a game ai sdk for three_js.

Contributing

Contributions are welcome. In case of any problems look at existing issues, if you cannot find anything related to your problem then open an issue. Create an issue before opening a pull request for non trivial fixes. In case of trivial fixes open a pull request directly.

Supported Features

All of the current webgl2 core features are supported at this time.
GPU is currently under development, so it is currently not supported.
Please review the following table for all the supported Modules.

• ✅ Currently Supported
• ⚠️ In Progress
• ❗ Waiting on GPU update
• ❌ Not intended

Module	Plugin	Web	Mobile	Desktop
	Animation
AnimationClipCreator		✅	✅	✅
CCDIKSolver		✅	✅	✅
	Controls
ArcballControls	three_js_transform_controls	✅	✅	✅
DragControls	three_js_controls	✅	✅	✅
FirstPersonControls	three_js_controls	✅	✅	✅
FlyControls	three_js_controls	✅	✅	✅
MapControls	three_js_controls	✅	✅	✅
OrbitControls	three_js_controls	✅	✅	✅
PointerLockControls	three_js_controls	✅	✅	✅
TrackballControls	three_js_controls	✅	✅	✅
TransformControls	three_js_transform_controls	✅	✅	✅
	CSM
CSM	three_js_objects	✅	✅	✅
CSMFrustum	three_js_objects	✅	✅	✅
CSMHelper	three_js_objects	✅	✅	✅
CSMShader	three_js_objects	✅	✅	✅
CSMShadowNode		❗	❗	❗
	Curves
EXTRAS	three_js_curves	✅	✅	✅
NURBSCurve	three_js_curves	✅	✅	✅
NURBSSurface	three_js_curves	✅	✅	✅
NURBSUtils	three_js_curves	✅	✅	✅
NURBSVolume		⚠️	⚠️	⚠️
	Effects
AnaglyphEffect		⚠️	⚠️	⚠️
AsciiEffect		⚠️	⚠️	⚠️
OutlineEffect		⚠️	⚠️	⚠️
ParallaxBarrierEffect		⚠️	⚠️	⚠️
StereoEffect	three_js_postprocessing	✅	✅	✅
	Enviroments
DebugEnvironment	three_js_helpers	✅	✅	✅
RoomEnvironment	three_js_helpers	✅	✅	✅
	Exporters
DRACOExporter		❌	❌	❌
EXRExporter		❌	❌	❌
GLTFExporter		✅	✅	✅
KTX2Exporter		❌	❌	❌
OBJExporter	three_js_simple_exporters	✅	✅	✅
PLYExporter	three_js_simple_exporters	✅	✅	✅
STLExporter	three_js_simple_exporters	✅	✅	✅
USDZExporter	three_js_advanced_exporters	✅	✅	✅
	Geometry
BoxLineGeometry	three_js_geometry	✅	✅	✅
ConvexGeometry	three_js_geometry	✅	✅	✅
DecalGeometry	three_js_geometry	✅	✅	✅
ParametricFunctions	three_js_geometry	✅	✅	✅
ParametricGeometry	three_js_geometry	✅	✅	✅
RoundedBoxGeometry		✅	✅	✅
TeapotGeometry		✅	✅	✅
TextGeometry	three_js_text	✅	✅	✅
	Helpers
LightProbeHelper	three_js_helpers	✅	✅	✅
LightProbeHelperGPU		❗	❗	❗
OctreeHelper	three_js_objects	✅	✅	✅
PositionalAudioHelper	three_js_core	✅	✅	✅
RapierHelper		❌	❌	❌
RectAreaLightHelper	three_js_helpers	✅	✅	✅
TextureHelper		✅	✅	✅
VertexNormalsHelper	three_js_helpers	✅	✅	✅
VertexTangentsHelper	three_js_helpers	✅	✅	✅
ViewHelper	three_js_helpers	✅	✅	✅
	Interactive
HTMLMesh		❌	❌	❌
InteractiveGroup	three_js_xr	✅	❌	❌
SelectionBox	three_js_helpers	✅	✅	✅
SelectionHelper	three_js_helpers	✅	✅	✅
	Lighting
TiledLighting		❗	❗	❗
	Lights
LightProbeGenerator	three_js_objects	✅	✅	✅
RectAreaLightTexturesLib		⚠️	⚠️	⚠️
RectAreaLightUniformsLib		⚠️	⚠️	⚠️
	Lines
Line2	three_js_line	✅	✅	✅
LineGeometry	three_js_line	✅	✅	✅
LineMaterial	three_js_line	✅	✅	✅
LineSegments2	three_js_line	✅	✅	✅
LineSegmentsGeometry	three_js_line	✅	✅	✅
Wireframe	three_js_line	✅	✅	✅
WireframeGeometry2	three_js_line	✅	✅	✅
	Loaders
Rhino3dmLoader		❌	❌	❌
ThreeMFLoader		❌	❌	❌
AMFLoader		❌	❌	❌
BVHLoader	three_js_advanced_loaders	✅	✅	✅
ColladaLoader	three_js_advanced_loaders	✅	✅	✅
DDSLoader	three_js_advanced_loaders	✅	✅	✅
DRACOLoader		❌	❌	❌
EXRLoader		⚠️	⚠️	⚠️
FBXLoader	three_js_advanced_loaders	✅	✅	✅
FontLoader	three_js_text	✅	✅	✅
GCodeLoader	three_js_simple_loaders	✅	✅	✅
GLTFLoader	three_js_advanced_loaders	✅	✅	✅
HDRCubeTextureLoader		⚠️	⚠️	⚠️
IESLoader		⚠️	⚠️	⚠️
KMZLoader		❌	❌	❌
KTX2Loader		❌	❌	❌
KTXLoader	three_js_advanced_loaders	✅	✅	✅
LDrawLoader		⚠️	⚠️	⚠️
LottieLoader		❌	❌	❌
LUT3dlLoader		⚠️	⚠️	⚠️
LUTCubeLoader	three_js_simple_loaders	✅	✅	✅
LUTImageLoader		⚠️	⚠️	⚠️
LWOLoader		❌	❌	❌
MaterialXLoader		❌	❌	❌
MD2Loader	three_js_advanced_loaders	✅	✅	✅
MDDLoader		⚠️	⚠️	⚠️
MTLLoader	three_js_simple_loaders	✅	✅	✅
NRRDLoader		⚠️	⚠️	⚠️
OBJLoader	three_js_simple_loaders	✅	✅	✅
PCDLoader	three_js_advanced_loaders	✅	✅	✅
PBDLoader		⚠️	⚠️	⚠️
PLYLoader	three_js_simple_loaders	✅	✅	✅
PVRLoader		⚠️	⚠️	⚠️
RGBELoader	three_js_advanced_loaders	✅	✅	✅
RGBMLoader		⚠️	⚠️	⚠️
STLLoader	three_js_simple_loaders	✅	✅	✅
SVGLoader	three_js_svg	✅	✅	✅
TDSLoader		⚠️	⚠️	⚠️
TGALoader	three_js_advanced_loaders	✅	✅	✅
TIFFLoader		❌	❌	❌
TTFLoader	three_js_text	✅	✅	✅
UltraHDRLoader		⚠️	⚠️	⚠️
USDLoader	three_js_advanced_loaders	✅	✅	✅
USDZLoader	three_js_advanced_loaders	✅	✅	✅
VOXLoader	three_js_simple_loaders	✅	✅	✅
VRMLoader		❌	❌	❌
VTKLoader		✅	✅	✅
XYZLoader	three_js_simple_loaders	✅	✅	✅
	Materials
LDrawConditionalLineMaterial		❌	❌	❌
LDrawConditionalLineNodeMaterial		❌	❌	❌
MeshGouraudMaterial	three_js_core	✅	✅	✅
MeshPostProcessingMaterial		⚠️	⚠️	⚠️
	Math
Capsule	three_js_objects	✅	✅	✅
ColorConverter		⚠️	⚠️	⚠️
ColorSpaces		⚠️	⚠️	⚠️
ConvexHull	three_js_geometry	✅	✅	✅
ImprovedNoise	three_js_objects	✅	✅	✅
Lut		⚠️	⚠️	⚠️
MeshSurfaceSampler	three_js_helpers	✅	✅	✅
OBB		⚠️	⚠️	⚠️
Octree	three_js_objects	✅	✅	✅
SimplexNoise		⚠️	⚠️	⚠️
	Misc
ConvexObjectBreaker		⚠️	⚠️	⚠️
GPUComputationRenderer		❗	❗	❗
Gyroscope	three_js_particles	✅	✅	✅
MD2Character	three_js_advanced_loaders	✅	✅	✅
MD2Loader	three_js_advanced_loaders	✅	✅	✅
MD2CharacterComplex		❌	❌	❌
MorphAnimMesh	three_js_advanced_loaders	✅	✅	✅
MorphBlendMesh		⚠️	⚠️	⚠️
ProgressiveLightMap		⚠️	⚠️	⚠️
ProgressiveLightMapGPU		❗	❗	❗
RollerCoasterGeometry		✅	✅	✅
TubePainter	three_js_objects	✅	✅	✅
Volume		⚠️	⚠️	⚠️
VolumeSlice		❌	❌	❌
	Modifers
CurveModifier		❌	❌	❌
CurveModifierGPU		❌	❌	❌
EdgeSplitModifier	three_js_modifers	✅	✅	✅
SimplifyModifier	three_js_modifers	✅	✅	✅
TessellateModifier	three_js_modifers	✅	✅	✅
	Objects
GroundedSkybox		⚠️	⚠️	⚠️
Lensflare	three_js_objects	✅	✅	✅
LensflareMesh		❗	❗	❗
MarchingCubes	three_js_objects	✅	✅	✅
Reflector	three_js_objects	✅	✅	✅
ReflectorForSSRPass		⚠️	⚠️	⚠️
Refractor	three_js_objects	✅	✅	✅
ShadowMesh		⚠️	⚠️	⚠️
Sky	three_js_objects	✅	✅	✅
SkyMesh		❗	❗	❗
Water		⚠️	⚠️	⚠️
Water2	three_js_objects	✅	✅	✅
Water2Mesh		❗	❗	❗
WaterMesh		❗	❗	❗
	Off Screen
Jank		⚠️	⚠️	⚠️
OffScreen		❌	❌	❌
Scene		❌	❌	❌
	Physics
AmmoPhysics		❌	❌	❌
JoltPhysics		❌	❌	❌
RapierPhysics		❌	❌	❌
	Post Porcessing
AfterimagePass	three_js_postprocessing	✅	✅	✅
BloomPass	three_js_postprocessing	✅	✅	✅
BokehPass		⚠️	⚠️	⚠️
ClearPass		⚠️	⚠️	⚠️
CubeTexturePass		⚠️	⚠️	⚠️
DotScreenPass	three_js_postprocessing	✅	✅	✅
EffectComposer	three_js_postprocessing	✅	✅	✅
FilmPass	three_js_postprocessing	✅	✅	✅
FXAAPass	three_js_postprocessing	✅	✅	✅
GlitchPass	three_js_postprocessing	✅	✅	✅
GTAOPass		⚠️	⚠️	⚠️
HalftonePass		⚠️	⚠️	⚠️
LUTPass	three_js_postprocessing	✅	✅	✅
MaskPass	three_js_postprocessing	✅	✅	✅
OutlinePass		⚠️	⚠️	⚠️
OutputPass	three_js_postprocessing	✅	✅	✅
Pass	three_js_postprocessing	✅	✅	✅
RenderPass	three_js_postprocessing	✅	✅	✅
RenderPixelatedPass		⚠️	⚠️	⚠️
RenderTransitionPass		⚠️	⚠️	⚠️
SAOPass		⚠️	⚠️	⚠️
SavePass		⚠️	⚠️	⚠️
ShaderPass	three_js_postprocessing	✅	✅	✅
SMAAPass	three_js_postprocessing	✅	✅	✅
SSAARenderPass	three_js_postprocessing	✅	✅	✅
SSAOPass		⚠️	⚠️	⚠️
SSRPass		⚠️	⚠️	⚠️
TAARenderPass	three_js_postprocessing	✅	✅	✅
TexturePass	three_js_postprocessing	✅	✅	✅
UnrealBloomPass	three_js_postprocessing	✅	✅	✅
	Renderers
CSS2DRenderer		❌	❌	❌
CSS3DRenderer		❌	❌	❌
Projector	three_js_svg	✅	✅	✅
SVGRenderer	three_js_svg	✅	✅	✅
GPU		⚠️	⚠️	⚠️
Impeller		⚠️	⚠️	⚠️
	Shaders
ACESFilmicToneMappingShader		⚠️	⚠️	⚠️
AfterimageShader	three_js_postprocessing	✅	✅	✅
BasicShader		⚠️	⚠️	⚠️
BleachBypassShader	three_js_postprocessing	✅	✅	✅
BlendShader		⚠️	⚠️	⚠️
BokehShader		⚠️	⚠️	⚠️
BokehShader2		⚠️	⚠️	⚠️
BrightnessContrastShader		⚠️	⚠️	⚠️
ColorCorrectionShader		⚠️	⚠️	⚠️
ColorifyShader		⚠️	⚠️	⚠️
ConvolutionShader	three_js_postprocessing	✅	✅	✅
CopyShader	three_js_postprocessing	✅	✅	✅
DepthLimitedBlurShader		⚠️	⚠️	⚠️
DigitalGlitch	three_js_postprocessing	✅	✅	✅
DOFMipMapShader		⚠️	⚠️	⚠️
DotScreenShader	three_js_postprocessing	✅	✅	✅
ExposureShader		⚠️	⚠️	⚠️
FilmShader	three_js_postprocessing	✅	✅	✅
FocusShader		⚠️	⚠️	⚠️
FreiChenShader		⚠️	⚠️	⚠️
FXAAShader	three_js_postprocessing	✅	✅	✅
GammaCorrectionShader	three_js_postprocessing	✅	✅	✅
GodRaysDepthMaskShader		⚠️	⚠️	⚠️
GTAOShader		⚠️	⚠️	⚠️
HalftoneShader		⚠️	⚠️	⚠️
HorizontalBlurShader	three_js_postprocessing	✅	✅	✅
HorizontalTiltShiftShader		⚠️	⚠️	⚠️
HueSaturationShader		⚠️	⚠️	⚠️
KaleidoShader		⚠️	⚠️	⚠️
LuminosityHighPassShader	three_js_postprocessing	✅	✅	✅
LuminosityShader	three_js_postprocessing	✅	✅	✅
MirrorShader		⚠️	⚠️	⚠️
NormalMapShader		⚠️	⚠️	⚠️
OutputShader	three_js_postprocessing	✅	✅	✅
PoissonDenoiseShader		⚠️	⚠️	⚠️
RGBShiftShader		⚠️	⚠️	⚠️
SAOShader		⚠️	⚠️	⚠️
SepiaShader		⚠️	⚠️	⚠️
SMAAShader	three_js_postprocessing	✅	✅	✅
SobelOperatorShader	three_js_postprocessing	✅	✅	✅
SSAOShader		⚠️	⚠️	⚠️
SSRShader		⚠️	⚠️	⚠️
SubsurfaceScatteringShader		⚠️	⚠️	⚠️
TechnicolorShader		⚠️	⚠️	⚠️
ToonShader		⚠️	⚠️	⚠️
TriangleBlurShader		⚠️	⚠️	⚠️
UnpackDepthRGBAShader	three_js_postprocessing	✅	✅	✅
VelocityShader		⚠️	⚠️	⚠️
VerticalBlurShader	three_js_postprocessing	✅	✅	✅
VerticalTiltShiftShader		⚠️	⚠️	⚠️
VignetteShader	three_js_postprocessing	✅	✅	✅
VolumeShader		⚠️	⚠️	⚠️
WaterRefractionShader		⚠️	⚠️	⚠️
	Textures
FlakesTexture		⚠️	⚠️	⚠️
	Transpiler	❗	❗	❗
	TSL	❗	❗	❗
	Utils
BufferGeometryUtils	three_js_modifers	✅	✅	✅
CameraUtils	three_js_helpers	✅	✅	✅
GeometryCompressionUtils		⚠️	⚠️	⚠️
GeometryUtils		⚠️	⚠️	⚠️
LDrawUtils		⚠️	⚠️	⚠️
SceneOptimizer		⚠️	⚠️	⚠️
SceneUtils		⚠️	⚠️	⚠️
ShadowMapViewer		⚠️	⚠️	⚠️
ShadowMapViewerGPU		❗	❗	❗
SkeletonUtils	three_js_helpers	✅	✅	✅
SortUtils		⚠️	⚠️	⚠️
UVsDebug		⚠️	⚠️	⚠️
WebGLTextureUtils		⚠️	⚠️	⚠️
WebGPUTextureUtils		❗	❗	❗
	WebXR
ARButton	three_js_xr	✅	⚠️	⚠️
OculusHandModel		❌	❌	❌
OculusHandPointerModel		❌	❌	❌
Text2D		❌	❌	❌
VRButton	three_js_xr	✅	⚠️	⚠️
XRButton	three_js_xr	✅	⚠️	⚠️
XRControllerModelFactory	three_js_xr	✅	❌	❌
XREstimatedLight		❌	❌	❌
XRHandMeshModel	three_js_xr	✅	❌	❌
XRHandModelFactory	three_js_xr	✅	❌	❌
XRHandPrimitiveModel	three_js_xr	✅	❌	❌
XRPlanes	three_js_xr	✅	❌	❌