hello-three-vrm

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.151.0/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@^0.151.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: lightblue;
}

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

const VRM_BEFORE = "http://127.0.0.1:8080/avatars/vroid-sample-c/models/unreal/v1.vrm"
const VRM_AFTER = "http://127.0.0.1:8080/avatars/vroid-sample-c/models/web/v1.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.ACESFilmicToneMapping
	renderer.outputEncoding = THREE.sRGBEncoding
	document.body.appendChild(renderer.domElement)

	orbitControls = new OrbitControls(camera, renderer.domElement)
  orbitControls.target.set(0, 1, 0)
  
  const ambientLight = new THREE.AmbientLight()
  scene.add(ambientLight)
  
  const directionalLight = new THREE.DirectionalLight()
  scene.add(directionalLight)
	
	const gltfLoader = new GLTFLoader().setMeshoptDecoder( MeshoptDecoder )
  gltfLoader.register( ( parser ) => {
    return new VRMLoaderPlugin( parser );
  } );
  
  const gltf1 = await gltfLoader.loadAsync(VRM_BEFORE)
  const gltf2 = await gltfLoader.loadAsync(VRM_AFTER)
  //currentVrm = gltf1.userData.vrm
  
 // VRMUtils.removeUnnecessaryVertices( gltf1.scene );
  //VRMUtils.removeUnnecessaryJoints( gltf1.scene );
  //VRMUtils.rotateVRM0( gltf1.scene )
	
	scene.add(gltf1.scene)
	/* scene.add(gltf2.scene) */
  
  /* gltf1.scene.position.x = -0.5 */
  /* gltf2.scene.position.x =  0.5 */

	onWindowResize()
	
	window.addEventListener('resize', onWindowResize, false)
	
}

function animate()...