mirror of
https://github.com/tengge1/ShadowEditor.git
synced 2026-01-25 15:08:11 +00:00
107 lines
4.3 KiB
HTML
107 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>01 MMDTest</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<script src="../../assets/js/three.js"></script>
|
|
<script src="../../assets/js/mmdparser.min.js"></script>
|
|
<script src="../../assets/js/ammo.js"></script>
|
|
|
|
<script src="../../assets/js/loaders/TGALoader.js"></script>
|
|
<script src="../../assets/js/loaders/MMDLoader.js"></script>
|
|
<script src="../../assets/js/effects/OutlineEffect.js"></script>
|
|
<script src="../../assets/js/animation/CCDIKSolver.js"></script>
|
|
<script src="../../assets/js/animation/MMDPhysics.js"></script>
|
|
<script src="../../assets/js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
var container;
|
|
var mesh, camera, scene, renderer, effect;
|
|
var helper;
|
|
var ready = false;
|
|
var clock = new THREE.Clock();
|
|
init();
|
|
animate();
|
|
function init() {
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
|
|
// scene
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0xffffff);
|
|
scene.add(new THREE.PolarGridHelper(30, 10));
|
|
var ambient = new THREE.AmbientLight(0x666666);
|
|
scene.add(ambient);
|
|
var directionalLight = new THREE.DirectionalLight(0x887766);
|
|
directionalLight.position.set(- 1, 1, 1).normalize();
|
|
scene.add(directionalLight);
|
|
//
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
container.appendChild(renderer.domElement);
|
|
effect = new THREE.OutlineEffect(renderer);
|
|
// model
|
|
function onProgress(xhr) {
|
|
if (xhr.lengthComputable) {
|
|
var percentComplete = xhr.loaded / xhr.total * 100;
|
|
console.log(Math.round(percentComplete, 2) + '% downloaded');
|
|
}
|
|
}
|
|
var modelFile = 'models/mmd/miku/miku_v2.pmd';
|
|
var vmdFiles = ['models/mmd/vmds/wavefile_v2.vmd'];
|
|
var cameraFiles = ['models/mmd/vmds/wavefile_camera.vmd'];
|
|
var audioFile = 'models/mmd/audios/wavefile_short.mp3';
|
|
var audioParams = { delayTime: 160 * 1 / 30 };
|
|
helper = new THREE.MMDAnimationHelper();
|
|
var loader = new THREE.MMDLoader();
|
|
loader.loadWithAnimation(modelFile, vmdFiles, function (mmd) {
|
|
mesh = mmd.mesh;
|
|
helper.add(mesh, {
|
|
animation: mmd.animation,
|
|
physics: true
|
|
});
|
|
loader.loadAnimation(cameraFiles, camera, function (cameraAnimation) {
|
|
helper.add(camera, {
|
|
animation: cameraAnimation
|
|
});
|
|
new THREE.AudioLoader().load(audioFile, function (buffer) {
|
|
var listener = new THREE.AudioListener();
|
|
var audio = new THREE.Audio(listener).setBuffer(buffer);
|
|
listener.position.z = 1;
|
|
helper.add(audio, audioParams);
|
|
scene.add(audio);
|
|
scene.add(listener);
|
|
scene.add(mesh);
|
|
ready = true;
|
|
}, onProgress, null);
|
|
}, onProgress, null);
|
|
}, onProgress, null);
|
|
//
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
}
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
effect.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
//
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
render();
|
|
}
|
|
function render() {
|
|
if (ready) {
|
|
helper.update(clock.getDelta());
|
|
}
|
|
effect.render(scene, camera);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |