首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >获得当前动画网格的几何形状

获得当前动画网格的几何形状
EN

Stack Overflow用户
提问于 2016-06-01 03:41:42
回答 2查看 733关注 0票数 1

如何获得动画网格的当前几何形状?假设我有一个正在通过一些动画的网格,我想要获取当前姿势的副本,并使用它创建一个新的网格(不一定是以相同的方式剥皮),我将如何做到这一点?

编辑:下面是一个简单的例子。它加载一个three.js示例动画并运行它。加载的网格是skinnedMesh。每次调用skinnedMesh.geometry.动画()时,都会使用创建一个网格副本该副本名为newMesh,它由一个简单的红色MeshBasicMaterial创建,并偏移到原始副本的一侧。

如果运行该代码,您将看到,尽管skinnedMesh是动画的,但newMesh始终是未转换几何的副本。如果它在做我想做的事情,newMesh就会和newMesh一样摆姿势。

显然,这个特殊的例子效率很低,因为我只需再复制一份skinnedMesh,并分别对其进行动画处理。但这不是我想做的。我希望能够在任何时间点抓取动画网格的状态,并复制它恰好在那个时刻出现的姿势。

我希望这能让一切更清楚。

代码语言:javascript
运行
复制
<!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>
EN

回答 2

Stack Overflow用户

发布于 2016-06-01 03:48:39

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

临时操纵几何学本身就是一次冒险,但结构应该足够清晰。

代码语言:javascript
运行
复制
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)
代码语言:javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

票数 0
EN

Stack Overflow用户

发布于 2021-08-29 12:21:42

骨头不会影响内存中的几何图形,它们的矩阵在渲染过程中被应用到着色器中的几何中,并且无法从JS级别访问几何图形。

您必须将当前的姿态分为位置和法线,实现:https://stackoverflow.com/a/66404012/696535

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37559030

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档