至少可以说我的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文件存在跨源问题!它不会加载,但您有希望。
超级感谢任何帮助,谢谢!
您必须像这样执行相交测试:
const intersectedObjects = this.raycaster.intersectObjects(scene.children, true);
注意的第二个参数intersectObjects()
。它表明光线投射器应该处理对象的整个层次结构,这对于已加载glTF
资产而言是必需的。
three.js R112
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句