{"id":14948,"library":"super-three","title":"super-three: JavaScript 3D Library (Abandoned Fork)","description":"`super-three` is a JavaScript 3D graphics library, initially based on the widely adopted `three.js` project, designed for rendering interactive 3D content in web browsers using WebGL and WebGPU. While the provided metadata indicates version `0.181.0`, public NPM data shows this package was last updated approximately two years ago, making it an effectively abandoned fork. In contrast, the official `three` package (which `super-three` is derived from) is actively maintained with frequent updates (e.g., `0.183.2` as of April 2026). `super-three` aimed to leverage the `three.js` API for creating scenes, cameras, lights, and objects, supporting various geometries, materials, and post-processing effects. Its original differentiators would have been alignment with `three.js`'s ease of use, broad browser compatibility, and access to a rich ecosystem. However, due to its abandonment, it lacks current features, performance improvements, and critical bug fixes found in the actively maintained `three.js` library.","status":"abandoned","version":"0.181.0","language":"javascript","source_language":"en","source_url":"https://github.com/supermedium/three.js","tags":["javascript","three","three.js","3d","virtual-reality","augmented-reality","webgl","webgl2"],"install":[{"cmd":"npm install super-three","lang":"bash","label":"npm"},{"cmd":"yarn add super-three","lang":"bash","label":"yarn"},{"cmd":"pnpm add super-three","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"`super-three`, like modern `three.js`, primarily uses ES Modules. While `require` might work in some environments, it's not the recommended or tree-shaking friendly approach. Using `* as THREE` imports the entire library namespace.","wrong":"const THREE = require('super-three');","symbol":"THREE (namespace)","correct":"import * as THREE from 'super-three';"},{"note":"For tree-shaking and explicit imports, specific classes and modules should be imported directly from the top-level package. Avoid direct paths into `build/` for core modules as they might change.","wrong":"import { WebGLRenderer } from 'super-three/build/super-three.module.js';","symbol":"Named exports (e.g., Scene, WebGLRenderer)","correct":"import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshNormalMaterial, Mesh } from 'super-three';"},{"note":"Loaders and other community-contributed examples or add-ons are located under `examples/jsm/` and require the full relative path, including the `.js` extension, for correct ES Module resolution.","wrong":"import { GLTFLoader } from 'super-three/src/loaders/GLTFLoader.js';","symbol":"Add-ons / Examples (e.g., GLTFLoader)","correct":"import { GLTFLoader } from 'super-three/examples/jsm/loaders/GLTFLoader.js';"}],"quickstart":{"code":"import * as THREE from 'super-three';\n\nconst width = window.innerWidth, height = window.innerHeight;\n\n// init\nconst camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );\ncamera.position.z = 1;\n\nconst scene = new THREE.Scene();\n\nconst geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );\nconst material = new THREE.MeshNormalMaterial();\n\nconst mesh = new THREE.Mesh( geometry, material );\nscene.add( mesh );\n\nconst renderer = new THREE.WebGLRenderer( { antialias: true } );\nrenderer.setSize( width, height );\nrenderer.setAnimationLoop( animate );\ndocument.body.appendChild( renderer.domElement );\n\n// animation\nfunction animate( time ) {\n\tmesh.rotation.x = time / 2000;\n\tmesh.rotation.y = time / 1000;\n\n\trenderer.render( scene, camera );\n}","lang":"javascript","description":"This quickstart initializes a basic 3D scene with a camera, a rotating cube, and a WebGL renderer, appending the canvas to the document body for animation."},"warnings":[{"fix":"Migrate to the official `three` package (npmjs.com/package/three) for an actively maintained and up-to-date 3D library. Be aware of potential API changes when migrating from an older `super-three` version to the latest `three.js`.","message":"This `super-three` package is an abandoned fork based on an older version of `three.js` (0.181.0, last updated ~2 years ago). It will not receive updates, security patches, or new features present in the actively maintained `three.js` library (e.g., 0.183.2+). Using it means missing out on performance improvements, bug fixes, and critical updates, and may introduce compatibility issues with newer ecosystems.","severity":"breaking","affected_versions":">=0.181.0"},{"fix":"Always use `import` statements (e.g., `import * as THREE from 'super-three';`) and for loaders/addons, import from `super-three/examples/jsm/...`. Configure your build system (Webpack, Rollup, Vite) to correctly handle ES Modules.","message":"`three.js` (and thus `super-three`) strongly encourages and primarily ships ES Modules. Importing CommonJS builds or older UMD bundles can lead to larger bundle sizes, broken tree-shaking, and compatibility issues with modern build tools.","severity":"gotcha","affected_versions":">=0.100.0 (approximate three.js equivalent)"},{"fix":"Call the `.dispose()` method on `Geometry`, `Material`, and `Texture` instances when they are no longer in use. For materials, iterate through their textures and dispose of each one. Remove objects from the scene to release references.","message":"`three.js` objects like `Geometry`, `Material`, and `Texture` allocate resources on the GPU. If not explicitly disposed of when no longer needed, they can lead to significant memory leaks, especially in single-page applications or long-running experiences. This behavior applies to `super-three` as well.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure you use the exact relative import path, e.g., `import { GLTFLoader } from 'super-three/examples/jsm/loaders/GLTFLoader.js';`. Note the `.js` extension is often required in ES Module environments.","message":"Loaders (e.g., `GLTFLoader`) and other examples/add-ons are located in `super-three/examples/jsm/`. Incorrect paths or attempting to `require` them can lead to module resolution errors due to differences in module systems or file extensions.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For ES Modules, use `import * as THREE from 'super-three';`. If using CommonJS, `const THREE = require('super-three');` (though ES Modules are the preferred and modern approach). Ensure your build system correctly bundles `super-three`.","cause":"Attempting to access `THREE` globally or from a CommonJS `require` call in an environment where it's not exposed, or when using ES Modules without the correct `import * as THREE` statement.","error":"Uncaught TypeError: THREE is not defined"},{"fix":"Ensure your bundler (Webpack, Rollup, Vite) is correctly configured to resolve `super-three` from `node_modules`. For direct browser use without a bundler, consider using an import map or a CDN version that exposes `THREE` globally.","cause":"A browser environment trying to resolve a bare module specifier (`super-three`) without a module map or import map, or a build system not correctly configured to resolve modules from `node_modules`.","error":"Failed to resolve module specifier \"super-three\". Relative references must start with \"./\", \"../\", or \"/\"."},{"fix":"Implement `webglcontextlost` and `webglcontextrestored` event listeners on `renderer.domElement` to gracefully handle context loss and attempt to reinitialize the scene. Optimize resource usage (geometries, textures, shaders) to reduce GPU pressure.","cause":"GPU drivers crashing, browser tab being backgrounded for too long, or excessive memory/resource usage leading to the browser discarding the WebGL context.","error":"WebGL: Context Lost"},{"fix":"Ensure you have `@types/three` installed and that its version is compatible with the `super-three` version (or the `three.js` version it was forked from). Use type assertions (e.g., `(mesh as any).someProperty`) if you are intentionally extending types or adding dynamic properties, or declare custom interfaces to extend `three.js` types properly.","cause":"TypeScript compiler error indicating an attempt to access a property or method not declared in the `three.js` (or `super-three`) type definitions for the specific object. This often happens when properties are dynamically added, or type casting is missing.","error":"Property 'someProperty' does not exist on type 'Mesh<...>'"}],"ecosystem":"npm"}