<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three-vrm example</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.159.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/",
"@pixiv/three-vrm": "https://unpkg.com/@pixiv/three-vrm@2.0.7/lib/three-vrm.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x00ff00, 1.0)
document.body.appendChild(renderer.domElement);
// camera
const camera = new THREE.PerspectiveCamera(30.0, window.innerWidth / window.innerHeight, 0.1, 20.0);
camera.position.set(0.0, 1.0, -0.7);
// camera controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
controls.target.set(0.0, 1.12, 0.0);
controls.update();
// scene
const scene = new THREE.Scene();
// light
const light = new THREE.DirectionalLight(0xffffff,3);
light.position.set(1.0, 1.0, -1.0).normalize();
scene.add(light);
// gltf and vrm
let currentVrm = undefined;
const loader = new GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
loader.load(
'./vrm/tesA1_V0a.vrm',
(gltf) => {
const vrm = gltf.userData.vrm;
VRMUtils.removeUnnecessaryVertices(gltf.scene);
VRMUtils.removeUnnecessaryJoints(gltf.scene);
vrm.scene.traverse((obj) => {
obj.frustumCulled = false;
});
currentVrm = vrm;
console.log(vrm);
scene.add(vrm.scene);
},
(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
(error) => console.error(error)
);
// animate
const clock = new THREE.Clock();
clock.start();
function animate() {
requestAnimationFrame(animate);
const deltaTime = clock.getDelta();
// update vrm components
if (currentVrm) {
currentVrm.humanoid.getNormalizedBoneNode( 'rightUpperArm' ).rotation.z = -0.75;
currentVrm.humanoid.getNormalizedBoneNode( 'leftUpperArm' ).rotation.z = 0.75;
currentVrm.expressionManager.setValue('happy', 1.0);
currentVrm.expressionManager.update();
currentVrm.update( deltaTime );
}
// render
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
使用変数
| animate -------( Function ) | |
| camera | |
| charset | |
| clock | |
| content | |
| controls | |
| crossOrigin | |
| currentVrm | |
| deltaTime | |
| frustumCulled | |
| light | |
| loader | |
| name | |
| renderer | |
| scalable | |
| scale | |
| scene | |
| screenSpacePanning | |
| src | |
| type | |
| vrm | |
| width | |
| z |