Unable to compile Three.js

[bergwerf]

There are some old compilations of Three.js from a definitely typed type definitions, but three now has its own type definitions. I tried to compile these but immediately hit an error:

Transpiling [ 'Three.d.ts' ] to dart
/usr/local/lib/node_modules/dart_js_facade_gen/index.js:11
  if (e.name !== 'DartFacadeError') throw e;
                                    ^

TypeError: Cannot set property 'moduleName' of undefined
    at resolvedPath.forEach (/usr/local/lib/node_modules/dart_js_facade_gen/build/lib/main.js:93:49)
    at Array.forEach (<anonymous>)
    at f.statements.forEach (/usr/local/lib/node_modules/dart_js_facade_gen/build/lib/main.js:89:34)
    at Array.forEach (<anonymous>)
    at f.statements.forEach (/usr/local/lib/node_modules/dart_js_facade_gen/build/lib/main.js:80:30)
    at Array.forEach (<anonymous>)
    at sourceFiles.forEach (/usr/local/lib/node_modules/dart_js_facade_gen/build/lib/main.js:72:26)
    at Array.forEach (<anonymous>)
    at Transpiler.transpile (/usr/local/lib/node_modules/dart_js_facade_gen/build/lib/main.js:71:21)
    at Object.<anonymous> (/usr/local/lib/node_modules/dart_js_facade_gen/index.js:9:14)

Aside: It would be quite nice if it is easy to compile Three.js because currently there is no Dart 2.0 library for easy WebGL1 graphics (chronosgl is the only one, but only supports WebGL2).

[derekxu16]

Firstly, you seem to be using the npm package version of js_facade_gen which hasn't been published in three years. We aren't quite ready to publish a new version yet since the tool isn't stable enough, but to get the latest support for new TypeScript/Dart features you can clone this repo and run the tool directly with node index.js or ./index.js.

