我使用 Three.js 设置了以下动画:
http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man2.html
请忽略绳索加权网格,它是一个快速重新模拟。真正的交易可以在这里找到( http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man.html )
问题就在这里。看到他的红帽子了吗? (在第一个 URL 中)。这应该是在他的头上。因此,我创建了一个虚拟对象(角色头顶上的小绿色立方体)。这不是角色皮肤的一部分,可以作为皮肤的子对象来处理。
但是,由于角色网格受动画的支配(morphTargetInfulences等 - 我还没有完全弄清楚它是如何工作的)我如何将帽子放置在虚拟对象所在的位置并有它随之移动吗?
这是代码的业务端,但请随意绕过上述文件的源代码:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var particleLight, pointLight;
var dae, skin, skin2, headgear, test2;
var faceMaterial = new THREE.MeshFaceMaterial();
var loader = new THREE.JSONLoader();
loader.load('../../../models/test_models/hat.js', function colladaReady( geometry ) {
headgear = new THREE.Mesh(geometry, faceMaterial);
loadMan();
});
function loadMan(){
var loader = new THREE.ColladaLoader();
loader.load( '../../../models/test_models/test4.DAE', function colladaReady( collada ) {
dae = collada.scene;
skin = collada.skins[0];
//this is the reference to the dummy object
skin2 = collada.skins[0].children[0];
dae.getChildByName( "node-CATRigHub001", true ).scale.set(0.1, 0.1, 0.1);
dae.position.y = -2
dae.scale.x = dae.scale.y = dae.scale.z = 0.1;
dae.rotation.x = -Math.PI/2;
//here is where i've added to the hat to the dummy object
skin2.add(headgear);
dae.updateMatrix();
init();
animate();
} );
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 2, 2, 3 );
scene = new THREE.Scene();
scene.add( dae );
particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xcccccc } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0xcccccc ) );
var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xcccccc );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xcccccc, 3 );
pointLight.position = particleLight.position;
scene.add( pointLight );
renderer = new THREE.WebGLRenderer();
//renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
}
var t = 0;
function animate() {
requestAnimationFrame( animate );
if ( t > 24 ) t = 0;
if ( skin ) {
for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
skin.morphTargetInfluences[ i ] = 0;
skin2.morphTargetInfluences[ i ] = 0;
}
skin.morphTargetInfluences[ Math.floor( t ) ] = 1;
skin2.morphTargetInfluences[ Math.floor( t ) ] = 1;
t += 0.5;
}
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 10;
camera.position.y = 2;
camera.position.z = Math.sin( timer ) * 10;
camera.lookAt( scene.position );
particleLight.position.x = Math.sin( timer * 4 ) * 3009;
particleLight.position.y = Math.cos( timer * 5 ) * 4000;
particleLight.position.z = Math.cos( timer * 4 ) * 3009;
renderer.render( scene, camera );
}
非常感谢!
最佳答案
你可以做一些像旧的 Quake MD2 模型一样的事情 - 每个 Prop 也是动画变形,动画帧同步到基础网格的所有动画帧(例如 running_gun、idle_gun、running_hat、idle_hat)。
例如,参见此处的武器:
http://alteredqualia.com/three/examples/webgl_morphtargets_md2.html
您需要在导出模型时执行此操作,将所有 Prop 与基础模型一起进行动画处理,然后将它们一一单独导出。
它不会非常优雅或高效,但它应该可以完成工作并直接开箱即用(就像 MD2 模型一样,最终也会成为变形,您只需将 Assets 管道映射到 MD2管道)。
正如您提到的 Collada,另一个选择可能是除了变形之外以某种方式使用原始骨架(也就是说,如果您的模型确实有骨架,我认为 Collada 允许蒙皮和变形)。
虽然我想这需要弄乱 ColladaLoader (变形是通过软件蒙皮烘焙的,所以有关骨骼框架的信息在某处,应该有类似“头骨”的东西)。
或者也许你可以以某种方式将 Prop 的刚体动画以及蒙皮/变形的基础网格分层到 Collada 中,例如这里的动画部分:
http://mrdoob.github.com/three.js/examples/webgl_loader_collada_keyframe.html
关于three.js - 如何将另一个场景对象附加到我的动画导入的 Collada 网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11039396/