2016-06-01 13 views
0

如何获取动画网格的当前几何?假设我有一个正在经历一些动画的网格,并且我想抓取当前姿势的副本并使用它创建一个新网格(不一定以同样的方式蒙皮),那么我该怎么做?获取动画网格的当前几何

编辑:这是一个简单的例子。它加载three.js示例动画之一并运行它。装载的网格是skinnedMesh。每次调用animate()时,将使用skinnedMesh.geometry制作网格的副本。该副本被称为newMesh,它使用简单的红色MeshBasicMaterial创建,并偏移到原始的一侧。

如果您运行的代码,你会看到,尽管skinnedMesh是动画,newMesh始终未转换的几何形状的副本。如果它正在做我想做的事情,newMesh将与skinnedMesh的姿势相同。

很明显,这个特殊的例子效率很低,因为我可以制作另一个skinnedMesh,并单独为其设置动画。但那不是我想要做的。我希望能够在任何时间点抓住动画网格的状态,并制作恰好在那个时刻出现的姿势的副本。

我希望这可以使一切更清晰。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
</head> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js">  </script> 
<script> 

var container; 
var camera, scene, renderer, loader, clock, light; 
var skinnedMesh, animation, groundMaterial, planeGeometry, mixer; 
var newMesh = null; 
var loaded = false; 

init(); 
animate(); 

function init() { 
    container = document.createElement('div'); 
    document.body.appendChild(container); 

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.set(10, 0, 10); 

    scene = new THREE.Scene(); 
    loader = new THREE.JSONLoader(); 
    clock = new THREE.Clock; 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    container.appendChild(renderer.domElement); 

    groundMaterial = new THREE.MeshPhongMaterial({ 
    emissive: 0x010101 
    }); 
    planeGeometry = new THREE.PlaneBufferGeometry(16000, 16000); 
    ground = new THREE.Mesh(planeGeometry, groundMaterial); 
    ground.position.set(0, -5, 0); 
    ground.rotation.x = -Math.PI/2; 
    scene.add(ground); 

    light = new THREE.HemisphereLight(0x777777, 0x003300, 1); 
    light.position.set(-80, 500, 50); 
    scene.add(light); 

    loader.load('http://threejs.org/examples/models/skinned/simple/simple.js', function(geometry, materials) { 
    for (var k in materials) { 
     materials[k].skinning = true; 
    } 
    skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    skinnedMesh.scale.set(1, 1, 1); 
    skinnedMesh.position.y = 0; 
    scene.add(skinnedMesh); 

    mixer = new THREE.AnimationMixer(skinnedMesh); 
    mixer.addAction(new THREE.AnimationAction(skinnedMesh.geometry.animations[0])); 

    camera.lookAt(skinnedMesh.position); 

    loaded = true; 
    }); 
} 

function animate() { 
    requestAnimationFrame(animate); 
    if (!loaded) { 
    return; 
    } 
    if (mixer) mixer.update(clock.getDelta()); 

    if (newMesh) { 
    scene.remove(newMesh); 
    } 
    newMesh = new THREE.Mesh(skinnedMesh.geometry, 
    new THREE.MeshBasicMaterial({ 
     color: 0xff0000 
    }) 
); 
    newMesh.position.x = skinnedMesh.position.x - 6; 
    scene.add(newMesh); 

    render(); 
} 

function render() { 
    renderer.render(scene, camera); 
} 
</script> 
</body> 
</html> 

回答

0

您可以直接引用包含面数组的Mesh对象的geometry属性。

操作几何ad-hoc本身就是一种冒险,但是结构应该足够清晰。

var geometry = new THREE.BoxGeometry(1, 1, 1); 
 
var material = new THREE.MeshBasicMaterial({ 
 
    color: 0xffff00 
 
}); 
 
var mesh = new THREE.Mesh(geometry, material); 
 
console.log(mesh.geometry)
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

+0

这适用于静态的网格,但对于一个动画网,这将刚刚返回对象的未转换的几何形状在其静止/默认姿势。我想要的是在其动画的某个任意点复制动画网格的姿势---就像动画的定格框架一样。 – jbg

+1

@jbg你应该发布一个代码example.so,我们可以更好地理解和容易编辑它。 –