-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path0loader.html
120 lines (118 loc) · 3.94 KB
/
0loader.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<!--<div class="pose"><input type="button" value="pose2" onclick="PoseClickEvent(this.value)"></div>-->
<script src="./libs/three.js"></script>
<!--<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r106/examples/js/libs/mmdparser.min.js"></script>-->
<script src="./libs/mmdparser-obsolete.min.js"></script>
<script src="./libs/ammo.min.js"></script>
<script src="./libs/TGALoader.js"></script>
<script src="./libs/MMDLoader.js"></script>
<script src="./libs/MMDAnimationHelper.js"></script>
<script src="./libs/CCDIKSolver.js"></script>
<script src="./libs/MMDPhysics.js"></script>
<script>
let scene, renderer, camera, mesh, helper;
let ready = false;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const clock = new THREE.Clock();
const urlParams = new URLSearchParams(window.location.search);
const modelPath = urlParams.get('pmx') || './pmx/pronama/AoiZaizen/AoiZaizen.pmx'; // Default model path
const vmdPath = urlParams.get('vmd') || 'bts-bestofme'; // Default VMD path (without extension)
window.onload = () => {
Init();
LoadModeler();
Render();
}
Init = () => {
scene = new THREE.Scene();
const ambient = new THREE.AmbientLight(0xeeeeee);
scene.add(ambient);
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xcccccc, 0);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(40, windowWidth / windowHeight, 1, 1000);
camera.position.set(0, 19, 50);
}
LoadModeler = async () => {
const loader = new THREE.MMDLoader();
LoadPMX = () => {
return new Promise(resolve => {
loader.load(modelPath, (object) => {
mesh = object;
scene.add(mesh);
resolve(true);
}, onProgress, onError);
});
}
LoadVMD = (vmd) => {
return new Promise(resolve => {
const path = `./vmd/${vmd}.vmd`; // Correct VMD path format
loader.loadAnimation(path, mesh, (vmdClip) => {
vmdClip.name = vmd;
VmdControl(vmd, vmdClip);
resolve(true);
}, onProgress, onError);
});
}
await LoadPMX();
await LoadVMD(vmdPath);
}
VmdControl = (id, vmdClip, loop = true) => {
ready = false;
helper = new THREE.MMDAnimationHelper({ afterglow: 2.0, resetPhysicsOnLoop: true });
helper.add(mesh, {
animation: vmdClip,
physics: false
});
if (vmdClip) {
const mixer = helper.objects.get(mesh).mixer;
if (!loop) {
mixer.existingAction(vmdClip).setLoop(THREE.LoopOnce);
}
mixer.addEventListener("loop", () => {
console.log("loop");
});
mixer.addEventListener("finished", () => {
console.log("finished");
VmdControl(id, vmdClip, true);
});
}
ready = true;
}
onProgress = (xhr) => {
if (xhr.lengthComputable) {
const percentComplete = (xhr.loaded / xhr.total) * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
}
onError = (xhr) => {
console.log("ERROR");
}
Render = () => {
requestAnimationFrame(Render);
renderer.clear();
renderer.render(scene, camera);
if (ready) {
helper.update(clock.getDelta());
}
}
PoseClickEvent = (id) => {
switch (id) {
case "pose2":
VmdControl("bts-bestofme", null, false);
break;
default:
VmdControl("loop", null, true);
break;
}
}
</script>
</body>