{"_id":"@alphaspeech/3d_web_avatar","_rev":"3-5ad1cabcfc70bd58e31019c28f1bb41a","name":"@alphaspeech/3d_web_avatar","dist-tags":{"latest":"2.0.7"},"versions":{"2.0.0":{"name":"@alphaspeech/3d_web_avatar","version":"2.0.0","author":{"name":"Lia Frischholz & Ricardo de Schultz @ Alphaspeech"},"license":"ISC","_id":"@alphaspeech/3d_web_avatar@2.0.0","maintainers":[{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"}],"dist":{"shasum":"719ffbd0bbf2d083a17d102e4103b08663978e07","tarball":"https://registry.npmjs.org/@alphaspeech/3d_web_avatar/-/3d_web_avatar-2.0.0.tgz","fileCount":15,"integrity":"sha512-qRkdZV7vsNNlZ3/zspZUcHAG3SDCikXXVvkDQLkx8poV0V3pqzWTqpD2IC3bkN70wqW5WxPoj+AtvJiT9AI3vg==","signatures":[{"sig":"MEUCIQDNJHKHcSOCNBS5f2xeaXwPKSuFuLovLV04iP5xvnH5kgIgLUQ3p7rsYw3FKKkHC36+yEI+0BEeLiTr9Gv9XPP820c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":531715},"main":"./build/AlphaspeechAvatar.cjs","type":"module","module":"./build/AlphaspeechAvatar.module.js","exports":{".":{"import":"./build/AlphaspeechAvatar.module.js","require":"./build/AlphaspeechAvatar.cjs"},"./src/js/*":"./src/js/*","./src/css/*":"./src/css/*","./test/res/audio/*":"./res/audio/*","./test/res/video/*":"./res/video/*","./test/res/models/*":"./res/models/*"},"gitHead":"7ac08d138cd621cb42feafa3c493342de870d3ae","scripts":{"dev":"concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080\"","lint":"npm run lint-core","test":"npm run lint && npm run test-unit","build":"rollup -c utils/build/rollup.config.js","start":"npm run dev","dev-ssl":"concurrently --names \"ROLLUP,HTTPS\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080 --ssl\"","lint-fix":"npm run lint-core -- --fix && npm run lint-addons -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix && npm run lint-editor -- --fix && npm run lint-playground -- --fix && npm run lint-manual -- --fix && npm run lint-test -- --fix && npm run lint-utils -- --fix","lint-core":"eslint src","lint-docs":"eslint docs --ignore-pattern prettify.js","lint-test":"eslint test --ignore-pattern vendor","lint-utils":"eslint utils","lint-addons":"eslint examples/jsm --ext .js --ignore-pattern libs --ignore-pattern ifc","lint-editor":"eslint editor --ignore-pattern libs","lint-manual":"eslint manual --ignore-pattern 3rdparty --ignore-pattern prettify.js --ignore-pattern shapefile.js","build-module":"rollup -c utils/build/rollup.config.js --configOnlyModule","lint-examples":"eslint examples --ext .html","lint-playground":"eslint playground --ignore-pattern libs"},"_npmUser":{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"},"repository":{"url":"https://gitlab.lingucity.de/linguwerk/projects/internal/alphaspeech/app/3d_web_avatar","type":"git"},"_npmVersion":"10.9.0","description":"An animated 3D Avatar to be used for Voice User Interfaces (VUI) in JavaScript.","directories":{},"_nodeVersion":"22.12.0","dependencies":{"three":"^0.170.0","rollup":"^4.16.4","stats.js":"^0.17.0","magic-string":"^0.30.8","load-json-file":"^7.0.1","@tweenjs/tween.js":"^25.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.1.5","webpack":"^5.90.3","webpack-cli":"^5.1.4","@rollup/plugin-json":"^6.1.0","@rollup/plugin-terser":"^0.4.4"},"_npmOperationalInternal":{"tmp":"tmp/3d_web_avatar_2.0.0_1755280123365_0.8667976686770571","host":"s3://npm-registry-packages-npm-production"}},"2.0.6":{"name":"@alphaspeech/3d_web_avatar","version":"2.0.6","author":{"name":"Lia Frischholz & Ricardo de Schultz"},"license":"ISC","_id":"@alphaspeech/3d_web_avatar@2.0.6","maintainers":[{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"}],"dist":{"shasum":"f943f0aeeb4fc206e1655fff9f0d66ba97de88b1","tarball":"https://registry.npmjs.org/@alphaspeech/3d_web_avatar/-/3d_web_avatar-2.0.6.tgz","fileCount":18,"integrity":"sha512-0mA9oilST+fs7TmKW5rm2U4d+QpizStJK7tkrCe5yRfzblWwDAbyqF+nfyXz1t8E0HDon49ttnOQKPbew/PB2Q==","signatures":[{"sig":"MEQCIFYAlryzvvrCs7KSGhnBKJN7HipneBqdg6x6Rs0GYfLIAiBAF6+D3V5SSCrJUPZPsQEA+ly8v7OvMBDe8nEHSGaa3Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":210841},"main":"app/build/AlphaspeechAvatar.cjs","type":"module","module":"app/build/AlphaspeechAvatar.module.js","exports":{".":{"import":"./build/AlphaspeechAvatar.module.js","require":"./build/AlphaspeechAvatar.cjs"},"./src/js/*":"./src/js/*","./src/css/*":"./src/css/*","./test/res/audio/*":"./res/audio/*","./test/res/video/*":"./res/video/*","./test/res/models/*":"./res/models/*"},"gitHead":"7ac08d138cd621cb42feafa3c493342de870d3ae","scripts":{"dev":"concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080\"","lint":"npm run lint-core","test":"npm run lint && npm run test-unit","build":"rollup -c utils/build/rollup.config.js","start":"npm run dev","dev-ssl":"concurrently --names \"ROLLUP,HTTPS\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080 --ssl\"","lint-fix":"npm run lint-core -- --fix && npm run lint-addons -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix && npm run lint-editor -- --fix && npm run lint-playground -- --fix && npm run lint-manual -- --fix && npm run lint-test -- --fix && npm run lint-utils -- --fix","lint-core":"eslint src","lint-docs":"eslint docs --ignore-pattern prettify.js","lint-test":"eslint test --ignore-pattern vendor","lint-utils":"eslint utils","lint-addons":"eslint examples/jsm --ext .js --ignore-pattern libs --ignore-pattern ifc","lint-editor":"eslint editor --ignore-pattern libs","lint-manual":"eslint manual --ignore-pattern 3rdparty --ignore-pattern prettify.js --ignore-pattern shapefile.js","build-module":"rollup -c utils/build/rollup.config.js --configOnlyModule","lint-examples":"eslint examples --ext .html","lint-playground":"eslint playground --ignore-pattern libs"},"_npmUser":{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"},"repository":{"url":"https://gitlab.lingucity.de/linguwerk/projects/internal/alphaspeech/app/3d_web_avatar","type":"git"},"_npmVersion":"11.6.1","description":"An animated 3D Avatar to be used for Voice User Interfaces (VUI) in JavaScript.","directories":{},"_nodeVersion":"24.11.0","dependencies":{"three":"^0.170.0","rollup":"^4.16.4","stats.js":"^0.17.0","magic-string":"^0.30.8","load-json-file":"^7.0.1","@tweenjs/tween.js":"^25.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.1.5","webpack":"^5.90.3","webpack-cli":"^5.1.4","@rollup/plugin-json":"^6.1.0","@rollup/plugin-terser":"^0.4.4"},"_npmOperationalInternal":{"tmp":"tmp/3d_web_avatar_2.0.6_1782746616765_0.20495539722720935","host":"s3://npm-registry-packages-npm-production"}},"2.0.7":{"name":"@alphaspeech/3d_web_avatar","version":"2.0.7","description":"An animated 3D Avatar to be used for Voice User Interfaces (VUI) in JavaScript.","author":{"name":"Lia Frischholz & Ricardo de Schultz"},"license":"ISC","type":"module","main":"./build/AlphaspeechAvatar.cjs","module":"./build/AlphaspeechAvatar.module.js","exports":{".":{"import":"./build/AlphaspeechAvatar.module.js","require":"./build/AlphaspeechAvatar.cjs"},"./src/css/*":"./src/css/*","./src/js/*":"./src/js/*","./test/res/audio/*":"./res/audio/*","./test/res/models/*":"./res/models/*","./test/res/video/*":"./res/video/*"},"repository":{"type":"git","url":"https://gitlab.lingucity.de/linguwerk/projects/internal/alphaspeech/app/3d_web_avatar"},"scripts":{"start":"npm run dev","test":"npm run lint && npm run test-unit","build":"rollup -c utils/build/rollup.config.js","build-module":"rollup -c utils/build/rollup.config.js --configOnlyModule","dev":"concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080\"","dev-ssl":"concurrently --names \"ROLLUP,HTTPS\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080 --ssl\"","lint-core":"eslint src","lint-addons":"eslint examples/jsm --ext .js --ignore-pattern libs --ignore-pattern ifc","lint-examples":"eslint examples --ext .html","lint-docs":"eslint docs --ignore-pattern prettify.js","lint-editor":"eslint editor --ignore-pattern libs","lint-playground":"eslint playground --ignore-pattern libs","lint-manual":"eslint manual --ignore-pattern 3rdparty --ignore-pattern prettify.js --ignore-pattern shapefile.js","lint-test":"eslint test --ignore-pattern vendor","lint-utils":"eslint utils","lint":"npm run lint-core","lint-fix":"npm run lint-core -- --fix && npm run lint-addons -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix && npm run lint-editor -- --fix && npm run lint-playground -- --fix && npm run lint-manual -- --fix && npm run lint-test -- --fix && npm run lint-utils -- --fix"},"dependencies":{"@tweenjs/tween.js":"^25.0.0","load-json-file":"^7.0.1","magic-string":"^0.30.8","rollup":"^4.16.4","stats.js":"^0.17.0","three":"^0.170.0"},"devDependencies":{"@rollup/plugin-json":"^6.1.0","@rollup/plugin-terser":"^0.4.4","vite":"^5.1.5","webpack":"^5.90.3","webpack-cli":"^5.1.4"},"gitHead":"7ac08d138cd621cb42feafa3c493342de870d3ae","_id":"@alphaspeech/3d_web_avatar@2.0.7","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-OobPKFk0oTKVvYA+vB7MBY63YOcMAUKbpNch1IUnpM2UNNLmq4jcNXQkV0s5wCKZCt94uTWyQdK2ZvNOMekQ/A==","shasum":"634473ec270e773cb39720e9a7d0d65154ed7d0f","tarball":"https://registry.npmjs.org/@alphaspeech/3d_web_avatar/-/3d_web_avatar-2.0.7.tgz","fileCount":21,"unpackedSize":587965,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF7t8VQ7ZXr8nK5QBePHrvQ5BKrFEo2Or5f9tHUTzq8rAiARLg3GJE710yzpBptoU5aOzhPGa3w5mPCCyBcHzP7jow=="}]},"_npmUser":{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"},"directories":{},"maintainers":[{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3d_web_avatar_2.0.7_1782747705892_0.7130662122383191"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-15T17:48:43.257Z","modified":"2026-06-29T15:41:46.185Z","2.0.0":"2025-08-15T17:48:43.565Z","2.0.6":"2026-06-29T15:23:36.931Z","2.0.7":"2026-06-29T15:41:46.045Z"},"author":{"name":"Lia Frischholz & Ricardo de Schultz"},"license":"ISC","repository":{"type":"git","url":"https://gitlab.lingucity.de/linguwerk/projects/internal/alphaspeech/app/3d_web_avatar"},"description":"An animated 3D Avatar to be used for Voice User Interfaces (VUI) in JavaScript.","maintainers":[{"name":"lfr.alphaspeech","email":"lia.frischholz@linguwerk.de"}],"readme":"# Animated 3D Avatar for JavaScript Applications\n\nThis is a npm module to install in your web environment and then use in JavaScript.\nWith this module you can use the\n\n## Set up npm\nInstall npm and node if not already available on your system. You can check this with\n    \n    $ npm --version\n    $ node --version\n\nIf not already installed, install with\n\n    $ sudo apt install nodejs\n    $ sudo apt-install npm\n\nMake sure your node version is >= 14.\nTo update node.js on Ubuntu: (for newest version check here: https://nodejs.org/en/download/package-manager)\n    \n    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash\n    $ source ~/.nvm/nvm.sh\n    $ nvm install 20\n\n\nInstall required packages for npm with this command run in the project/root directory:\n\n    $ npm install\n\n## Starting for development\n\n### Initial Setup\n\nIn the project/root directory run this command to build\n    \n    $  npm run build\n\n\nin /test/ are the project files to host a demo. Initial setup:\n\n    $ cd test\n    $ npm i\n\n### Deployment\nIt's best to open a new terminal in /test/ and then host the demo using this command.\n    \n    $ npx vite --port 8080\n\nChanges to the demo are updates automatically. To apply module changes run \n\n    $  npm run build\n\n## Publishing new version of the package\n\nMake sure you have set our company registry in the npm config. Replace <token> with your token.\n    \n    $ npm config set -- //gitlab.lingucity.de/:_authToken=<token>\n\n\nUpdate the version of the package in package.json and package-lock.json.\nOnly the root directory ones! Do not do this in /tests/.\n\nBuild changes\n    \n    $ npm run build\n\nPublish new package. Must change version in project.json first!\n    \n    $ npm publish\n\n## Usage\n\n### Simple Setup\nIf you are importing this module to use in your project, this is how you use it:\n\n#### 1. Configure npm\nMake sure you have set our company registry in the npm config. Replace <token> with your token.\n    \n    $ npm config set -- //gitlab.lingucity.de/:_authToken=<token>\n\n#### 2. Install package(s)\nInstall the package with npm and make sure all dependencies are installed.\n\n    $ npm install @linguwerk/3d_web_avatar\n\nIf there's any strange behavior, you might need to check your three.js and tween.js versions.\nThese are the dependencies in package.json we use for development:\n\n    \"dependencies\": {\n      \"@tweenjs/tween.js\": \"^17.3.5\",\n      \"three\": \"^0.162.0\"\n    }\nIf you don't have them installed, or have the wrong version installed, \nuse the above dependencies or install using these commands:\n    \n    $ npm install three@^0.162.0\n    $ npm install tween@^17.3.5\n\n#### 3. Import and use avatar\nIn javascript, import the robot and init your avatar:\n    \n    import { Robot } from \"@linguwerk/3d_web_avatar\";\n\n    let myAvatar;\n    const avatarContainerId = \"containerForAvatar\";\n    const audioPlayerID = \"audioPlayer\";\n    \n    function createAvatar() {\n        myAvatar = new Robot(avatarContainerId, audioPlayerID);\n        myAvatar.setBackgoundColor(null); // clear background\n        myAvatar.camera.fov = 24; // to get avatar closer/further away\n    }\n    \n    function animate(animName) {\n        if (animName != null) {\n            myAvatar.playAnimation(animName);\n        }\n    }\n    function setSentiment(sentiment) {\n        myAvatar.setSentiment(sentiment);\n    }\n    \n    createAvatar();\n\n\nIf you have issues caused by the dependent packages not being found by this module, \nhere is a workaround to copy-paste at the top of your JavaScript file:\n\n    import * as THREE from 'three';\n    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';\n    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\n    import TWEEN from '@tweenjs/tween.js';\n    import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';\n    import Stats from 'stats.js'\n\n    window.THREE = THREE;\n    window.GLTFLoader = GLTFLoader;\n    window.OrbitControls = OrbitControls;\n    window.TWEEN = TWEEN;\n    window.DRACOLoader = DRACOLoader;\n    window.Stats = Stats;\n\nIf you have issues using the avatar in other JavaScript files outside you main, \nconsider copy-pasting this workaround at the bottom of your main JavaScript file:\n    \n    window.myAvatar = myAvatar;    \n    window.animate = animate;\n    window.setSentiment = setSentiment;\n\n### Dokumentation\n    \nTODO: Add all functionality available to the user.\n\n    Avatar\n        .getAllAnimations()\n        .playAnimation(animName)\n        .playAction(actionName)\n        .setSentiment(sentiName)\n        .setBackgoundColor(color)\n        .setZoomFactor(number)\n\n### Advanced Usage\nThere are many modifications you can make beyond the specified functions if you are willing to get into [three.js](https://threejs.org/docs/).\nWith the Avatar you can access the following to make three.js modifications:\n\n    // Set things like background color\n    myAvatar.scene\n\n    // Set things like fov\n    myAvatar.camera\n\n    // 3d model loaded in with three.js\n    myAvatar.gltf\n\n    // The renderer\n    myAvatar.renderer\n\n    // The materials configured in config\n    myAvatar.materials[<materialName>]\n\n    // Set things like rotation, position, material, ...\n    myAvatar.sceneItems[<seneItemName>].sceneItem\n\n    // action clipped to the animationMixer from glts file + Code actions\n    myAvatar.animator.animations[<animName>].actions[<idx>].action\n    myAvatar.animator.actions[<actionName>].action\n\n## Using your own 3D Model\n\nTo use your own 3D Model, you must specify a directory in which all the required files are located.\nYour 3D Model will need:\n- A gltf file containing \n  - the 3D model\n  - it's rig\n  - keyframe animations\n  - materials\n  - ...\n- A config file in which you specify \n  - the 3D objects your model is made of (sceneitems)\n  - Your keyframe actions in the gltf file\n  - Animations you want to have available (add your actions to define what should be executed)\n  - Your materials if you want to alter them after\n- If you want to have code actions and apply sentiments, you must write a class for your 3D model that extends Avatar and implement it analogous to Robot in robot.js\n\nThen you can just specify the directory and name of your model when creating the avatar:\n    \n    let config = {// your loaded config as JSON};\n    let modelDirectory = /path/to/your/modelDirectory/;\n    let modelName = \"name-of-your-model-file\";\n    let myAvatar = new Avatar(avatarContainerId, audioPlayerID, config, modelDirectory, modelName);","readmeFilename":"README.md"}