three-vrm gravity test

by Matt

HTML

<base href="https://rawcdn.githack.com/mrdoob/three.js/r154/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/[email protected]/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/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: lightblue;
}

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { TransformControls } from 'three/addons/controls/TransformControls.js'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { VRMLoaderPlugin, VRMUtils, VRMSpringBoneJointHelper } 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, transformControls, clock
let currentVrm, currentHelpers

scene = new THREE.Scene()

camera = new THREE.PerspectiveCamera(75, undefined, 0.1, 1000)
camera.position.set(2,2,2)

clock = new THREE.Clock()

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.toneMapping = THREE.LinearToneMapping
renderer.outputEncoding = THREE.sRGBEncoding
document.body.appendChild(renderer.domElement)

orbitControls = new OrbitControls(camera, renderer.domElement)
orbitControls.target.set(0, 1, 0)

transformControls = new TransformControls(camera, renderer.domElement)
transformControls.addEventListener( 'dragging-changed', function ( event ) {
  orbitControls.enabled = ! event.value;
} );
scene.add(transformControls)

const directionalLight = new THREE.DirectionalLight()
directionalLight.position.set(1,1,1)
scene.add(directionalLight)

const gltfLoader = new GLTFLoader()
gltfLoader.register( ( parser ) => {
  return new VRMLoaderPlugin( parser );
} );

const gui = new GUI()
const params = {
	gravityDirX: 0,
  gravityDirY: 0,
  gravityDirZ: 0,
  gravityPower: 0
}
gui.add(params, 'gravityDirX').min(-1).max(1)
gui.add(params, 'gravityDirY').min(-1).max(1)
gui.add(params, 'gravityDirZ').min(-1).max(1)
gui.add(params, 'gravityPower').min(0).max(3)
gui.onChange(updateGravity)

window.addEventListener('resize',...