Question

我正在学习Three.js，并且试图使一个对象根据鼠标的移动进行旋转。该对象是Blender中内置的一张面孔，有两个代表眼睛的子对象。理想情况下，面部和眼睛应沿鼠标方向相互独立旋转。

为此，我正在使用raycast鼠标位置的不可见平面，然后使用lookAt()函数使对象“朝”鼠标光标“看”。如果我保持脸部静止不动，并尝试仅移动眼睛，则效果很好。当我对脸部做同样的动作时，脸部旋转，但眼睛不再旋转。

这是正在加载的对象：

var object;
loader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/312969/faccione_test.glb", function(gltf) {
  object = gltf.scene;
  var scale = 20;
  gltf.scene.scale.set(scale, scale, scale);
  gltf.scene.position.x = 50; //Position (x = right+ left-)
  gltf.scene.position.y = 0; //Position (y = up+, down-)
  gltf.scene.position.z = 0; //Position (z = front +, back-)

  scene.add(object);

  gltf.scene.name = "faccione";
  render();
  animate();
});

在渲染函数中，我使用lookAt（）：

function render() {
  object.children[0].lookAt(point);
  object.children[1].lookAt(point);

  // uncommenting this blocks the eyes rotation
  // object.lookAt(point);
  renderer.render(scene, camera);
}

阅读一遍，我了解到分别加载眼睛，然后将它们添加到场景中应该可以独立移动它们。但是，我想了解是否有一种方法可以一次加载整个对象来达到相同的结果。

这是整个过程的一个代码笔：https://codepen.io/qarlo/pen/9ed6626a793227cc3a2d8ef122927686

Three.js：孩子不能独立于父项使用lookAt

0 个答案: