|
|
@@ -4,40 +4,31 @@
|
|
|
<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'>
|
|
|
-
|
|
|
<style>
|
|
|
- body {
|
|
|
- font-family: Monospace;
|
|
|
- background-color: #000;
|
|
|
- color: #fff;
|
|
|
- margin: 0px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- #info {
|
|
|
- color: #fff;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- z-index: -1;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- #info a,
|
|
|
- .button {
|
|
|
- color: #f00;
|
|
|
- font-weight: bold;
|
|
|
- text-decoration: underline;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ body {
|
|
|
+ color: #ffffff;
|
|
|
+ font-family:Monospace;
|
|
|
+ font-size:13px;
|
|
|
+ text-align:center;
|
|
|
+ background-color: #000000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ #info {
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #ff0000
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
- <div id='info'>
|
|
|
- <a href='http://threejs.org' target='_blank'>three.js</a> - X-File Loader test<br />
|
|
|
- </div>
|
|
|
+ <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - X-File Loader</div>
|
|
|
+ <div id="container"></div>
|
|
|
|
|
|
<script src='../build/three.js'></script>
|
|
|
<script src='js/controls/OrbitControls.js'></script>
|
|
|
@@ -49,286 +40,233 @@
|
|
|
<script src='js/libs/dat.gui.min.js'></script>
|
|
|
<script>
|
|
|
|
|
|
- if (!Detector.webgl) Detector.addGetWebGLMessage();
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
|
- var container, stats, controls;
|
|
|
- var camera, scene, renderer;
|
|
|
- var clock = new THREE.Clock();
|
|
|
- var gui = new dat.GUI();
|
|
|
- var mixers = [];
|
|
|
- var manager = null;
|
|
|
- var Texloader = null;
|
|
|
- var ParentList = null;
|
|
|
- var skeletonHelper = null;
|
|
|
- var Models = [];
|
|
|
- var animateInf = null;
|
|
|
- var DashAnime = null;
|
|
|
- var d = new Date();
|
|
|
- var LastDateTime = null;
|
|
|
- var animates = [];
|
|
|
- var actions = [];
|
|
|
- init();
|
|
|
+ var stats;
|
|
|
+ var camera, scene, renderer;
|
|
|
+ var clock = new THREE.Clock();
|
|
|
+ var gui = new dat.GUI();
|
|
|
+ var mixers = [];
|
|
|
+ var models = [];
|
|
|
+ var animates = [];
|
|
|
+ var actions = [];
|
|
|
|
|
|
- function init() {
|
|
|
+ init();
|
|
|
|
|
|
- LastDateTime = Date.now();
|
|
|
- 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.background = new THREE.Color(0x666666);
|
|
|
- scene.add(new THREE.AmbientLight(0x999999));
|
|
|
- // grid
|
|
|
- var gridHelper = new THREE.GridHelper(14, 1, 0x303030, 0x303030);
|
|
|
- gridHelper.position.set(0, -0.04, 0);
|
|
|
- scene.add(gridHelper);
|
|
|
- // stats
|
|
|
- stats = new Stats();
|
|
|
- container.appendChild(stats.dom);
|
|
|
- // model
|
|
|
- manager = new THREE.LoadingManager();
|
|
|
- manager.onProgress = function (item, loaded, total) {
|
|
|
+ function init() {
|
|
|
|
|
|
- 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) {
|
|
|
+ var container = document.getElementById( 'container' );
|
|
|
+ document.body.appendChild( container );
|
|
|
|
|
|
- console.log('Errror Loading!');
|
|
|
+ camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
|
+ camera.position.set( 2, 20, 30 );
|
|
|
|
|
|
- };
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ scene.background = new THREE.Color( 0x666666 );
|
|
|
|
|
|
- Texloader = new THREE.TextureLoader();
|
|
|
- var loader = new THREE.XLoader(manager, Texloader);
|
|
|
+ // grid
|
|
|
|
|
|
- // ! If [ Texture ] was reversed Y axis, enable the following.
|
|
|
- // THREE.XLoader.IsUvYReverse = false;
|
|
|
+ var gridHelper = new THREE.GridHelper( 20, 20 );
|
|
|
+ scene.add( gridHelper );
|
|
|
|
|
|
- // ! And if [ Model ] was reversed polygons, enable the following.
|
|
|
- // loader.load([' your model url ', true ], function (object) {
|
|
|
+ // stats
|
|
|
|
|
|
- // read (download) model file
|
|
|
- loader.load(['models/xfile/SSR06_Born2.x', false], function (object) {
|
|
|
+ stats = new Stats();
|
|
|
+ container.appendChild( stats.dom );
|
|
|
|
|
|
- for (var i = 0; i < object.FrameInfo.length; i++) {
|
|
|
+ // model
|
|
|
|
|
|
- Models.push(object.FrameInfo[i]);
|
|
|
- scene.add(Models[i]);
|
|
|
+ var loader = new THREE.XLoader();
|
|
|
|
|
|
- if (Models[i] instanceof THREE.SkinnedMesh) {
|
|
|
+ // read (download) model file
|
|
|
|
|
|
- skeletonHelper = new THREE.SkeletonHelper(Models[i]);
|
|
|
- scene.add(skeletonHelper);
|
|
|
+ loader.load( [ 'models/xfile/SSR06_Born2.x', false ], function ( object ) {
|
|
|
|
|
|
- if (object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0) {
|
|
|
+ for ( var i = 0; i < object.FrameInfo.length; i ++ ) {
|
|
|
|
|
|
- Models[i].geometry.animations = [];
|
|
|
+ models.push( object.FrameInfo[ i ] );
|
|
|
+ var model = models[ i ];
|
|
|
|
|
|
- /*
|
|
|
- * ↓ that is BASIC animation data code.
|
|
|
- * Usually, please use this.
|
|
|
- * Because of the data I have, I use a different code
|
|
|
- *
|
|
|
- for (var a = 0; a < object.XAnimationObj.length; a++) {
|
|
|
- Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(object.XAnimationObj[a], Models[i].skeleton.bones));
|
|
|
- }
|
|
|
- Models[i].mixer = new THREE.AnimationMixer(Models[i]);
|
|
|
- animates.push(Models[i].mixer);
|
|
|
+ scene.add( model );
|
|
|
|
|
|
- var action = Models[i].mixer.clipAction(Models[i].geometry.animations[0]);
|
|
|
- action.play();
|
|
|
- */
|
|
|
+ if ( model instanceof THREE.SkinnedMesh ) {
|
|
|
|
|
|
- // ↓ that is a code for [ All animation-keyframes are connected data ]. output from 'LightWave3D'
|
|
|
- {
|
|
|
+ var skeletonHelper = new THREE.SkeletonHelper( model );
|
|
|
+ scene.add( skeletonHelper );
|
|
|
|
|
|
- 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));
|
|
|
- Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dashing', 160 * object.XAnimationObj[0].fps, 165 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
|
|
|
- Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'damage', 500 * object.XAnimationObj[0].fps, 530 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
|
|
|
+ if ( object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0 ) {
|
|
|
|
|
|
- Models[i].mixer = new THREE.AnimationMixer(Models[i]);
|
|
|
- animates.push(Models[i].mixer);
|
|
|
+ model.geometry.animations = [];
|
|
|
|
|
|
- var stand = Models[i].mixer.clipAction('stand');
|
|
|
- // stand.play();
|
|
|
- stand.setLoop(THREE.LoopRepeat);
|
|
|
- actions['stand'] = stand;
|
|
|
+ model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'stand', 10 * object.XAnimationObj[ 0 ].fps, 11 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
|
|
|
+ model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'walk', 50 * object.XAnimationObj[ 0 ].fps, 80 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
|
|
|
+ model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'dash', 140 * object.XAnimationObj[ 0 ].fps, 160 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
|
|
|
+ model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'dashing', 160 * object.XAnimationObj[ 0 ].fps, 165 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
|
|
|
+ model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'damage', 500 * object.XAnimationObj[ 0 ].fps, 530 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
|
|
|
|
|
|
- var walk = Models[i].mixer.clipAction('walk');
|
|
|
- walk.setLoop(THREE.LoopRepeat);
|
|
|
- walk.play();
|
|
|
- actions['walk'] = walk;
|
|
|
+ model.mixer = new THREE.AnimationMixer( model );
|
|
|
+ animates.push( model.mixer );
|
|
|
|
|
|
- var dash = Models[i].mixer.clipAction('dash');
|
|
|
- dash.setLoop(THREE.LoopOnce);
|
|
|
- //dash.play();
|
|
|
- actions['dash'] = dash;
|
|
|
+ var stand = model.mixer.clipAction( 'stand' );
|
|
|
+ stand.setLoop( THREE.LoopRepeat );
|
|
|
+ actions[ 'stand' ] = stand;
|
|
|
|
|
|
- var dashing = Models[i].mixer.clipAction('dashing');
|
|
|
- dashing.setLoop(THREE.LoopPingPong);
|
|
|
- // dashing.play();
|
|
|
- actions['dashing'] = dashing;
|
|
|
+ var walk = model.mixer.clipAction( 'walk' );
|
|
|
+ walk.setLoop( THREE.LoopRepeat );
|
|
|
+ walk.play();
|
|
|
+ actions[ 'walk' ] = walk;
|
|
|
|
|
|
- var damage = Models[i].mixer.clipAction('damage');
|
|
|
- damage.setLoop(THREE.LoopRepeat);
|
|
|
- //damage.play();
|
|
|
- actions['damage'] = damage;
|
|
|
+ var dash = model.mixer.clipAction( 'dash' );
|
|
|
+ dash.setLoop( THREE.LoopRepeat );
|
|
|
+ actions[ 'dash' ] = dash;
|
|
|
|
|
|
- var ActionKeys = Object.keys(actions);
|
|
|
- var dmy = {};
|
|
|
- dmy.gui = '';
|
|
|
- dmy.action = '';
|
|
|
- gui.add(dmy, 'action', ActionKeys).onChange(function (v) {
|
|
|
- animates[0].stopAllAction();
|
|
|
- actions[v].play();
|
|
|
- });
|
|
|
+ var dashing = model.mixer.clipAction( 'dashing' );
|
|
|
+ dashing.setLoop( THREE.LoopPingPong );
|
|
|
+ actions[ 'dashing' ] = dashing;
|
|
|
|
|
|
- }
|
|
|
- ///////////
|
|
|
- }
|
|
|
+ var damage = model.mixer.clipAction( 'damage' );
|
|
|
+ damage.setLoop( THREE.LoopRepeat );
|
|
|
+ actions[ 'damage' ] = damage;
|
|
|
|
|
|
- }
|
|
|
+ var actionKeys = Object.keys( actions );
|
|
|
+ var dmy = {};
|
|
|
+ dmy.gui = '';
|
|
|
+ dmy.action = '';
|
|
|
+ gui.add( dmy, 'action', actionKeys ).onChange( function ( v ) {
|
|
|
|
|
|
- }
|
|
|
+ animates[ 0 ].stopAllAction();
|
|
|
+ actions[ v ].play();
|
|
|
|
|
|
- object = null;
|
|
|
- }, onProgress, onError);
|
|
|
+ });
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
- renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
- container.appendChild(renderer.domElement);
|
|
|
+ }
|
|
|
|
|
|
- camera.position.set(2, 18, 28);
|
|
|
- camera.up.set(0, 1, 0);
|
|
|
+ }
|
|
|
|
|
|
- controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
- controls.target.set(0, 12, 0);
|
|
|
- controls.update();
|
|
|
+ object = null;
|
|
|
|
|
|
- var light = new THREE.DirectionalLight(0xeeeeff, 2);
|
|
|
- light.position.set(10, 100, 1).normalize();
|
|
|
- scene.add(light);
|
|
|
+ } );
|
|
|
|
|
|
- light = new THREE.DirectionalLight(0x555588);
|
|
|
- light.position.set(-1, -1, -1).normalize();
|
|
|
- scene.add(light);
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
|
|
|
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
+ controls.target.set( 0, 6, 0 );
|
|
|
+ controls.update();
|
|
|
|
|
|
- window.addEventListener('resize', onWindowResize, false);
|
|
|
- animate();
|
|
|
+ var directionalLight1 = new THREE.DirectionalLight( 0xeeeeff, 2 );
|
|
|
+ directionalLight1.position.set( 10, 100, 1 ).normalize();
|
|
|
+ scene.add( directionalLight1 );
|
|
|
|
|
|
- }
|
|
|
+ var directionalLight2 = new THREE.DirectionalLight( 0x555588 );
|
|
|
+ directionalLight2.position.set( - 1, - 1, - 1 ).normalize();
|
|
|
+ scene.add( directionalLight2 );
|
|
|
|
|
|
- function onWindowResize() {
|
|
|
+ var ambientLight = new THREE.AmbientLight( 0x999999 );
|
|
|
+ scene.add( ambientLight );
|
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
- }
|
|
|
- //
|
|
|
- function animate() {
|
|
|
+ animate();
|
|
|
|
|
|
- requestAnimationFrame(animate);
|
|
|
- var nowTime = Date.now();
|
|
|
- var dulTime = nowTime - LastDateTime;
|
|
|
- LastDateTime = nowTime;
|
|
|
+ }
|
|
|
|
|
|
- if (animates != null && animates.length > 0) {
|
|
|
+ function onWindowResize() {
|
|
|
|
|
|
- for (var i = 0; i < animates.length; i++) {
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
- animates[i].update(dulTime);
|
|
|
+ }
|
|
|
+ //
|
|
|
+ function animate() {
|
|
|
|
|
|
- }
|
|
|
+ requestAnimationFrame( animate );
|
|
|
|
|
|
- }
|
|
|
+ var delta = clock.getDelta();
|
|
|
|
|
|
- stats.update();
|
|
|
- render();
|
|
|
+ if ( animates ) {
|
|
|
|
|
|
- }
|
|
|
+ for ( var i = 0; i < animates.length; i ++ ) {
|
|
|
|
|
|
- function render() {
|
|
|
+ animates[ i ].update( delta * 1000 );
|
|
|
|
|
|
- renderer.render(scene, camera);
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- /////////////////
|
|
|
- /// this is not must mount codes.
|
|
|
- // split One and Long Animation, for time
|
|
|
- function splitAnimation(_baseAnime, _name, _beginTime, _endTime) {
|
|
|
+ stats.update();
|
|
|
+ render();
|
|
|
|
|
|
- var Animation = {};
|
|
|
- Animation.fps = _baseAnime.fps;
|
|
|
- Animation.name = _name;
|
|
|
- Animation.length = _endTime - _beginTime;
|
|
|
- Animation.hierarchy = [];
|
|
|
+ }
|
|
|
|
|
|
- for (var i = 0; i < _baseAnime.hierarchy.length; i++) {
|
|
|
+ function render() {
|
|
|
|
|
|
- var firstKey = -1;
|
|
|
- var lastKey = -1;
|
|
|
- var frame = {};
|
|
|
- frame.name = _baseAnime.hierarchy[i].name;
|
|
|
- frame.parent = _baseAnime.hierarchy[i].parent;
|
|
|
- frame.keys = [];
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
- for (var m = 1; m < _baseAnime.hierarchy[i].keys.length; m++) {
|
|
|
+ }
|
|
|
|
|
|
- if (_baseAnime.hierarchy[i].keys[m].time > _beginTime) {
|
|
|
+ // this is not must mount codes.
|
|
|
+ // split One and Long Animation, for time
|
|
|
|
|
|
- if (firstKey === -1) {
|
|
|
+ function splitAnimation( _baseAnime, _name, _beginTime, _endTime ) {
|
|
|
|
|
|
- firstKey = m - 1;
|
|
|
- frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
|
|
|
+ var animation = {};
|
|
|
+ animation.fps = _baseAnime.fps;
|
|
|
+ animation.name = _name;
|
|
|
+ animation.length = _endTime - _beginTime;
|
|
|
+ animation.hierarchy = [];
|
|
|
|
|
|
- }
|
|
|
+ for ( var i = 0; i < _baseAnime.hierarchy.length; i ++ ) {
|
|
|
|
|
|
- frame.keys.push(_baseAnime.hierarchy[i].keys[m]);
|
|
|
+ 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 (_endTime <= _baseAnime.hierarchy[i].keys[m].time || m >= _baseAnime.hierarchy[i].keys.length - 1) {
|
|
|
+ if ( _baseAnime.hierarchy[ i ].keys[ m ].time > _beginTime ) {
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
+ if ( firstKey === -1 ) {
|
|
|
|
|
|
- }
|
|
|
+ firstKey = m - 1;
|
|
|
+ frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m - 1 ] );
|
|
|
|
|
|
- for (var m = 0; m < frame.keys.length; m++) {
|
|
|
+ }
|
|
|
|
|
|
- frame.keys[m].time -= _beginTime;
|
|
|
+ frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m ] );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( _endTime <= _baseAnime.hierarchy[ i ].keys[ m ].time || m >= _baseAnime.hierarchy[ i ].keys.length - 1 ) {
|
|
|
|
|
|
- Animation.hierarchy.push(frame);
|
|
|
+ break;
|
|
|
|
|
|
}
|
|
|
|
|
|
- return Animation;
|
|
|
+ }
|
|
|
+
|
|
|
+ for ( var m = 0; m < frame.keys.length; m ++ ) {
|
|
|
+
|
|
|
+ frame.keys[ m ].time -= _beginTime;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ animation.hierarchy.push( frame );
|
|
|
|
|
|
}
|
|
|
- </script>
|
|
|
|
|
|
-</body>
|
|
|
+ return animation;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
</html>
|
Mugen87