If you clone js_facade_gen into ~/js_facade_gen and three.js into ~/three.js then from ~/js_facade_gen you would have to run this really long command (we should find a way to make it easier) node index.js --base-path=../three.js --destination=../threeDart ../three.js/src/Three.d.ts ../three.js/src/polyfills.d.ts ../three.js/src/renderers/WebGLMultisampleRenderTarget.d.ts ../three.js/src/renderers/WebGLRenderTargetCube.d.ts ../three.js/src/renderers/WebGLRenderTarget.d.ts ../three.js/src/renderers/WebGLRenderer.d.ts ../three.js/src/renderers/shaders/ShaderLib.d.ts ../three.js/src/renderers/shaders/UniformsLib.d.ts ../three.js/src/renderers/shaders/UniformsUtils.d.ts ../three.js/src/renderers/shaders/ShaderChunk.d.ts ../three.js/src/scenes/FogExp2.d.ts ../three.js/src/scenes/Fog.d.ts ../three.js/src/scenes/Scene.d.ts ../three.js/src/objects/Sprite.d.ts ../three.js/src/objects/LOD.d.ts ../three.js/src/objects/InstancedMesh.d.ts ../three.js/src/objects/SkinnedMesh.d.ts ../three.js/src/objects/Skeleton.d.ts ../three.js/src/objects/Bone.d.ts ../three.js/src/objects/Mesh.d.ts ../three.js/src/objects/LineSegments.d.ts ../three.js/src/objects/LineLoop.d.ts ../three.js/src/objects/Line.d.ts ../three.js/src/objects/Points.d.ts ../three.js/src/objects/Group.d.ts ../three.js/src/textures/VideoTexture.d.ts ../three.js/src/textures/DataTexture.d.ts ../three.js/src/textures/DataTexture3D.d.ts ../three.js/src/textures/CompressedTexture.d.ts ../three.js/src/textures/CubeTexture.d.ts ../three.js/src/textures/CanvasTexture.d.ts ../three.js/src/textures/DepthTexture.d.ts ../three.js/src/textures/Texture.d.ts ../three.js/src/geometries/Geometries.d.ts ../three.js/src/materials/Materials.d.ts ../three.js/src/loaders/AnimationLoader.d.ts ../three.js/src/loaders/CompressedTextureLoader.d.ts ../three.js/src/loaders/DataTextureLoader.d.ts ../three.js/src/loaders/CubeTextureLoader.d.ts ../three.js/src/loaders/TextureLoader.d.ts ../three.js/src/loaders/ObjectLoader.d.ts ../three.js/src/loaders/MaterialLoader.d.ts ../three.js/src/loaders/BufferGeometryLoader.d.ts ../three.js/src/loaders/LoadingManager.d.ts ../three.js/src/loaders/ImageLoader.d.ts ../three.js/src/loaders/ImageBitmapLoader.d.ts ../three.js/src/loaders/FontLoader.d.ts ../three.js/src/loaders/FileLoader.d.ts ../three.js/src/loaders/Loader.d.ts ../three.js/src/loaders/LoaderUtils.d.ts ../three.js/src/loaders/Cache.d.ts ../three.js/src/loaders/AudioLoader.d.ts ../three.js/src/lights/SpotLightShadow.d.ts ../three.js/src/lights/SpotLight.d.ts ../three.js/src/lights/PointLight.d.ts ../three.js/src/lights/RectAreaLight.d.ts ../three.js/src/lights/HemisphereLight.d.ts ../three.js/src/lights/DirectionalLightShadow.d.ts ../three.js/src/lights/DirectionalLight.d.ts ../three.js/src/lights/AmbientLight.d.ts ../three.js/src/lights/LightShadow.d.ts ../three.js/src/lights/Light.d.ts ../three.js/src/lights/AmbientLightProbe.d.ts ../three.js/src/lights/HemisphereLightProbe.d.ts ../three.js/src/lights/LightProbe.d.ts ../three.js/src/cameras/StereoCamera.d.ts ../three.js/src/cameras/PerspectiveCamera.d.ts ../three.js/src/cameras/OrthographicCamera.d.ts ../three.js/src/cameras/CubeCamera.d.ts ../three.js/src/cameras/ArrayCamera.d.ts ../three.js/src/cameras/Camera.d.ts ../three.js/src/audio/AudioListener.d.ts ../three.js/src/audio/PositionalAudio.d.ts ../three.js/src/audio/AudioContext.d.ts ../three.js/src/audio/AudioAnalyser.d.ts ../three.js/src/audio/Audio.d.ts ../three.js/src/animation/tracks/VectorKeyframeTrack.d.ts ../three.js/src/animation/tracks/StringKeyframeTrack.d.ts ../three.js/src/animation/tracks/QuaternionKeyframeTrack.d.ts ../three.js/src/animation/tracks/NumberKeyframeTrack.d.ts ../three.js/src/animation/tracks/ColorKeyframeTrack.d.ts ../three.js/src/animation/tracks/BooleanKeyframeTrack.d.ts ../three.js/src/animation/PropertyMixer.d.ts ../three.js/src/animation/PropertyBinding.d.ts ../three.js/src/animation/KeyframeTrack.d.ts ../three.js/src/animation/AnimationUtils.d.ts ../three.js/src/animation/AnimationObjectGroup.d.ts ../three.js/src/animation/AnimationMixer.d.ts ../three.js/src/animation/AnimationClip.d.ts ../three.js/src/animation/AnimationAction.d.ts ../three.js/src/core/Uniform.d.ts ../three.js/src/core/InstancedBufferGeometry.d.ts ../three.js/src/core/BufferGeometry.d.ts ../three.js/src/core/Geometry.d.ts ../three.js/src/core/InterleavedBufferAttribute.d.ts ../three.js/src/core/InstancedInterleavedBuffer.d.ts ../three.js/src/core/InterleavedBuffer.d.ts ../three.js/src/core/InstancedBufferAttribute.d.ts ../three.js/src/core/BufferAttribute.d.ts ../three.js/src/core/Face3.d.ts ../three.js/src/core/Object3D.d.ts ../three.js/src/core/Raycaster.d.ts ../three.js/src/core/Layers.d.ts ../three.js/src/core/EventDispatcher.d.ts ../three.js/src/core/DirectGeometry.d.ts ../three.js/src/core/Clock.d.ts ../three.js/src/math/interpolants/QuaternionLinearInterpolant.d.ts ../three.js/src/math/interpolants/LinearInterpolant.d.ts ../three.js/src/math/interpolants/DiscreteInterpolant.d.ts ../three.js/src/math/interpolants/CubicInterpolant.d.ts ../three.js/src/math/Interpolant.d.ts ../three.js/src/math/Triangle.d.ts ../three.js/src/math/Math.d.ts ../three.js/src/math/Spherical.d.ts ../three.js/src/math/Cylindrical.d.ts ../three.js/src/math/Plane.d.ts ../three.js/src/math/Frustum.d.ts ../three.js/src/math/Sphere.d.ts ../three.js/src/math/Ray.d.ts ../three.js/src/math/Matrix4.d.ts ../three.js/src/math/Matrix3.d.ts ../three.js/src/math/Box3.d.ts ../three.js/src/math/Box2.d.ts ../three.js/src/math/Line3.d.ts ../three.js/src/math/Euler.d.ts ../three.js/src/math/Vector4.d.ts ../three.js/src/math/Vector3.d.ts ../three.js/src/math/Vector2.d.ts ../three.js/src/math/Quaternion.d.ts ../three.js/src/math/Color.d.ts ../three.js/src/math/SphericalHarmonics3.d.ts ../three.js/src/extras/objects/ImmediateRenderObject.d.ts ../three.js/src/helpers/VertexNormalsHelper.d.ts ../three.js/src/helpers/SpotLightHelper.d.ts ../three.js/src/helpers/SkeletonHelper.d.ts ../three.js/src/helpers/PointLightHelper.d.ts ../three.js/src/helpers/RectAreaLightHelper.d.ts ../three.js/src/helpers/HemisphereLightHelper.d.ts ../three.js/src/helpers/GridHelper.d.ts ../three.js/src/helpers/PolarGridHelper.d.ts ../three.js/src/helpers/PositionalAudioHelper.d.ts ../three.js/src/helpers/FaceNormalsHelper.d.ts ../three.js/src/helpers/DirectionalLightHelper.d.ts ../three.js/src/helpers/CameraHelper.d.ts ../three.js/src/helpers/BoxHelper.d.ts ../three.js/src/helpers/Box3Helper.d.ts ../three.js/src/helpers/PlaneHelper.d.ts ../three.js/src/helpers/ArrowHelper.d.ts ../three.js/src/helpers/AxesHelper.d.ts ../three.js/src/extras/curves/Curves.d.ts ../three.js/src/extras/core/Shape.d.ts ../three.js/src/extras/core/Path.d.ts ../three.js/src/extras/core/ShapePath.d.ts ../three.js/src/extras/core/Font.d.ts ../three.js/src/extras/core/CurvePath.d.ts ../three.js/src/extras/core/Curve.d.ts ../three.js/src/extras/ImageUtils.d.ts ../three.js/src/extras/ShapeUtils.d.ts ../three.js/src/renderers/webgl/WebGLBufferRenderer.d.ts ../three.js/src/renderers/webgl/WebGLCapabilities.d.ts ../three.js/src/renderers/webgl/WebGLClipping.d.ts ../three.js/src/renderers/webgl/WebGLExtensions.d.ts ../three.js/src/renderers/webgl/WebGLGeometries.d.ts ../three.js/src/renderers/webgl/WebGLIndexedBufferRenderer.d.ts ../three.js/src/renderers/webgl/WebGLInfo.d.ts ../three.js/src/renderers/webgl/WebGLLights.d.ts ../three.js/src/renderers/webgl/WebGLObjects.d.ts ../three.js/src/renderers/webgl/WebGLProgram.d.ts ../three.js/src/renderers/webgl/WebGLPrograms.d.ts ../three.js/src/renderers/webgl/WebGLProperties.d.ts ../three.js/src/renderers/webgl/WebGLRenderLists.d.ts ../three.js/src/renderers/webgl/WebGLShader.d.ts ../three.js/src/renderers/webgl/WebGLShadowMap.d.ts ../three.js/src/renderers/webgl/WebGLState.d.ts ../three.js/src/renderers/webgl/WebGLTextures.d.ts ../three.js/src/renderers/webgl/WebGLUniforms.d.ts ../three.js/src/renderers/webvr/WebVRManager.d.ts ../three.js/src/constants.d.ts ../three.js/src/Three.Legacy.d.ts

