{"id":15044735,"url":"https://github.com/skomorox/react-three-nephilim","last_synced_at":"2026-02-18T15:32:06.859Z","repository":{"id":40211297,"uuid":"211551717","full_name":"skomorox/react-three-nephilim","owner":"skomorox","description":"3d SPA engine based on React and Three.js","archived":false,"fork":false,"pushed_at":"2025-04-15T20:55:46.000Z","size":911,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-15T07:40:08.821Z","etag":null,"topics":["animation","mvc","react","react-three","react-three-spa","spa","threejs"],"latest_commit_sha":null,"homepage":"https://nephilim.herokuapp.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skomorox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-09-28T19:29:55.000Z","updated_at":"2025-04-15T20:55:50.000Z","dependencies_parsed_at":"2024-09-22T00:04:21.376Z","dependency_job_id":"9a0902c2-8091-4ac0-a833-52ed07cd85d6","html_url":"https://github.com/skomorox/react-three-nephilim","commit_stats":{"total_commits":88,"total_committers":3,"mean_commits":"29.333333333333332","dds":0.25,"last_synced_commit":"a7005ada460d6ffd89753b62b0508f06b67a22dd"},"previous_names":["Skomorox/react-three-composition","skomorox/react-three-composition"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/skomorox/react-three-nephilim","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skomorox%2Freact-three-nephilim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skomorox%2Freact-three-nephilim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skomorox%2Freact-three-nephilim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skomorox%2Freact-three-nephilim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skomorox","download_url":"https://codeload.github.com/skomorox/react-three-nephilim/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skomorox%2Freact-three-nephilim/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29583918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T13:56:48.962Z","status":"ssl_error","status_checked_at":"2026-02-18T13:54:34.145Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","mvc","react","react-three","react-three-spa","spa","threejs"],"created_at":"2024-09-24T20:50:58.086Z","updated_at":"2026-02-18T15:32:06.843Z","avatar_url":"https://github.com/skomorox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-three-nephilim\nNephilim is a React framework for Three.js allowing you to easily create sophisticated animated scenes.\nNephilim introducing Scene-Controller concept, where instead of regular Views, navigation is carried out between Scenes in 3D space.\nThe idea is that global THREE.Scene consists of several Scenes (THREE.Group) - \"Views\", and Nephilim carries out \"routing\" between them -\nmoves currently active Scene behind the scenes and brings another Scene to front.\nThis allows to achieve results that could be checked out \u003ca href=\"http://nephilim.herokuapp.com\"\u003ehere\u003c/a\u003e.\n\nNephilim includes following features:\n- Intuitive React Components;\n- Adds Scene-Controller structure to application powered by Three.js;\n- Mixed GL and HTML scenes powered by WebGlRenderer and CSS3DRenderer;\n- Animated actions, several types of motions (random/static position, rotation, scale, mouse tracking, morph);\n- Several types of composition of GL and/or HTML objects within a container;\n- Adaptive positioning of objects on the Scene;\n- Post Processing support;\n- Basic Routing.\n- three-nebula integration (without json loader)\n\n# React\nRequires react \u003e17\n\n# Installation\n- $npm i react-three-nephilim\n\n# Build\n- $cd react-three-nephilim\n- $npm i\n- $npm run build\n\n# API\n```javascript\nimport { useNephilim } from 'react-three-nephilim';\n\nconst MainScene = () =\u003e {\n  const {\n    devicePlatform, // Platform.Desktop, Platform.Mobile\n    deviceOrientation, // Orientation.Landscape, Orientation.Portrait\n    setPPEffects, // Set post processing effects\n    setLoader, // Add custom loader\n    setVisualState, // Set visual state by Decoration id\n    setMotion, // Set Motion by Decoration id\n    getAction, // Get Action by id\n    connectActions, // Link Actions object to given Decoration\n    resetActions, // Stop actions execution\n    executeActionsSequence, // Execute sequence of Actions\n    enablePostProcessing, // Enable / disable post processing\n    enableLayerRendering, // Enable / disable layer by layer rendering\n    find, // Find Decoration by id\n    findAll, // Find Decorations containing given id part\n    navigate, // Navigate to Scene by id\n    onUpdate, // Add onUpdate handler\n    clearUpdateHandlers, // Clear onUpdate handlers\n    isSceneActive // Check if Scene is currently active\n  } = useNephilim();\n  .....\n};\n```\n\n# Usage\n\n```javascript\n.nephilim {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n}\n.button {\n  cursor: pointer;\n}\n```\n\nBasic html example:\n```javascript\nimport React from 'react';\nimport Nephilim, { Hypertext, Types } from 'react-three-nephilim';\nimport './css/styles.css';\n\nexport const App = () =\u003e (\n  \u003cdiv className={'nephilim'}\u003e\n    \u003cNephilim\n      camera={{\n        type: Types.Camera.Perspective,\n        fov: 40,\n        near: 1,\n        far: 200000\n      }}\n      cssRenderer={true}\n    \u003e\n      \u003cHypertext\n        position={{ x: 10, y: 20, z: -300 }}\n        rotation={{ x: 1, y: 1, z: 1 }}\n      \u003e\n        \u003cdiv style={{ fontSize: 12 }}\u003e\n          Hello World Static\n        \u003c/div\u003e\n      \u003c/Hypertext\u003e\n      \u003cHypertext\n        position={{ z: -300 }}\n        motion={{\n          position: { axis: Types.Axis.XYZ, maxValue: 10, velocity: 0.1 },\n          rotation: { axis: Types.Axis.XYZ, maxValue: 10, velocity: 0.01 },\n          scale: { axis: Types.Axis.XY, maxValue: 5, velocity: 0.01 }\n        }}\n      \u003e\n        \u003cdiv style={{ fontSize: 12 }}\u003e\n          Hello World Motion\n        \u003c/div\u003e\n      \u003c/Hypertext\u003e\n    \u003c/Nephilim\u003e\n  \u003c/div\u003e\n);\n```\n\nBasic mesh example:\n```javascript\nimport React from 'react';\nimport Nephilim, { Mesh, Material, Geometry, Types } from 'react-three-nephilim';\nimport './css/styles.css';\n\nexport const App = () =\u003e (\n  \u003cdiv className={'nephilim'}\u003e\n    \u003cNephilim\n      camera={{\n        type: Types.Camera.Perspective,\n        fov: 40,\n        near: 1,\n        far: 200000\n      }}\n      glRenderer={true}\n    \u003e\n      \u003cMesh\n        position={{ z: -300 }}\n        motion={{\n          rotation: { axis: Types.Axis.XYZ, maxValue: 10, randVelocity: 0.01 },\n          position: { axis: Types.Axis.XYZ, maxValue: 100, randVelocity: 1 }\n        }}\n      \u003e\n        \u003cGeometry\n          type={Types.Geometry.Box}\n          params={[30, 20, 20]}\n        /\u003e\n        \u003cMaterial\n          type={Types.Material.Basic}\n          color={0xffffff}\n        /\u003e\n      \u003c/Mesh\u003e\n    \u003c/Nephilim\u003e\n  \u003c/div\u003e\n);\n```\n\nMixed example:\n```javascript\nimport React from 'react';\nimport Nephilim, { Hypertext, Mesh, Geometry, Material, Motion, Types } from 'react-three-nephilim';\nimport './css/styles.css';\n\nexport const App = () =\u003e (\n  \u003cdiv className={'nephilim'}\u003e\n    \u003cNephilim\n      camera={{\n        type: Types.Camera.Perspective,\n        fov: 40,\n        near: 1,\n        far: 200000\n      }}\n      glRenderer={true}\n      cssRenderer={true}\n    \u003e\n      \u003cHypertext\n        position={{ z: -300 }}\n        motion={{\n          position: { axis: Types.Axis.XYZ, maxValue: 10, velocity: 0.1 },\n          rotation: { axis: Types.Axis.XYZ, maxValue: 10, velocity: 0.01 },\n          scale: { axis: Types.Axis.XY, maxValue: 5, velocity: 0.01 }\n        }}\n      \u003e\n        \u003cdiv style={{ fontSize: 12, color: 'white' }}\u003e\n          Text\n        \u003c/div\u003e\n      \u003c/Hypertext\u003e\n      \u003cMesh position={{ z: -300 }}\u003e\n        \u003cGeometry\n          type={Types.Geometry.Box}\n          params={[30, 20, 20]}\n        /\u003e\n        \u003cMaterial\n          type={Types.Material.Basic}\n          color={0xffffff}\n        /\u003e\n        \u003cMotion\n          rotation={{\n            axis: Types.Axis.XYZ,\n            maxValue: 10,\n            randVelocity: 0.01\n          }}\n          position={{\n            axis: Types.Axis.XYZ,\n            maxValue: 100,\n            randVelocity: 1\n          }}\n        /\u003e\n      \u003c/Mesh\u003e\n    \u003c/Nephilim\u003e\n  \u003c/div\u003e\n);\n```\n\nMore complex example - components, hook, extend Scene:\n```javascript\nimport React from 'react';\nimport Nephilim, {\n  Scene, Container, Mesh, Hypertext, Light,\n  Types, useNephilim, withNephilim\n} from 'react-three-nephilim';\nimport './css/styles.css';\n\nconst actions = {\n  main: {\n    // 'Main:Navigate' syntax is required only for Navigate action\n    // to determine which Scene to apply Navigate to\n    // In reqular case it could look like SomeActionName: { position: {...}, rotation: {...}, scale: {...} }\n    // getAction('SomeActionName').begin();\n    'Main:Navigate': {\n      position: { y: 0 }\n    },\n    'Second:Navigate': {\n      position: { y: 1000 }\n    }\n  },\n  second: {\n    'Main:Navigate': {\n      position: { y: -1000 }\n    },\n    'Second:Navigate': {\n      position: { y: 0 }\n    }\n  }\n};\n\nconst MainScene = () =\u003e {\n\n  // useNephilim hook\n  const { navigate } = useNephilim();\n\n  // Scene could either have children or be extended by AnotherScene with custom render() {...}\n  return (\n    \u003cScene\n      id={'Main'}\n      isInitial={true}\n      position={{ y: -1000, z: -500 }}\n      navigationDuration={1000}\n      actions={actions.main}\n    \u003e\n      \u003cHypertext\u003e\n        \u003cdiv\n          className={'button'}\n          onClick={() =\u003e navigate('Second')}\n        \u003e\n          Navigate to Second Scene\n        \u003c/div\u003e\n      \u003c/Hypertext\u003e\n      \u003cMesh\n        geometry={{\n          type: Types.Geometry.Box,\n          params: [50, 20, 20]\n        }}\n        material={{\n          type: Types.Material.Phong,\n          specular: 0x47e9f5,\n          color: 0x47e9f5\n        }}\n        motion={{\n          rotation: { axis: Types.Axis.XYZ, maxValue: 10, randVelocity: 0.01 },\n          position: { axis: Types.Axis.XYZ, maxValue: 100, randVelocity: 1 }\n        }}\n      /\u003e\n    \u003c/Scene\u003e\n  )\n};\n\nclass Second extends Scene {\n\n  render() {\n\n    const { navigate } = this.props;\n\n    // Container could either have children or be extended by AnotherContainer with custom render() {...}\n    return (\n      \u003cContainer\u003e\n        \u003cHypertext\u003e\n          \u003cdiv\n            className={'button'}\n            onClick={() =\u003e navigate('Main')}\n          \u003e\n            Back to Main Scene\n          \u003c/div\u003e\n        \u003c/Hypertext\u003e\n        \u003cMesh\n          geometry={{\n            type: Types.Geometry.Sphere,\n            params: [20, 100, 100]\n          }}\n          material={{\n            type: Types.Material.Phong,\n            specular: 0x47e9f5,\n            color: 0x47e9f5\n          }}\n          motion={{\n            rotation: { axis: Types.Axis.XYZ, maxValue: 10, randVelocity: 0.01 },\n            position: { axis: Types.Axis.XYZ, maxValue: 100, randVelocity: 1 }\n          }}\n        /\u003e\n      \u003c/Container\u003e\n    );\n  }\n}\n\n// withNephilim HOC\nconst SecondScene = withNephilim(Second);\n\nexport const App = () =\u003e (\n  \u003cdiv className={'nephilim'}\u003e\n    \u003cNephilim\n      camera={{\n        type: Types.Camera.Perspective,\n        fov: 40,\n        near: 1,\n        far: 200000\n      }}\n      glRenderer={{ alpha: true }}\n      cssRenderer={true}\n    \u003e\n      \u003cMainScene /\u003e\n      \u003cSecondScene\n        id={'Second'}\n        position={{ y: -1000, z: -500 }}\n        navigationDuration={1000}\n        actions={actions.second}\n      /\u003e\n      \u003cLight\n        type={Types.Light.Directional}\n        params={[0xffffff, 0.1]}\n      /\u003e\n      \u003cLight\n        type={Types.Light.Ambient}\n        params={[0xffffff, 0.5]}\n      /\u003e\n    \u003c/Nephilim\u003e\n  \u003c/div\u003e\n);\n```\n\nNephilim settings:\n```javascript\nconst router = {\n  Main: '/', // \u003cScene id={'Main'} /\u003e\n  Second: '/second' // Also \u003cid\u003e: { path: '/...', callback: (manager, route) =\u003e {...} } is acceptable\n  // where callback is a function that should be executed after navigation to the Scene\n};\nconst postProcessing = {\n  UnrealBloom: {\n    src: UnrealBloomPass,\n    params: [...]\n  },\n  BleachBypassShader: {\n    src: BleachBypassShader,\n    uniforms: {\n      opacity: 0.7\n    }\n  },\n  FreiChenShader: {\n    src: FreiChenShader\n  }\n};\n\nexport const App = () =\u003e (\n  \u003cdiv className={'nephilim'}\u003e\n    \u003cNephilim\n      camera={{\n        type: Types.Camera.Perspective,\n        fov: 40,\n        near: 1,\n        far: 200000\n      }}\n      glRenderer={{\n        alpha: true,\n        antialias: true,\n        autoClear: false\n      }}\n      cssRenderer={true}\n      layerRendering={true}\n      router={router}\n      postProcessing={postProcessing}\n    \u003e\n      {...}\n    \u003c/Nephilim\u003e\n  \u003c/div\u003e\n);\n```\n\nNephilim components:\n```javascript\nimport Nephilim, {\n  GLRenderer, CSSRenderer, Camera,\n  PostProcessing, Router, LayerRendering, Types\n} from 'react-three-nephilim';\n.....\n\nexport const App = () =\u003e  (\n  \u003cdiv className={'nephilim'}\u003e\n    \u003cNephilim\u003e\n      \u003cCamera\n        type={Types.Camera.Perspective}\n        fov={40}\n        near={1}\n        far={200000}\n      /\u003e\n      \u003cGLRenderer\n        alpha={true}\n        antialias={true}\n        autoClear={false}\n      /\u003e\n      \u003cCSSRenderer /\u003e\n      \u003cLayerRendering /\u003e\n      \u003cRouter\n        MainScene={'/'}\n        SecondScene={'/second'}\n      /\u003e\n      \u003cPostProcessing\n        UnrealBloomPass={{\n          params: [new Vector2(window.innerWidth, window.innerHeight), 3, 0.5, 0]\n        }}\n      /\u003e\n      \u003cMainScene {...} /\u003e\n      \u003cSecondScene {...} /\u003e\n    \u003c/Nephilim\u003e\n  \u003c/div\u003e\n);\n```\n\n# Supported Types\n\n```javascript\nconst Decoration = {\n  Container: 'Container',\n  Emitter: 'Emitter',\n  Glass: 'Glass',\n  Hypertext: 'Hypertext',\n  Light: 'Light',\n  Line: 'Line',\n  Mesh: 'Mesh',\n  Scene: 'Scene',\n  Sprite: 'Sprite',\n  Swarm: 'Swarm'\n};\n\nconst Camera = {\n  Cube: 'CubeCamera',\n  Orthographic: 'OrthographicCamera',\n  Perspective: 'PerspectiveCamera',\n  Stereo: 'StereoCamera'\n};\n\nconst Geometry = {\n  Box: 'BoxGeometry',\n  Capsule: 'CapsuleGeometry',\n  Circle: 'CircleGeometry',\n  Cone: 'ConeGeometry',\n  Cylinder: 'CylinderGeometry',\n  Dodecahedron: 'DodecahedronGeometry',\n  Extrude: 'ExtrudeGeometry',\n  Icosahedron: 'IcosahedronGeometry',\n  Lathe: 'LatheGeometry',\n  Octahedron: 'OctahedronGeometry',\n  Plane: 'PlaneGeometry',\n  Polyhedron: 'PolyhedronGeometry',\n  Ring: 'RingGeometry',\n  Shape: 'ShapeGeometry',\n  Sphere: 'SphereGeometry',\n  Tetrahedron: 'TetrahedronGeometry',\n  Torus: 'TorusGeometry',\n  TorusKnot: 'TorusKnotGeometry',\n  Tube: 'TubeGeometry'\n};\n\nconst Material = {\n  Basic: 'MeshBasicMaterial',\n  Depth: 'MeshDepthMaterial',\n  Distance: 'MeshDistanceMaterial',\n  Lambert: 'MeshLambertMaterial',\n  Matcap: 'MeshMatcapMaterial',\n  Normal: 'MeshNormalMaterial',\n  Phong: 'MeshPhongMaterial',\n  Physical: 'MeshPhysicalMaterial',\n  Standard: 'MeshStandardMaterial',\n  Toon: 'MeshToonMaterial',\n  Points: 'PointsMaterial',\n  LineBasic: 'LineBasicMaterial',\n  LineDashed: 'LineDashedMaterial',\n  Shader: 'ShaderMaterial',\n  Shadow: 'ShadowMaterial',\n  Sprite: 'SpriteMaterial'\n};\n\nconst Glass = {\n  Reflector: 'Reflector',\n  Refractor: 'Refractor'\n};\n\nconst Light = {\n  Ambient: 'AmbientLight',\n  Directional: 'DirectionalLight',\n  Hemisphere: 'HemisphereLight',\n  Point: 'PointLight',\n  Spot: 'SpotLight'\n};\n\nconst Line = {\n  Basic: 'Line',\n  Loop: 'LineLoop',\n  Segments: 'LineSegments'\n};\n\nconst Loader = {\n  AMF: 'AMFLoader',\n  BVH: 'BVHLoader',\n  Collada: 'ColladaLoader',\n  DDS: 'DDSLoader',\n  DRACO: 'DRACOLoader',\n  EXR: 'EXRLoader',\n  FBX: 'FBXLoader',\n  Font: 'FontLoader',\n  GCode: 'GCodeLoader',\n  GLTF: 'GLTFLoader',\n  HDRCubeTexture: 'HDRCubeTextureLoader',\n  IES: 'IESLoader',\n  KMZ: 'KMZLoader',\n  KTX: 'KTXLoader',\n  KTX2: 'KTX2Loader',\n  LDraw: 'LDrawLoader',\n  Lottie: 'LottieLoader',\n  LUT3dl: 'LUT3dlLoader',\n  LUTCube: 'LUTCubeLoader',\n  LUTImage: 'LUTImageLoader',\n  LWO: 'LWOLoader',\n  MD2: 'MD2Loader',\n  MDD: 'MDDLoader',\n  MMD: 'MMDLoader',\n  MTL: 'MTLLoader',\n  NRRD: 'NRRDLoader',\n  OBJ: 'OBJLoader',\n  PCD: 'PCDLoader',\n  PDB: 'PDBLoader',\n  PLY: 'PLYLoader',\n  PVR: 'PVRLoader',\n  RGBE: 'RGBELoader',\n  RGBM: 'RGBMLoader',\n  Rhino3dm: 'Rhino3dmLoader',\n  STL: 'STLLoader',\n  SVG: 'SVGLoader',\n  TDS: 'TDSLoader',\n  TGA: 'TGALoader',\n  ThreeMF: 'ThreeMFLoader',\n  TIFF: 'TIFFLoader',\n  TTF: 'TTFLoader',\n  UltraHDR: 'UltraHDRLoader',\n  USDZ: 'USDZLoader',\n  VOX: 'VOXLoader',\n  VRML: 'VRMLLoader',\n  VTK: 'VTKLoader',\n  XYZ: 'XYZLoader'\n};\n\nconst Composition = {\n  Cylinder: 'Cylinder',\n  DepthGrid: 'DepthGrid',\n  Grid: 'Grid'\n};\n\nconst Platform = {\n  Desktop: 'desktop',\n  Mobile: 'mobile'\n};\n\nconst Orientation = {\n  Landscape: 'landscape',\n  Portrait: 'portrait'\n};\n\nconst Axis = {\n  X: 'x',\n  Y: 'y',\n  Z: 'z',\n  XY: 'xy',\n  XZ: 'xz',\n  YZ: 'yz',\n  XYZ: 'xyz'\n};\n```\n\nIt is not absolutely necessary to use controllers in your app and just follow regular React approach as described in examples,\nbut they provide some useful functionality to separate control logic and manage Scenes.\nAdvanced examples you can find \u003ca href=\"http://nephilim.herokuapp.com/examples\"\u003ehere\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskomorox%2Freact-three-nephilim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskomorox%2Freact-three-nephilim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskomorox%2Freact-three-nephilim/lists"}