add progress
This commit is contained in:
9
dist/css/style.css
vendored
9
dist/css/style.css
vendored
@@ -3,6 +3,15 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#progressBar {
|
||||
width: 500px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
margin-left: -250px;
|
||||
}
|
||||
|
||||
div#menu {
|
||||
padding: 20px;
|
||||
border-bottom:solid 1px #ccc;
|
||||
|
||||
1
dist/index.html
vendored
1
dist/index.html
vendored
@@ -10,6 +10,7 @@
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<progress value="0" max="100" id="progressBar"></progress>
|
||||
<div id="menu">
|
||||
<span class="menu-top">
|
||||
<button id='btn-ai'><a href="/"><span class="icon-ai"></span></a></button>
|
||||
|
||||
586
src/index.ts
586
src/index.ts
@@ -13,127 +13,112 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
let motion_enable = false;
|
||||
// vrma
|
||||
let motion_enable = false;
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (canvas == null) return;
|
||||
// progress
|
||||
// https://sbcode.net/threejs/progress-indicator
|
||||
const progressBar = document.getElementById('progressBar') as HTMLProgressElement
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
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));
|
||||
// three
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (canvas == null) return;
|
||||
const scene = new THREE.Scene();
|
||||
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
|
||||
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
|
||||
renderer.setClearColor(0x7fbfff, 1.0);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
renderer.toneMapping = THREE.NeutralToneMapping;
|
||||
canvas.appendChild(renderer.domElement);
|
||||
renderer.toneMappingExposure = 1.5;
|
||||
// https://threejs.org/docs/#api/en/constants/Renderer
|
||||
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
|
||||
renderer.setClearColor(0x7fbfff, 1.0);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
renderer.toneMapping = THREE.NeutralToneMapping;
|
||||
canvas.appendChild(renderer.domElement);
|
||||
renderer.toneMappingExposure = 1.5;
|
||||
|
||||
//renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
//renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
|
||||
const light = new THREE.DirectionalLight(0xffffff, Math.PI);
|
||||
light.position.set(1.0, 1.0, 1.0);
|
||||
scene.add(light);
|
||||
const light = new THREE.DirectionalLight(0xffffff, Math.PI);
|
||||
light.position.set(1.0, 1.0, 1.0);
|
||||
scene.add(light);
|
||||
|
||||
let currentVrm: any = undefined;
|
||||
let currentVrmAnimation: any = undefined;
|
||||
let currentMixer:any = undefined;
|
||||
let currentVrm: any = undefined;
|
||||
let currentVrmAnimation: any = undefined;
|
||||
let currentMixer:any = undefined;
|
||||
|
||||
function load(url: string) {
|
||||
loader.load(
|
||||
url,
|
||||
(gltf) => {
|
||||
tryInitVRM(gltf);
|
||||
tryInitVRMA(gltf);
|
||||
},
|
||||
(progress) => console.log(
|
||||
"Loading model...",
|
||||
100.0 * (progress.loaded / progress.total), "%"
|
||||
),
|
||||
(error) => console.error(error)
|
||||
);
|
||||
}
|
||||
function load(url: string) {
|
||||
loader.load(
|
||||
url,
|
||||
(gltf) => {
|
||||
progressBar.style.display = 'none'
|
||||
tryInitVRM(gltf);
|
||||
tryInitVRMA(gltf);
|
||||
},
|
||||
(xhr) => {
|
||||
const percentComplete = (xhr.loaded / xhr.total) * 100
|
||||
progressBar.value = percentComplete === Infinity ? 100 : percentComplete
|
||||
},
|
||||
(progress) => console.log(
|
||||
"Loading model...",
|
||||
100.0 * (progress.loaded / progress.total), "%"
|
||||
),
|
||||
(error) => console.error(error)
|
||||
);
|
||||
}
|
||||
|
||||
function tryInitVRM(gltf: any) {
|
||||
const vrm = gltf.userData.vrm;
|
||||
if ( vrm == null ) {
|
||||
return;
|
||||
}
|
||||
currentVrm = vrm;
|
||||
scene.add(vrm.scene);
|
||||
initAnimationClip();
|
||||
function tryInitVRM(gltf: any) {
|
||||
const vrm = gltf.userData.vrm;
|
||||
if ( vrm == null ) {
|
||||
return;
|
||||
}
|
||||
currentVrm = vrm;
|
||||
scene.add(vrm.scene);
|
||||
initAnimationClip();
|
||||
}
|
||||
|
||||
function tryInitVRMA(gltf: any) {
|
||||
const vrmAnimations = gltf.userData.vrmAnimations;
|
||||
if (vrmAnimations == null) {
|
||||
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);
|
||||
function tryInitVRMA(gltf: any) {
|
||||
const vrmAnimations = gltf.userData.vrmAnimations;
|
||||
if (vrmAnimations == null) {
|
||||
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);
|
||||
@@ -141,197 +126,222 @@ window.addEventListener("DOMContentLoaded", () => {
|
||||
const ambientLight = new THREE.AmbientLight(0x333333);
|
||||
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);
|
||||
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();
|
||||
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 grid = new GridHelper(500, 1000, 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);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
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);
|
||||
if (currentVrm) {
|
||||
currentVrm.update(delta);
|
||||
}
|
||||
animate();
|
||||
requestAnimationFrame(animate);
|
||||
scene.rotation.y += 0.005;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
animate();
|
||||
|
||||
function random_happy() {
|
||||
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
|
||||
currentVrm.expressionManager.setValue('relaxed', 0.5);
|
||||
}
|
||||
function random_happy() {
|
||||
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
|
||||
currentVrm.expressionManager.setValue('relaxed', 0.5);
|
||||
}
|
||||
|
||||
function random_head() {
|
||||
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
|
||||
currentVrm.lookAt.target = camera;
|
||||
currentVrm.VRMLookAtBoneApplier = camera;
|
||||
currentVrm.VRMLookAtExpressionApplier = camera;
|
||||
function random_head() {
|
||||
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
|
||||
currentVrm.lookAt.target = camera;
|
||||
currentVrm.VRMLookAtBoneApplier = camera;
|
||||
currentVrm.VRMLookAtExpressionApplier = camera;
|
||||
|
||||
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
|
||||
const head = currentVrm.humanoid.getRawBoneNode("head");
|
||||
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();
|
||||
}
|
||||
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
|
||||
const head = currentVrm.humanoid.getRawBoneNode("head");
|
||||
head.target = camera;
|
||||
}
|
||||
|
||||
function random_blink(){
|
||||
setInterval(() => {
|
||||
const r = Math.floor(Math.random() * 4 + 1);
|
||||
if (motion_enable == false) { load("/vrma/" + r + ".vrma"); }
|
||||
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(() => {
|
||||
if (motion_enable == false) { load("/vrma/fly_c.vrma"); }
|
||||
}, 10000);
|
||||
}, 15000);
|
||||
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();
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user