我使用 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 );
}
提前谢谢了！