animation - Three.js 用动画克隆 FBX
问题描述
在保留动画关键帧的同时,我似乎无法克隆 FBX 模型(从Mixamo下载的 FBX)。
尝试了多种方法,包括使用cloneFbx要点(包括在下面的示例中);一切都无济于事。即使将整个 FBXLoader() 函数放在循环中也无法按预期工作,因为一次只有一个模型会进行动画处理。
此问题已在此处部分解决,但我似乎无法像答案所暗示的那样“复制”动画序列。
谁能指出我哪里出错了?
这是我的一项测试的粗略示例:
加载 fbx 模型并存储动画:
var loader = new THREE.FBXLoader();
loader.load( 'models/Walking.fbx', function ( fbx ) {
clip = fbx.animations[ 0 ];
// createVehicle(fbx); // Works! Creates one animated model via FBX
// cloneFbx via: https://gist.github.com/kevincharm/bf12a2c673b43a3988f0f171a05794c1
for (var i = 0; i < 2; i++) {
const model = cloneFbx(fbx);
createVehicle(model);
}
});
根据存储的剪辑添加混音器和动作,将模型添加到场景:
function createVehicle(model){
model.mixer = new THREE.AnimationMixer( model );
mixers.push( model.mixer );
var action = model.mixer.clipAction( clip );
action.play();
model.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
});
const x = Math.random() * groundSize - groundSize/2;
const z = Math.random() * groundSize - groundSize/2;
model.position.set(x, 0, z);
const vehicle = new Vehicle(model, x, z);
vehicles.push(vehicle);
scene.add( model );
}
动画周期:
if ( mixers.length > 0 ) {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ 0 ].update( clock.getDelta() );
}
}
解决方案
想不出一个优雅的解决方案。我能想到的最好的办法是创建一个循环,其中包含加载序列;这非常慢(因为每次都必须解析 FBX)。
这里的关键是让动画混合器将动画对象作为一个组来控制,而不是为每个动画对象创建一个混合器。
如果有人能找到更好的解决方案,我会非常渴望听到它(也许正确使用cloneFbx脚本)。
创建混音器,加载 FBX:
// Create mixer to run animations
mixer = new THREE.AnimationMixer( scene );
// Load fbx
var loader = new THREE.FBXLoader();
for (var i = 0; i < 5; i++) {
loader.load( 'models/Walking.fbx', function ( fbx ) {
mixer.clipAction( fbx.animations[ 0 ], fbx )
.startAt( - Math.random() )
.play();
createVehicle(fbx);
});
}
创建类实例,添加到场景:
function createVehicle(model){
const x = Math.random() * groundSize - groundSize/2;
const z = Math.random() * groundSize - groundSize/2;
model.position.set(x, 0, z);
const vehicle = new Vehicle(model, x, z);
vehicles.push(vehicle);
scene.add( model );
}
绘制周期:
mixer.update( clock.getDelta() );
推荐阅读
- c# - 这是定义一对多关系的适当方法吗
- java - 如何修复 Java (android) 中的“无法找到空闲端口”错误
- apache-spark - DataFrame 到 Dataset 的转换(scala)
- java - JPA ManyToMany - 始终在表中创建一个新值,即使该值存在
- java - 无法从 PHP 执行 Hadoop Jar
- java - 使用昼夜主题时如何更改布局的背景/文本颜色
- html - 无法使项目 (3) 居中于其他元素 (3)、flexbox 的顶部
- ios - TableView 不会在情节提要中拉伸到全屏
- apache-kafka - Kafka可以将消费者组偏移量设置为主题的开头吗?
- java - 如何在泛型类中设置随机值