On the latest version, that command generates most files without issues. There are a few small problems with types and exports that I will be working on fixing. You should be able to fix them by hand for now though.

[bergwerf]

Cool! I tried the above but it got stuck on /three.js/src/renderers/shaders/UniformsUtils.d.ts which contains

export function cloneUniforms( uniforms_src: any ): any;
export function mergeUniforms( uniforms: any[] ): any;

export namespace UniformsUtils {
    export {
        mergeUniforms as merge,
        cloneUniforms as clone,
    };
}

Yielding the following errors in stdout:

../three.js/src/renderers/shaders/UniformsUtils.d.ts:5:2: re-exports must have a module URL (export x from "./y").
../three.js/src/renderers/shaders/UniformsUtils.d.ts:6:3: import/export renames are unsupported in Dart
../three.js/src/renderers/shaders/UniformsUtils.d.ts:7:3: import/export renames are unsupported in Dart
../three.js/src/renderers/shaders/UniformsUtils.d.ts:1:1: Could not format because the source could not be parsed:

line 4, column 2: Directives must appear before any declarations.
  ╷
4 │  export show mergeUniforms, cloneUniforms ;
  │  ^^^^^^
  ╵
line 4, column 9: Expected a string literal.
  ╷
4 │  export show mergeUniforms, cloneUniforms ;
  │         ^^^^
  ╵
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Unexpected TypeNode kind: ObjectKeyword
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Internal error. Generate null type name.
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Unexpected TypeNode kind: ObjectKeyword
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Internal error. Generate null type name.
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Unexpected TypeNode kind: ObjectKeyword
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Internal error. Generate null type name.
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Unexpected TypeNode kind: ObjectKeyword
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Internal error. Generate null type name.
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Unexpected TypeNode kind: ObjectKeyword
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Internal error. Generate null type name.
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Unexpected TypeNode kind: ObjectKeyword
../three.js/src/loaders/ImageBitmapLoader.d.ts:8:23: Internal error. Generate null type name.
../three.js/src/loaders/ImageBitmapLoader.d.ts:10:23: Unsupported node type ObjectKeyword:  object
../three.js/src/Three.d.ts:112:10: import/export renames are unsupported in Dart

