three.js - Three.js 中的 GLTF 模型和交互

Question

至少可以说我的 js 技能可以提高!但为此苦苦挣扎

我可以让我的模型正常加载到场景中，但似乎无法让交互正常工作。

这就像我需要将 GLTF 文件绑定(bind)到 raycaster 中，下面的代码是其中的一部分。完整的 Codepen 链接位于此代码下方。

class PickHelper {
constructor() {
  this.raycaster = new THREE.Raycaster();
  this.pickedObject = null;
  this.pickedObjectSavedColor = 0;
}
pick(normalizedPosition, scene, camera, time) {

  if (this.pickedObject) {
    this.pickedObject.material.emissive.setHex(this.pickedObjectSavedColor);
    this.pickedObject = undefined;
  }

  this.raycaster.setFromCamera(normalizedPosition, camera);

  const intersectedObjects = this.raycaster.intersectObjects(scene.children);
  if (intersectedObjects.length) {
    this.pickedObject = intersectedObjects[0].object;
    this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
    this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
    this.pickedObject.rotation.y += 0.1 ;

  }
}

https://codepen.io/johneemac/pen/abzqdye <<完整代码

抱歉:虽然 CodePen 上的 gltf 文件存在跨源问题!它不会加载，但希望您明白了。

非常感谢任何帮助，谢谢!

Answer 1

你必须像这样执行交集测试:

const intersectedObjects = this.raycaster.intersectObjects(scene.children, true);

注意 intersectObjects() 的第二个参数。它表明光线转换器应该处理整个对象层次结构，这在加载的 glTF Assets 的上下文中是必需的。

three.js R112