<script type="module">
import * as THREE from 'https://unpkg.com/three@0.165.0/build/three.module.js';
import { VRButton } from 'https://unpkg.com/three@0.165.0/examples/jsm/webxr/VRButton.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.165.0/examples/jsm/loaders/GLTFLoader.js';
import { VRMLoaderPlugin, VRMUtils } from 'https://unpkg.com/@pixiv/three-vrm@3.4.1/lib/three-vrm.module.js';
let scene, camera, renderer;
let currentVrm = null;
const clock = new THREE.Clock();
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 1.5, 3);
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, 1, 1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const loader = new GLTFLoader();
loader.register((parser) => new VRMLoaderPlugin(parser));
loader.load(
'https://unpkg.com/@pixiv/three-vrm-example@latest/models/three-vrm-girl.vrm',
(gltf) => {
const vrm = gltf.userData.vrm;
currentVrm = vrm;
scene.add(vrm.scene);
vrm.scene.position.set(0, 0, -1);
vrm.scene.rotation.set(0, Math.PI, 0);
VRMUtils.rotateVRM0(vrm);
console.log('VRM loaded:', vrm);
},
(progress) => console.log('Loading VRM...', 100.0 * (progress.loaded / progress.total), '%'),
(error) => console.error('Error loading VRM', error)
);
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
function animate() {
renderer.setAnimationLoop(() => {
const delta = clock.getDelta();
if (currentVrm) currentVrm.update(delta);
renderer.render(scene, camera);
});
}
</script>
使用変数
| animate -------( Function ) | |
| aspect | |
| background | |
| camera | |
| clock | |
| currentVrm | |
| delta | |
| enabled | |
| init -------( Function ) | |
| light | |
| loader | |
| renderer | |
| scene | |
| type | |
| vrm |