ai/vrm
ai/vrm
1
0
Fork 0
Code

add progress

Browse Source
This commit is contained in:
syui 2024-03-20 16:26:17 +09:00
parent 3085921580
commit 08a5984fef
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
3 changed files with 310 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dist/css/style.css vendored
View File

@ -3,6 +3,15 @@ body {
overflow: hidden; overflow: hidden;
} }
#progressBar {
width: 500px;
height: 24px;
position: absolute;
left: 50%;
top: 10px;
margin-left: -250px;
}
div#menu { div#menu {
padding: 20px; padding: 20px;
border-bottom:solid 1px #ccc; border-bottom:solid 1px #ccc;

1
dist/index.html vendored
View File

@ -10,6 +10,7 @@
<script src="main.js"></script> <script src="main.js"></script>
</head> </head>
<body> <body>
<progress value="0" max="100" id="progressBar"></progress>
<div id="menu"> <div id="menu">
<span class="menu-top"> <span class="menu-top">
<button id='btn-ai'><a href="/"><span class="icon-ai"></span></a></button> <button id='btn-ai'><a href="/"><span class="icon-ai"></span></a></button>

586
src/index.ts
View File

@ -13,127 +13,112 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
let motion_enable = false; // vrma
let motion_enable = false;
const canvas = document.getElementById("canvas"); // progress
if (canvas == null) return; // https://sbcode.net/threejs/progress-indicator
const progressBar = document.getElementById('progressBar') as HTMLProgressElement
const scene = new THREE.Scene(); // three
const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000); const canvas = document.getElementById("canvas");
camera.position.set(0, 1, -1.5) if (canvas == null) return;
camera.rotation.set(0.0, Math.PI, 0.0) const scene = new THREE.Scene();
camera.lookAt(new THREE.Vector3(0, 0, 0)); const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000);
camera.position.set(0, 1, -1.5)
camera.rotation.set(0.0, Math.PI, 0.0)
camera.lookAt(new THREE.Vector3(0, 0, 0));
// https://threejs.org/docs/#api/en/constants/Renderer // https://threejs.org/docs/#api/en/constants/Renderer
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, canvas.clientHeight); renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setClearColor(0x7fbfff, 1.0); renderer.setClearColor(0x7fbfff, 1.0);
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ReinhardToneMapping; renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMapping = THREE.NeutralToneMapping; renderer.toneMapping = THREE.NeutralToneMapping;
canvas.appendChild(renderer.domElement); canvas.appendChild(renderer.domElement);
renderer.toneMappingExposure = 1.5; renderer.toneMappingExposure = 1.5;
//renderer.toneMapping = THREE.ACESFilmicToneMapping; //renderer.toneMapping = THREE.ACESFilmicToneMapping;
const light = new THREE.DirectionalLight(0xffffff, Math.PI); const light = new THREE.DirectionalLight(0xffffff, Math.PI);
light.position.set(1.0, 1.0, 1.0); light.position.set(1.0, 1.0, 1.0);
scene.add(light); scene.add(light);
let currentVrm: any = undefined; let currentVrm: any = undefined;
let currentVrmAnimation: any = undefined; let currentVrmAnimation: any = undefined;
let currentMixer:any = undefined; let currentMixer:any = undefined;
function load(url: string) { function load(url: string) {
loader.load( loader.load(
url, url,
(gltf) => { (gltf) => {
tryInitVRM(gltf); progressBar.style.display = 'none'
tryInitVRMA(gltf); tryInitVRM(gltf);
}, tryInitVRMA(gltf);
(progress) => console.log( },
"Loading model...", (xhr) => {
100.0 * (progress.loaded / progress.total), "%" const percentComplete = (xhr.loaded / xhr.total) * 100
), progressBar.value = percentComplete === Infinity ? 100 : percentComplete
(error) => console.error(error) },
); (progress) => console.log(
} "Loading model...",
100.0 * (progress.loaded / progress.total), "%"
),
(error) => console.error(error)
);
}
function tryInitVRM(gltf: any) { function tryInitVRM(gltf: any) {
const vrm = gltf.userData.vrm; const vrm = gltf.userData.vrm;
if ( vrm == null ) { if ( vrm == null ) {
return; return;
}
currentVrm = vrm;
scene.add(vrm.scene);
initAnimationClip();
} }
currentVrm = vrm;
scene.add(vrm.scene);
initAnimationClip();
}
function tryInitVRMA(gltf: any) { function tryInitVRMA(gltf: any) {
const vrmAnimations = gltf.userData.vrmAnimations; const vrmAnimations = gltf.userData.vrmAnimations;
if (vrmAnimations == null) { if (vrmAnimations == null) {
return; return;
}
currentVrmAnimation = vrmAnimations[0] ?? null;
initAnimationClip();
}
function initAnimationClip() {
if (currentVrm && currentVrmAnimation) {
currentMixer = new THREE.AnimationMixer(currentVrm.scene);
const clip = createVRMAnimationClip(currentVrmAnimation, currentVrm);
currentMixer.clipAction(clip).play();
}
}
const loader = new GLTFLoader();
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
loader.register((parser) => {
return new VRMAnimationLoaderPlugin(parser);
});
load("/vrma/ai.vrm");
load("/vrma/fly_c.vrma");
const clock = new THREE.Clock();
clock.start();
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.2;
controls.enableRotate = true;
controls.target.set( 0.0, 1.0, 0.0 );
function floor_default(){
scene.background = new THREE.Color( 0xffffff );
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);
let floor = new Mesh(
new BoxGeometry(50, 100),
new MeshLambertMaterial({
color: 0xffffff,
depthWrite: true,
})
);
floor.position.y = -1.0;
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
const grid = new GridHelper(50, 100, 0xffffff, 0xffffff);
scene.add(grid);
grid.position.set(Math.round(0), 0, Math.round(0));
scene.fog = new Fog(0xffffff, 3, 20);
scene.fog?.color.set(0xffffff);
} }
currentVrmAnimation = vrmAnimations[0] ?? null;
initAnimationClip();
}
function initAnimationClip() {
if (currentVrm && currentVrmAnimation) {
currentMixer = new THREE.AnimationMixer(currentVrm.scene);
const clip = createVRMAnimationClip(currentVrmAnimation, currentVrm);
currentMixer.clipAction(clip).play();
}
}
const loader = new GLTFLoader();
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
loader.register((parser) => {
return new VRMAnimationLoaderPlugin(parser);
});
load("/vrma/ai.vrm");
load("/vrma/fly_c.vrma");
const clock = new THREE.Clock();
clock.start();
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.2;
controls.enableRotate = true;
controls.target.set( 0.0, 1.0, 0.0 );
function floor_default(){
scene.background = new THREE.Color( 0xffffff ); scene.background = new THREE.Color( 0xffffff );
const directionalLight = new THREE.DirectionalLight(0xffffff); const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1); directionalLight.position.set(1, 1, 1);
@ -141,197 +126,222 @@ window.addEventListener("DOMContentLoaded", () => {
const ambientLight = new THREE.AmbientLight(0x333333); const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight); scene.add(ambientLight);
let grid = new GridHelper(500, 1000, 0xffffff, 0xffffff); let floor = new Mesh(
new BoxGeometry(50, 100),
new MeshLambertMaterial({
color: 0xffffff,
depthWrite: true,
})
);
floor.position.y = -1.0;
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
const grid = new GridHelper(50, 100, 0xffffff, 0xffffff);
scene.add(grid); scene.add(grid);
grid.position.set(Math.round(0), 0, Math.round(0)); grid.position.set(Math.round(0), 0, Math.round(0));
scene.fog = new Fog(0xffffff, 3, 20); scene.fog = new Fog(0xffffff, 3, 20);
scene.fog?.color.set(0xffffff); scene.fog?.color.set(0xffffff);
}
onResize(); scene.background = new THREE.Color( 0xffffff );
window.addEventListener('resize', onResize); const directionalLight = new THREE.DirectionalLight(0xffffff);
function onResize() { directionalLight.position.set(1, 1, 1);
const width = window.innerWidth; scene.add(directionalLight);
const height = window.innerHeight; const ambientLight = new THREE.AmbientLight(0x333333);
renderer.setPixelRatio(window.devicePixelRatio); scene.add(ambientLight);
renderer.setSize(width, height);
camera.aspect = width / height; let grid = new GridHelper(500, 1000, 0xffffff, 0xffffff);
camera.updateProjectionMatrix(); scene.add(grid);
grid.position.set(Math.round(0), 0, Math.round(0));
scene.fog = new Fog(0xffffff, 3, 20);
scene.fog?.color.set(0xffffff);
onResize();
window.addEventListener('resize', onResize);
function onResize() {
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
function animate() {
controls.update();
const delta = clock.getDelta();
if (currentMixer) {
currentMixer.update(delta);
} }
if (currentVrm) {
function animate() { currentVrm.update(delta);
controls.update();
const delta = clock.getDelta();
if (currentMixer) {
currentMixer.update(delta);
}
if (currentVrm) {
currentVrm.update(delta);
}
requestAnimationFrame(animate);
scene.rotation.y += 0.005;
renderer.render(scene, camera);
} }
animate(); requestAnimationFrame(animate);
scene.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
function random_happy() { function random_happy() {
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
currentVrm.expressionManager.setValue('relaxed', 0.5); currentVrm.expressionManager.setValue('relaxed', 0.5);
} }
function random_head() { function random_head() {
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
currentVrm.lookAt.target = camera; currentVrm.lookAt.target = camera;
currentVrm.VRMLookAtBoneApplier = camera; currentVrm.VRMLookAtBoneApplier = camera;
currentVrm.VRMLookAtExpressionApplier = camera; currentVrm.VRMLookAtExpressionApplier = camera;
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
const head = currentVrm.humanoid.getRawBoneNode("head"); const head = currentVrm.humanoid.getRawBoneNode("head");
head.target = camera; head.target = camera;
} }
function random_blink(){
setInterval(() => {
currentVrm.expressionManager.setValue('relaxed', 0);
currentVrm.expressionManager.setValue('blink', 0);
random_head();
const r = Math.floor(Math.random() * 3);
if (r == 1) {
setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);
setTimeout(() => {
currentVrm.expressionManager.setValue('blink', 0);
}, 5500);
};
setTimeout(() => {
currentVrm.expressionManager.setValue('relaxed', 0.5);
currentVrm.expressionManager.setValue('blink', 1);
}, 6000);
}, 6500);
}
random_blink();
const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null;
if(el_light != null) {
el_light.addEventListener('click', function(){
light_s();
});
}
let light_enable = true;
function light_s(){
if (light_enable == true) {
light_enable = false;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
light.intensity = -0.5;
scene.background = new THREE.Color(0x000000);
scene.fog = new Fog(0x000000, 3, 20);
} else {
light_enable = true;
renderer.toneMapping = THREE.NeutralToneMapping;
light.intensity = 1;
scene.background = new THREE.Color(0xffffff);
scene.fog = new Fog(0xffffff, 3, 20);
}
}
const el_hdr = document.querySelector('#btn-sandar') as HTMLInputElement | null;
if(el_hdr != null) {
el_hdr.addEventListener('click', function(){
hdr_s();
});
}
let hdr_r = 0;
function hdr_s() {
if (hdr_r >= 2) { hdr_r = 0; } else { hdr_r++; };
let hdr = "/img/" + hdr_r + ".hdr";
new RGBELoader().load(hdr, function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
});
}
function cool_time() {
setTimeout(() => {
motion_enable = false;
}, 5000);
}
const el_sword = document.querySelector('#btn-sword') as HTMLInputElement | null;
if(el_sword != null) {
el_sword.addEventListener('click', function(){
sword_s();
});
}
function sword_s(){
scene.remove(currentVrm.scene);
load("/vrma/ai_sword.vrm");
load("/vrma/sword.vrma");
setTimeout(() => {
load("/vrma/idle.vrma");
}, 1000);
setTimeout(() => {
load("/vrma/ai.vrm");
scene.remove(currentVrm.scene);
}, 5000);
}
const el_cloud = document.querySelector('#btn-cloud') as HTMLInputElement | null;
if(el_cloud != null) {
el_cloud.addEventListener('click', function(){
cloud_s();
});
}
function cloud_s(){
load("/vrma/sky.vrma");
setTimeout(() => {
load("/vrma/jump.vrma");
}, 5000);
setTimeout(() => {
load("/vrma/idle.vrma");
}, 5500);
}
let mouse_ivent_timer_id;
const el_run = document.querySelector('#btn-run') as HTMLInputElement | null;
if(el_run != null) {
el_run.addEventListener('mousedown', function(){
mouse_ivent_timer_id = setTimeout(function () {
motion_enable = true;
}, 1000);
load("/vrma/run.vrma");
});
}
document.querySelector('#btn-run').addEventListener('mouseup', (event) => {
clearTimeout(mouse_ivent_timer_id);
load("/vrma/idle.vrma");
cool_time();
});
const el_jump = document.querySelector('#btn-jump') as HTMLInputElement | null;
if(el_jump != null) {
el_jump.addEventListener('mousedown', function(){
jump_s();
});
}
function jump_s(){
motion_enable = true;
load("/vrma/jump.vrma");
setTimeout(() => {
load("/vrma/idle.vrma");
}, 500);
cool_time();
}
function random_blink(){
setInterval(() => { setInterval(() => {
const r = Math.floor(Math.random() * 4 + 1); currentVrm.expressionManager.setValue('relaxed', 0);
if (motion_enable == false) { load("/vrma/" + r + ".vrma"); } currentVrm.expressionManager.setValue('blink', 0);
random_head();
const r = Math.floor(Math.random() * 3);
if (r == 1) {
setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);
setTimeout(() => {
currentVrm.expressionManager.setValue('blink', 0);
}, 5500);
};
setTimeout(() => { setTimeout(() => {
if (motion_enable == false) { load("/vrma/fly_c.vrma"); } currentVrm.expressionManager.setValue('relaxed', 0.5);
}, 10000); currentVrm.expressionManager.setValue('blink', 1);
}, 15000); }, 6000);
}, 6500);
}
random_blink();
const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null;
if(el_light != null) {
el_light.addEventListener('click', function(){
light_s();
});
}
let light_enable = true;
function light_s(){
if (light_enable == true) {
light_enable = false;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
light.intensity = -0.5;
scene.background = new THREE.Color(0x000000);
scene.fog = new Fog(0x000000, 3, 20);
} else {
light_enable = true;
renderer.toneMapping = THREE.NeutralToneMapping;
light.intensity = 1;
scene.background = new THREE.Color(0xffffff);
scene.fog = new Fog(0xffffff, 3, 20);
}
}
const el_hdr = document.querySelector('#btn-sandar') as HTMLInputElement | null;
if(el_hdr != null) {
el_hdr.addEventListener('click', function(){
hdr_s();
});
}
let hdr_r = 0;
function hdr_s() {
if (hdr_r >= 2) { hdr_r = 0; } else { hdr_r++; };
let hdr = "/img/" + hdr_r + ".hdr";
new RGBELoader().load(hdr, function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
});
}
function cool_time() {
setTimeout(() => {
motion_enable = false;
}, 5000);
}
const el_sword = document.querySelector('#btn-sword') as HTMLInputElement | null;
if(el_sword != null) {
el_sword.addEventListener('click', function(){
sword_s();
});
}
function sword_s(){
scene.remove(currentVrm.scene);
load("/vrma/ai_sword.vrm");
load("/vrma/sword.vrma");
setTimeout(() => {
load("/vrma/idle.vrma");
}, 1000);
setTimeout(() => {
load("/vrma/ai.vrm");
scene.remove(currentVrm.scene);
}, 5000);
}
const el_cloud = document.querySelector('#btn-cloud') as HTMLInputElement | null;
if(el_cloud != null) {
el_cloud.addEventListener('click', function(){
cloud_s();
});
}
function cloud_s(){
load("/vrma/sky.vrma");
setTimeout(() => {
load("/vrma/jump.vrma");
}, 5000);
setTimeout(() => {
load("/vrma/idle.vrma");
}, 5500);
}
let mouse_ivent_timer_id;
const el_run = document.querySelector('#btn-run') as HTMLInputElement | null;
if(el_run != null) {
el_run.addEventListener('mousedown', function(){
mouse_ivent_timer_id = setTimeout(function () {
motion_enable = true;
}, 1000);
load("/vrma/run.vrma");
});
}
document.querySelector('#btn-run').addEventListener('mouseup', (event) => {
clearTimeout(mouse_ivent_timer_id);
load("/vrma/idle.vrma");
cool_time();
});
const el_jump = document.querySelector('#btn-jump') as HTMLInputElement | null;
if(el_jump != null) {
el_jump.addEventListener('mousedown', function(){
jump_s();
});
}
function jump_s(){
motion_enable = true;
load("/vrma/jump.vrma");
setTimeout(() => {
load("/vrma/idle.vrma");
}, 500);
cool_time();
}
setInterval(() => {
const r = Math.floor(Math.random() * 4 + 1);
if (motion_enable == false) { load("/vrma/" + r + ".vrma"); }
setTimeout(() => {
if (motion_enable == false) { load("/vrma/fly_c.vrma"); }
}, 10000);
}, 15000);
}) })