Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 2f0a276d 编写于 作者: M Mugen87
浏览文件
操作

XLoader: Format example

上级 d4bcad05
隐藏空白更改
内联 并排
Showing with 172 addition and 173 deletion
examples/webgl_loader_x.html
浏览文件 @ 2f0a276d
<!DOCTYPE html>
<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'>
<style>
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>
<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 {
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="https://threejs.org" target="_blank" rel="noopener">three.js</a> - X-File Loader</div>
<div id="container"></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>
<script src='js/loaders/XLoader.js'></script>
<script src='../build/three.js'></script>
<script src='js/controls/OrbitControls.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>
<script src='js/loaders/XLoader.js'></script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
<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 stats;
var camera, scene, renderer;
var clock = new THREE.Clock();
var gui = new dat.GUI();
var mixers = [];
var models = [];
var animates = [];
var actions = [];
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
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();
var container = document.getElementById( 'container' );
document.body.appendChild( container );
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 2, 20, 30 );
var container = document.getElementById( 'container' );
document.body.appendChild( container );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x666666 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 2, 20, 30 );
// grid
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x666666 );
var gridHelper = new THREE.GridHelper( 20, 20 );
scene.add( gridHelper );
// grid
// stats
var gridHelper = new THREE.GridHelper( 20, 20 );
scene.add( gridHelper );
stats = new Stats();
container.appendChild( stats.dom );
// stats
// model
stats = new Stats();
container.appendChild( stats.dom );
var loader = new THREE.XLoader();
// model
// read (download) model file
var loader = new THREE.XLoader();
loader.load( [ 'models/xfile/SSR06_Born2.x', false ], function ( object ) {
// read (download) model file
for ( var i = 0; i < object.FrameInfo.length; i ++ ) {
loader.load( [ 'models/xfile/SSR06_Born2.x', false ], function ( object ) {
models.push( object.FrameInfo[ i ] );
var model = models[ i ];
for ( var i = 0; i < object.FrameInfo.length; i ++ ) {
scene.add( model );
models.push( object.FrameInfo[ i ] );
var model = models[ i ];
if ( model instanceof THREE.SkinnedMesh ) {
scene.add( model );
var skeletonHelper = new THREE.SkeletonHelper( model );
scene.add( skeletonHelper );
if ( model instanceof THREE.SkinnedMesh ) {
if ( object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0 ) {
var skeletonHelper = new THREE.SkeletonHelper( model );
scene.add( skeletonHelper );
model.geometry.animations = [];
if ( object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0 ) {
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 ) );
model.geometry.animations = [];
model.mixer = new THREE.AnimationMixer( model );
animates.push( model.mixer );
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 stand = model.mixer.clipAction( 'stand' );
stand.setLoop( THREE.LoopRepeat );
actions[ 'stand' ] = stand;
model.mixer = new THREE.AnimationMixer( model );
animates.push( model.mixer );
var walk = model.mixer.clipAction( 'walk' );
walk.setLoop( THREE.LoopRepeat );
walk.play();
actions[ 'walk' ] = walk;
var stand = model.mixer.clipAction( 'stand' );
stand.setLoop( THREE.LoopRepeat );
actions[ 'stand' ] = stand;
var dash = model.mixer.clipAction( 'dash' );
dash.setLoop( THREE.LoopRepeat );
actions[ 'dash' ] = dash;
var walk = model.mixer.clipAction( 'walk' );
walk.setLoop( THREE.LoopRepeat );
walk.play();
actions[ 'walk' ] = walk;
var dashing = model.mixer.clipAction( 'dashing' );
dashing.setLoop( THREE.LoopPingPong );
actions[ 'dashing' ] = dashing;
var dash = model.mixer.clipAction( 'dash' );
dash.setLoop( THREE.LoopRepeat );
actions[ 'dash' ] = dash;
var damage = model.mixer.clipAction( 'damage' );
damage.setLoop( THREE.LoopRepeat );
actions[ 'damage' ] = damage;
var dashing = model.mixer.clipAction( 'dashing' );
dashing.setLoop( THREE.LoopPingPong );
actions[ 'dashing' ] = dashing;
var actionKeys = Object.keys( actions );
var dmy = {};
dmy.gui = '';
dmy.action = '';
gui.add( dmy, 'action', actionKeys ).onChange( function ( v ) {
var damage = model.mixer.clipAction( 'damage' );
damage.setLoop( THREE.LoopRepeat );
actions[ 'damage' ] = damage;
animates[ 0 ].stopAllAction();
actions[ v ].play();
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;
}
} );
object = null;
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();
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var directionalLight1 = new THREE.DirectionalLight( 0xeeeeff, 2 );
directionalLight1.position.set( 10, 100, 1 ).normalize();
scene.add( directionalLight1 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 6, 0 );
controls.update();
var directionalLight2 = new THREE.DirectionalLight( 0x555588 );
directionalLight2.position.set( - 1, - 1, - 1 ).normalize();
scene.add( directionalLight2 );
var directionalLight1 = new THREE.DirectionalLight( 0xeeeeff, 2 );
directionalLight1.position.set( 10, 100, 1 ).normalize();
scene.add( directionalLight1 );
var ambientLight = new THREE.AmbientLight( 0x999999 );
scene.add( ambientLight );
var directionalLight2 = new THREE.DirectionalLight( 0x555588 );
directionalLight2.position.set( - 1, - 1, - 1 ).normalize();
scene.add( directionalLight2 );
window.addEventListener( 'resize', onWindowResize, false );
var ambientLight = new THREE.AmbientLight( 0x999999 );
scene.add( ambientLight );
animate();
window.addEventListener( 'resize', onWindowResize, false );
}
animate();
function onWindowResize() {
}
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
function onWindowResize() {
}
//
function animate() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
requestAnimationFrame( animate );
}
//
function animate() {
var delta = clock.getDelta();
requestAnimationFrame( animate );
if ( animates ) {
var delta = clock.getDelta();
for ( var i = 0; i < animates.length; i ++ ) {
if ( animates ) {
animates[ i ].update( delta * 1000 );
for ( var i = 0; i < animates.length; i ++ ) {
}
animates[ i ].update( delta * 1000 );
}
stats.update();
render();
}
function render() {
stats.update();
render();
renderer.render( scene, camera );
}
}
function render() {
// this is not must mount codes.
// split One and Long Animation, for time
renderer.render( scene, camera );
function splitAnimation( _baseAnime, _name, _beginTime, _endTime ) {
}
var animation = {};
animation.fps = _baseAnime.fps;
animation.name = _name;
animation.length = _endTime - _beginTime;
animation.hierarchy = [];
// this is not must mount codes.
// split One and Long Animation, for time
for ( var i = 0; i < _baseAnime.hierarchy.length; i ++ ) {
function splitAnimation( _baseAnime, _name, _beginTime, _endTime ) {
var firstKey = -1;
var lastKey = -1;
var frame = {};
frame.name = _baseAnime.hierarchy[ i ].name;
frame.parent = _baseAnime.hierarchy[ i ].parent;
frame.keys = [];
var animation = {};
animation.fps = _baseAnime.fps;
animation.name = _name;
animation.length = _endTime - _beginTime;
animation.hierarchy = [];
for ( var m = 1; m < _baseAnime.hierarchy[ i ].keys.length; m ++ ) {
for ( var i = 0; i < _baseAnime.hierarchy.length; i ++ ) {
if ( _baseAnime.hierarchy[ i ].keys[ m ].time > _beginTime ) {
var firstKey = -1;
var lastKey = -1;
var frame = {};
frame.name = _baseAnime.hierarchy[ i ].name;
frame.parent = _baseAnime.hierarchy[ i ].parent;
frame.keys = [];
if ( firstKey === -1 ) {
for ( var m = 1; m < _baseAnime.hierarchy[ i ].keys.length; m ++ ) {
firstKey = m - 1;
frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m - 1 ] );
if ( _baseAnime.hierarchy[ i ].keys[ m ].time > _beginTime ) {
}
if ( firstKey === -1 ) {
frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m ] );
firstKey = m - 1;
frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m - 1 ] );
}
if ( _endTime <= _baseAnime.hierarchy[ i ].keys[ m ].time || m >= _baseAnime.hierarchy[ i ].keys.length - 1 ) {
break;
}
frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m ] );
}
for ( var m = 0; m < frame.keys.length; m ++ ) {
if ( _endTime <= _baseAnime.hierarchy[ i ].keys[ m ].time || m >= _baseAnime.hierarchy[ i ].keys.length - 1 ) {
frame.keys[ m ].time -= _beginTime;
break;
}
animation.hierarchy.push( frame );
}
for ( var m = 0; m < frame.keys.length; m ++ ) {
frame.keys[ m ].time -= _beginTime;
}
return animation;
animation.hierarchy.push( frame );
}
</script>
return animation;
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或