Question

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

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

这就像我需要将GLTF文件绑定到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资产而言是必需的。

three.js R112

Three.js中的GLTF模型和交互

1 个答案: