如何获得动画网格的当前几何图形?假设我有一个正在经历一些动画的网格,我想获取当前姿势的副本并使用它创建一个新网格(不一定以相同的方式蒙皮),我该怎么做?
编辑:这是一个简单的例子。它加载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 :(得分:0)
您可以直接引用包含面数组的网格对象的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>