[derekxu16]

Yeah sorry you'll have to skip that file and fix it by hand for now. I'm aware of those issues and will fix them when I get the chance.

[derekxu16]

The generator might not write the file if there's an error too early. If that occurs you can try commenting out the places where errors get thrown and letting it run anyways. That way you can have something to begin with that you can manually edit.

[bergwerf]

Allright. Currently it looks like most errors originate from relative import paths being ignored. However I think I can fairly easily write a Python script to fix that (its a bit of an ugly workaround but if it can make me use threejs in Dart today... ;D)

[bergwerf]

Not that I want to discourage any progress here, but I spent a few hours trying this out and there are a lot of annoying problems left to fully support something like Three.js.

• I am not sure which types from the Dart SDK are supported by interop (HTML elements, typed data, audio buffers nodes and handles, etc.).
• Some semantics go against what is allowed in Dart such as UVGenerator get UVGenerator. So such getters must be renamed and annotated separately (it is thinkable to re-generate Dart compliant naming for all member).
• Cases where an inherited method makes a type argument stricter (set shadow(DirectionalLightShadow) inherits from set shadow(LightShadow) etc.).
• Cases where inherited methods omit optional positional arguments of the superclass.

So for now I think the conclusion is, unfortunately, that Three.js interop is too much work. Perhaps another library is easier though :) Just in case anyone ever finds this issue, here is the Python script I wrote to get rid of ~60% of errors: https://gist.github.com/bergwerf/e3f920392147d10fb44212d94ad897ab