|
|
@@ -1,10 +1,10 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
+<html lang='en'>
|
|
|
|
|
|
<head>
|
|
|
<title>three.js webgl - loaders - X-File loader</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
+ <meta charset='utf-8'>
|
|
|
+ <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
|
|
|
|
|
|
<style>
|
|
|
body {
|
|
|
@@ -21,7 +21,7 @@
|
|
|
top: 10px;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
- z-index: 100;
|
|
|
+ z-index: -1;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
@@ -37,33 +37,22 @@
|
|
|
|
|
|
<body>
|
|
|
|
|
|
- <div id="canvase3d"></div>
|
|
|
-
|
|
|
- <div id="info">
|
|
|
- <a href="http://threejs.org" target="_blank">three.js</a> - X-File Loader test<br />
|
|
|
- </div>
|
|
|
- <div id="dialog_tree" style="width:90%; height:90%;display:block;">
|
|
|
- <ul id="bonetree" class="treeview"></ul>
|
|
|
+ <div id='info'>
|
|
|
+ <a href='http://threejs.org' target='_blank'>three.js</a> - X-File Loader test<br />
|
|
|
</div>
|
|
|
|
|
|
+ <script src='../build/three.js'></script>
|
|
|
+ <script src='js/controls/OrbitControls.js'></script>
|
|
|
|
|
|
- <script src="../build/three.js"></script>
|
|
|
- <script src="js/controls/OrbitControls.js"></script>
|
|
|
+ <script src='js/loaders/XfileLoader.js'></script>
|
|
|
|
|
|
- <script src="js/loaders/XfileLoader.js"></script>
|
|
|
-
|
|
|
- <script src="js/Detector.js"></script>
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
+ <script src='js/Detector.js'></script>
|
|
|
+ <script src='js/libs/stats.min.js'></script>
|
|
|
<script src='js/libs/dat.gui.min.js'></script>
|
|
|
<script>
|
|
|
- var StringBuffer = function (string) {
|
|
|
- this.buffer = [];
|
|
|
- this.append = function (string) { this.buffer.push(string); return this; };
|
|
|
- this.toString = function () { return this.buffer.join(''); };
|
|
|
- if (string) { this.append(string); }
|
|
|
- };
|
|
|
|
|
|
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
var container, stats, controls;
|
|
|
var camera, scene, renderer;
|
|
|
var clock = new THREE.Clock();
|
|
|
@@ -71,20 +60,13 @@
|
|
|
var mixers = [];
|
|
|
var manager = null;
|
|
|
var Texloader = null;
|
|
|
-
|
|
|
var ParentList = null;
|
|
|
-
|
|
|
var skeletonHelper = null;
|
|
|
-
|
|
|
- var Models = new Array();
|
|
|
-
|
|
|
+ var Models = [];
|
|
|
var animateInf = null;
|
|
|
-
|
|
|
var DashAnime = null;
|
|
|
-
|
|
|
var d = new Date();
|
|
|
var LastDateTime = null;
|
|
|
-
|
|
|
var animates = [];
|
|
|
var actions = [];
|
|
|
init();
|
|
|
@@ -92,9 +74,9 @@
|
|
|
function init() {
|
|
|
|
|
|
LastDateTime = Date.now();
|
|
|
-
|
|
|
- container = document.createElement('canvase3d');
|
|
|
+ container = document.createElement('div');
|
|
|
document.body.appendChild(container);
|
|
|
+ container.style.zIndex = -10;
|
|
|
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
|
|
|
scene = new THREE.Scene();
|
|
|
scene.add(new THREE.AmbientLight(0x999999));
|
|
|
@@ -108,15 +90,26 @@
|
|
|
// model
|
|
|
manager = new THREE.LoadingManager();
|
|
|
manager.onProgress = function (item, loaded, total) {
|
|
|
+
|
|
|
console.log(item, loaded, total);
|
|
|
+
|
|
|
};
|
|
|
+
|
|
|
var onProgress = function (xhr) {
|
|
|
+
|
|
|
if (xhr.lengthComputable) {
|
|
|
+
|
|
|
var percentComplete = xhr.loaded / xhr.total * 100;
|
|
|
console.log(Math.round(percentComplete, 2) + '% downloaded');
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
};
|
|
|
+
|
|
|
var onError = function (xhr) {
|
|
|
+
|
|
|
+ console.log('Errror Loading!');
|
|
|
+
|
|
|
};
|
|
|
|
|
|
Texloader = new THREE.TextureLoader();
|
|
|
@@ -127,15 +120,19 @@
|
|
|
|
|
|
// read (download) model file
|
|
|
loader.load(['models/xfile/SSR06_Born2.x', true, true], function (object) {
|
|
|
+
|
|
|
for (var i = 0; i < object.FrameInfo.length; i++) {
|
|
|
+
|
|
|
Models.push(object.FrameInfo[i]);
|
|
|
scene.add(Models[i]);
|
|
|
|
|
|
if (Models[i] instanceof THREE.SkinnedMesh) {
|
|
|
+
|
|
|
skeletonHelper = new THREE.SkeletonHelper(Models[i]);
|
|
|
scene.add(skeletonHelper);
|
|
|
|
|
|
if (object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0) {
|
|
|
+
|
|
|
Models[i].geometry.animations = [];
|
|
|
|
|
|
/*
|
|
|
@@ -155,6 +152,7 @@
|
|
|
|
|
|
// ↓ that is a code for [ All animation-keyframes are connected data ]. output from 'LightWave3D'
|
|
|
{
|
|
|
+
|
|
|
Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'stand', 10 * object.XAnimationObj[0].fps, 11 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
|
|
|
Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'walk', 50 * object.XAnimationObj[0].fps, 80 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
|
|
|
Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dash', 140 * object.XAnimationObj[0].fps, 160 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
|
|
|
@@ -191,17 +189,19 @@
|
|
|
|
|
|
var ActionKeys = Object.keys(actions);
|
|
|
var dmy = {};
|
|
|
- dmy.gui = "";
|
|
|
- dmy.action = "";
|
|
|
- gui.add(dmy, 'gui');
|
|
|
+ dmy.gui = '';
|
|
|
+ dmy.action = '';
|
|
|
gui.add(dmy, 'action', ActionKeys).onChange(function (v) {
|
|
|
animates[0].stopAllAction();
|
|
|
actions[v].play();
|
|
|
});
|
|
|
+
|
|
|
}
|
|
|
///////////
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
object = null;
|
|
|
@@ -232,10 +232,13 @@
|
|
|
animate();
|
|
|
|
|
|
}
|
|
|
+
|
|
|
function onWindowResize() {
|
|
|
+
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
camera.updateProjectionMatrix();
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+
|
|
|
}
|
|
|
//
|
|
|
function animate() {
|
|
|
@@ -246,59 +249,82 @@
|
|
|
LastDateTime = nowTime;
|
|
|
|
|
|
if (animates != null && animates.length > 0) {
|
|
|
+
|
|
|
for (var i = 0; i < animates.length; i++) {
|
|
|
+
|
|
|
animates[i].update(dulTime);
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- if (Models != null && Models.length > 0) {
|
|
|
- if (skeletonHelper != null) { skeletonHelper.update(); }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
+ if (Models != null && Models.length > 0 && skeletonHelper != null) { skeletonHelper.update(); }
|
|
|
+
|
|
|
stats.update();
|
|
|
render();
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
function render() {
|
|
|
- //renderer.setFaceCulling(THREE.CullFaceFront, THREE.FrontFaceDirectionCW);
|
|
|
+
|
|
|
renderer.render(scene, camera);
|
|
|
+
|
|
|
}
|
|
|
|
|
|
/////////////////
|
|
|
/// this is not must mount codes.
|
|
|
-
|
|
|
// split One and Long Animation, for time
|
|
|
function splitAnimation(_baseAnime, _name, _beginTime, _endTime) {
|
|
|
+
|
|
|
var Animation = {};
|
|
|
Animation.fps = _baseAnime.fps;
|
|
|
Animation.name = _name;
|
|
|
Animation.length = _endTime - _beginTime;
|
|
|
Animation.hierarchy = [];
|
|
|
+
|
|
|
for (var i = 0; i < _baseAnime.hierarchy.length; i++) {
|
|
|
+
|
|
|
var firstKey = -1;
|
|
|
var lastKey = -1;
|
|
|
var frame = {};
|
|
|
frame.name = _baseAnime.hierarchy[i].name;
|
|
|
frame.parent = _baseAnime.hierarchy[i].parent;
|
|
|
frame.keys = [];
|
|
|
+
|
|
|
for (var m = 1; m < _baseAnime.hierarchy[i].keys.length; m++) {
|
|
|
+
|
|
|
if (_baseAnime.hierarchy[i].keys[m].time > _beginTime) {
|
|
|
+
|
|
|
if (firstKey === -1) {
|
|
|
+
|
|
|
firstKey = m - 1;
|
|
|
frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
frame.keys.push(_baseAnime.hierarchy[i].keys[m]);
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
if (_endTime <= _baseAnime.hierarchy[i].keys[m].time || m >= _baseAnime.hierarchy[i].keys.length - 1) {
|
|
|
+
|
|
|
break;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
for (var m = 0; m < frame.keys.length; m++) {
|
|
|
+
|
|
|
frame.keys[m].time -= _beginTime;
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
Animation.hierarchy.push(frame);
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
return Animation;
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
adrs2002