three-vrm springbone scaling issue
by Matt
HTML
<base href="https://rawcdn.githack.com/mrdoob/three.js/r151/examples/" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@^0.154.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@^0.154.0/examples/jsm/",
"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/[email protected]/lib/three-vrm.module.min.js",
"lil-gui": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.esm.min.js"
}
}
</script>
CSS
body {
background-color: black;
}
canvas {
position: fixed;
inset: 0;
}
JavaScript
import * as THREE from 'three';
import {
OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import {
GLTFLoader
} from 'three/addons/loaders/GLTFLoader.js';
import {
VRM,
VRMLoaderPlugin,
VRMSpringBoneColliderHelper,
VRMSpringBoneJointHelper,
VRMUtils,
VRMSpringBoneColliderShapeCapsule,
VRMSpringBoneColliderShapeSphere,
} from '@pixiv/three-vrm';
import {
GUI
} from 'lil-gui';
const VRM_URL =
'https://rawcdn.githack.com/pixiv/three-vrm/0f9fd31a0baeb16587365eb5597ebb4012f42e46/packages/three-vrm/examples/models/VRM1_Constraint_Twist_Sample.vrm';
let scene, camera, renderer;
let orbitControls, clock;
let currentVrm;
init().then(animate);
async function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, undefined, 0.1, 1000);
camera.position.set(-0.2, 1.5, 1);
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.toneMapping = THREE.LinearToneMapping;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);
orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.target.set(0, 1, 0);
const directionalLight = new THREE.DirectionalLight();
scene.add(directionalLight);
const gltfLoader = new GLTFLoader();
gltfLoader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
const gltf = await gltfLoader.loadAsync(VRM_URL);
currentVrm = gltf.userData.vrm;
if (!(currentVrm instanceof VRM)) throw new Error();
VRMUtils.removeUnnecessaryVertices(gltf.scene);
VRMUtils.removeUnnecessaryJoints(gltf.scene);
VRMUtils.rotateVRM0(currentVrm);
currentVrm.springBoneManager.colliders.forEach((collider) => {
const colliderHelper = new VRMSpringBoneColliderHelper(collider);
scene.add(colliderHelper);
});
currentVrm.springBoneManager.joints.forEach((join) => {
const jointHelper = new VRMSpringBoneJointHelper(join);
...