Actual HTML install instructions?

[GullyTechIO]

The "How to Use" has a section that implies that all you need is that HTML code and it'll "import all of them via CDN" (useful since two of the three "what you need" links are broken now). So I tried that but get the javascript error Address “three-vrm.module.js” was invalid.

three-vrm.module.js .. it's not in the repository anywhere. So I grab a copy from https://unpkg.com/browse/@pixiv/[email protected]/lib/ and manage to find the other two javascript files in other places.

<script type="importmap">
  {
    "imports": {
      "three": "three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
      "@pixiv/three-vrm": "three-vrm.module.js",
    }
  }
</script>

<script type="module">
  import * as THREE from 'three';
  import { GLTFLoader } from 'GLTFLoader.js';
  import { VRMLoaderPlugin } from '@pixiv/three-vrm';

Uncaught SyntaxError: Failed to parse import map: Invalid JSON format. JSON.parse: expected double-quoted property name at line 7 column 5 of the JSON data
Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

Guys I'm getting the feeling that the "from HTML" section of the examples is not going to work.

[yue4u]

@GullyTechIO
Sorry for the incomplete documentation.

In your example, try remove the trailing comma , as below as it make the importmap invalid JSON
Also try thejsdelivr CDN which is faster than unpkg.

<script type="importmap">
  {
    "imports": {
      "three": "three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
-      "@pixiv/three-vrm": "https://unpkg.com/browse/@pixiv/[email protected]/lib/three-vrm.module.js",
+      "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/[email protected]/lib/three-vrm.module.js"
    }
  }
</script>

[GullyTechIO]

Thank you for getting back so quickly. After removing the errant comma I was still getting Address “three-vrm.module.js” was invalid. so I found a copy of three-vrm.module.js, saved it locally (also saved a vrm file locally) and changed the importmap to ./three-vrm.module.js

Now it's starting to look like it should work except all I get is a blank white screen.

That's at least two references to local files that the doc doesn't mention. Is there an implied download that I have to do somewhere? I'd like to stick to HTML rather than using Node.

[GullyTechIO]

Sorry - I then changed that third import to @pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/[email protected]/lib/three-vrm.module.js as you advised - outcome is the same

[yue4u]

That's at least two references to local files

Could you elaborate on which paths are missing? favicon.ico is fetched by browser and it's fine to be missing.

The sample example also locates in https://github.com/pixiv/three-vrm/blob/278936b8d8544bd7e087d9bbcf1bc4ca6f44ba98/packages/three-vrm/examples/basic.html . Could you replace the @pixiv/three-vrm import path and try if it works?

[GullyTechIO]

For "missing files" I meant the three-vrm.module.js in readme.md's example, and also the vrm model file itself. Copying the example from basic.html and making those changes - I tried that just moments before getting your reply and it worked.

[GullyTechIO]

I tried copying the exact code from https://pixiv.github.io/three-vrm/packages/three-vrm/examples/basic.html and changing that third importmap line to "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/[email protected]/lib/three-vrm.module.js" - and it worked.

So there is some important difference between the example code in readme.md on the and the example pages.

[yue4u]

After reviewing the README I found it's more like pseudo code and not a complete sample. Thanks for this discussion and we will try to improve it.

[GullyTechIO]

Is there a list of functions somewhere? The examples only have currentVrm.expressionManager.setValue values for one arm (aa) and blinking (blinkLeft, blinkRight). I'd like to know how to move the head, mouth etc

[yue4u]

You can find some documentations at https://pixiv.github.io/three-vrm/packages/three-vrm/docs.

For moving head you can try

1. manipulating the VRM as Three.js objects
   1. https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-core/examples/humanoid.html#L120-L123
   2. https://threejs.org/docs/#api/en/core/Object3D.rotation
2. via Three.js supported animation files https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-core/examples/humanoidAnimation/loadMixamoAnimation.js
3. making VRMA and use https://github.com/pixiv/three-vrm/tree/dev/packages/three-vrm-animation

[GullyTechIO]

Hi yue4u, just wanted to say that it's now working magnificently. I have it blinking and following the mouse around, with an idle animation, and talking animations that I can start/stop appropriately when LLM text is being generated. Thank you so much.