vrm-test
tesA1_V0.vrm
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>VRM Sample in WebXR</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { margin: 0; overflow: hidden; background: black; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.157.0/examples/jsm/controls/OrbitControls.js';
import { VRButton } from 'https://cdn.jsdelivr.net/npm/three@0.157.0/examples/jsm/webxr/VRButton.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.157.0/examples/jsm/loaders/GLTFLoader.js';
import { VRM, VRMUtils } from 'https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@2.0.3/lib/three-vrm.module.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 1.4, 2);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);
document.body.appendChild(VRButton.createButton(renderer));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 2, 2);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const controls = new OrbitControls(camera, renderer.domElement);
const loader = new GLTFLoader();
loader.load(
'https://cdn.jsdelivr.net/gh/vrm-c/vrm-examples@master/public/models/VRM1/01.vrm',
(gltf) => {
VRMUtils.removeUnnecessaryJoints(gltf.scene);
VRM.from(gltf).then((vrm) => {
vrm.scene.position.set(0, 0, 0); // 視界内に配置
vrm.scene.scale.set(1, 1, 1); // 必要ならスケール調整
scene.add(vrm.scene);
});
},
(xhr) => console.log((xhr.loaded / xhr.total * 100).toFixed(2) + '% loaded'),
(error) => console.error('読み込みエラー:', error)
);
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>