MMD懒加载。

This commit is contained in:
liteng 2018-12-23 08:25:21 +08:00
parent 7418b672df
commit 2ae32d0ad8
5 changed files with 88 additions and 64 deletions

View File

@ -26,7 +26,6 @@
<!-- libs -->
<script src="assets/js/libs/stats.min.js"></script>
<script src="assets/js/libs/mmdparser.min.js"></script>
<script src="assets/js/libs/ammo.js"></script>
<script src="assets/js/libs/jszip.min.js"></script>
<script src="assets/js/libs/inflate.min.js"></script>
@ -67,18 +66,12 @@
<!-- loaders -->
<script src="assets/js/loaders/TGALoader.js"></script>
<script src="assets/js/loaders/MMDLoader.js"></script>
<!-- objects -->
<script src="assets/js/objects/Sky.js"></script>
<script src="assets/js/objects/Reflector.js"></script>
<script src="assets/js/objects/Lensflare.js"></script>
<!-- animation -->
<script src="assets/js/animation/CCDIKSolver.js"></script>
<script src="assets/js/animation/MMDPhysics.js"></script>
<script src="assets/js/animation/MMDAnimationHelper.js"></script>
<!-- Shadow Editor -->
<script src="dist/ShadowEditor.js"></script>
<script>

View File

