Erhalten der aktuellen Geometrie des animierten Gitters

Wie erhält man die aktuelle Geometrie eines animierten Gitters? Angenommen, ich habe ein Mesh, das eine Animation durchläuft, und ich möchte mir eine Kopie der aktuellen Pose schnappen und daraus ein neues Mesh erstellen (das nicht unbedingt auf dieselbe Weise gehäutet wird), wie würde ich das tun?Erhalten der aktuellen Geometrie des animierten Gitters

Edit: Hier ist ein einfaches Beispiel. Es lädt eine der Beispiel-Animationen von three.js und führt sie aus. Das geladene Netz ist skinedMesh. Jedes Mal, wenn animate() aufgerufen wird, wird eine Kopie des Netzes unter Verwendung von skinedMesh.geometry erstellt. Die Kopie heißt newMesh, und sie ist mit einem einfachen roten MeshBasicMaterial und Offset zu einer Seite des Originals erstellt.

Wenn Sie den Code ausführen, werden Sie sehen, dass, obwohl skinnedMesh animiert, newMesh ist immer eine Kopie der nicht transformierte Geometrie. Wenn es das tat, was ich wollte, würde newMesh in der gleichen Pose sein wie skinedMesh.

Offensichtlich ist dieses spezielle Beispiel sehr ineffizient, da ich einfach eine andere Kopie von skinedMesh machen und es separat animieren könnte. Aber das möchte ich nicht machen. Ich möchte in der Lage sein, den Status des animierten Netzes zu jedem Zeitpunkt zu erfassen und eine Kopie der Pose zu machen, in der es sich gerade befindet.

Ich hoffe, dass dies alles klarer macht.

<!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>

Quelle

2016-06-01 jbg

Sie können die geometry Eigenschaft eines Netzobjekt direkt Referenz, die ein Array von Flächen enthält.

Manipulation der Geometrie Ad-hoc ist ein Abenteuer auf sich selbst, aber die Struktur sollte klar genug sein.

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>

Quelle

2016-06-01 03:48:39

Dies mit einem statischen Mesh funktioniert, aber für ein animiertes Netz dies die nicht transformiert Geometrie des Objekts nur zurückkehren würde in seiner Ruhe/default Pose. Was ich will, ist, die Pose eines animierten Netzes an einem beliebigen Punkt in seiner Animation zu kopieren - wie ein Standbild der Animation. – jbg

@jbg sollten Sie einen Code example.so können wir besser und einfacher bearbeiten es zu verstehen. –

Erhalten der aktuellen Geometrie des animierten Gitters

Antwort

Verwandte Themen