@ -1,46 +1,48 @@
import BaseLoader from './BaseLoader';
/**
* PMDLoader
* MMDLoader
* @author tengge / https://github.com/tengge1
*/
function PMDLoader() {
function MMDLoader() {
BaseLoader.call(this);
}
PMDLoader.prototype = Object.create(BaseLoader.prototype);
PMDLoader.prototype.constructor = PMDLoader;
MMDLoader.prototype = Object.create(BaseLoader.prototype);
MMDLoader.prototype.constructor = MMDLoader;
PMDLoader.prototype.load = function (url, options, environment) {
MMDLoader.prototype.load = function (url, options, environment) {
return new Promise(resolve => {
var loader = new THREE.MMDLoader();
this.require('MMD').then(() => {
var loader = new THREE.MMDLoader();
var promise1 = options.Animation && options.Animation.Url ?
this.loadWithAnimation(url, options, environment, loader) :
this.loadModel(url, options, environment, loader);
var promise2 = this.loadCameraAnimation(url, options, environment, loader);
var promise3 = this.loadAudio(url, options, environment, loader);
var promise1 = options.Animation && options.Animation.Url ?
this.loadWithAnimation(url, options, environment, loader) :
this.loadModel(url, options, environment, loader);
var promise2 = this.loadCameraAnimation(url, options, environment, loader);
var promise3 = this.loadAudio(url, options, environment, loader);
Promise.all([promise1, promise2, promise3]).then(obj => {
var mesh = obj[0].mesh;
var animation = obj[0].animation;
var cameraAnimation = obj[1];
var audio = obj[2];
Promise.all([promise1, promise2, promise3]).then(obj => {
var mesh = obj[0].mesh;
var animation = obj[0].animation;
var cameraAnimation = obj[1];
var audio = obj[2];
Object.assign(mesh.userData, {
obj: {
animation: animation,
cameraAnimation: cameraAnimation,
audio: audio
}
Object.assign(mesh.userData, {
obj: {
animation: animation,
cameraAnimation: cameraAnimation,
audio: audio
}
});
resolve(mesh);
});
resolve(mesh);
});
});
};
PMDLoader.prototype.loadModel = function (url, options, environment, loader) {
MMDLoader.prototype.loadModel = function (url, options, environment, loader) {
return new Promise(resolve => {
loader.load(url, mesh => {
resolve({
@ -54,7 +56,7 @@ PMDLoader.prototype.loadModel = function (url, options, environment, loader) {
});
};
PMDLoader.prototype.loadWithAnimation = function (url, options, environment, loader) {
MMDLoader.prototype.loadWithAnimation = function (url, options, environment, loader) {
if (!options.Animation || !options.Animation.Url) {
return new Promise(resolve => {
resolve(null);
@ -70,7 +72,7 @@ PMDLoader.prototype.loadWithAnimation = function (url, options, environment, loa
});
};
PMDLoader.prototype.loadCameraAnimation = function (url, options, environment, loader) {
MMDLoader.prototype.loadCameraAnimation = function (url, options, environment, loader) {
if (!options.CameraAnimation || !options.CameraAnimation.Url) {
return new Promise(resolve => {
resolve(null);
@ -86,7 +88,7 @@ PMDLoader.prototype.loadCameraAnimation = function (url, options, environment, l
});
};
PMDLoader.prototype.loadAudio = function (url, options, environment, loader) {
MMDLoader.prototype.loadAudio = function (url, options, environment, loader) {
if (!options.Audio || !options.Audio.Url) {
return new Promise(resolve => {
resolve(null);
@ -104,4 +106,4 @@ PMDLoader.prototype.loadAudio = function (url, options, environment, loader) {
});
};
export default PMDLoader;
export default MMDLoader;

View File

@ -15,7 +15,7 @@ import PLYLoader from './PLYLoader';
import STLLoader from './STLLoader';
import VTKLoader from './VTKLoader';
import LOLLoader from './LOLLoader';
import PMDLoader from './PMDLoader';
import MMDLoader from './MMDLoader';
import JsLoader from './JsLoader';
import _3DSLoader from './_3DSLoader';
import _3MFLoader from './_3MFLoader';
@ -54,8 +54,8 @@ const Loaders = {
'stl': STLLoader,
'vtk': VTKLoader,
'lol': LOLLoader,
'pmd': PMDLoader,
'pmx': PMDLoader,
'pmd': MMDLoader,
'pmx': MMDLoader,
'js': JsLoader,
'drc': DRACOLoader,
'gcode': GCodeLoader,

View File

@ -242,6 +242,15 @@ const PackageList = [{
assets: [
'assets/js/exporters/STLExporter.js'
]
}, {
name: 'MMD',
assets: [
'assets/js/libs/mmdparser.min.js',
'assets/js/loaders/MMDLoader.js',
'assets/js/animation/CCDIKSolver.js',
'assets/js/animation/MMDPhysics.js',
'assets/js/animation/MMDAnimationHelper.js'
]
}];
export default PackageList

View File

@ -6,52 +6,72 @@ import PlayerComponent from '../component/PlayerComponent';
*/
function MMDAnimator(app) {
PlayerComponent.call(this, app);
this.helper = new THREE.MMDAnimationHelper();
}
MMDAnimator.prototype = Object.create(PlayerComponent.prototype);
MMDAnimator.prototype.constructor = MMDAnimator;
MMDAnimator.prototype.create = function (scene, camera, renderer, animations) {
var helper = this.helper;
var mmds = [];
scene.traverse(mesh => {
if (mesh.userData.Type === 'pmd' || mesh.userData.Type === 'pmx') {
let { animation, cameraAnimation, audio } = mesh.userData.obj;
mmds.push(mesh);
}
});
if (animation) {
helper.add(mesh, {
animation: animation,
physics: true
});
} else {
helper.add(mesh, {
physics: true
});
}
if (mmds.length === 0) {
return;
}
if (cameraAnimation) {
helper.add(camera, {
animation: cameraAnimation
});
}
if (this.helper === undefined) {
this.helper = new THREE.MMDAnimationHelper();
}
if (audio) {
var audioParams = {
delayTime: 160 * 1 / 30
};
helper.add(audio, audioParams);
}
var helper = this.helper;
mmds.forEach(mesh => {
let { animation, cameraAnimation, audio } = mesh.userData.obj;
if (animation) {
helper.add(mesh, {
animation: animation,
physics: true
});
} else {
helper.add(mesh, {
physics: true
});
}
if (cameraAnimation) {
helper.add(camera, {
animation: cameraAnimation
});
}
if (audio) {
var audioParams = {
delayTime: 160 * 1 / 30
};
helper.add(audio, audioParams);
}
});
};
MMDAnimator.prototype.update = function (clock, deltaTime) {
if (!this.helper) {
return;
}
this.helper.update(deltaTime);
};
MMDAnimator.prototype.dispose = function () {
if (!this.helper) {
return;
}
var helper = this.helper;
helper.meshes.forEach(n => {