Three.js中的GLTF模型和交互

约翰·麦克弗森

至少可以说我的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文件存在跨源问题!它不会加载,但您有希望。

超级感谢任何帮助,谢谢!

木根87

您必须像这样执行相交测试:

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

注意的第二个参数intersectObjects()它表明光线投射器应该处理对象的整个层次结构,这对于已加载glTF资产而言是必需的

three.js R112

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用three.js出现的gltf模型只有一部分

来自分类Dev

THREE.js-将渐变颜色应用于导入的GLTF模型

来自分类Dev

A-Frame / THREE.js, 无纹理简化 gltf[glb] 模型

来自分类Dev

Three.js中的交互式网格

来自分类Dev

Three.js-比例模型

来自分类Dev

如何从Blender导入模型和关联的纹理到three.js中?

来自分类Dev

我的鸭子被卡住了:three.js加载程序中的gltf对象似乎无法重绘

来自分类Dev

使用three.js更改gltf-model在a-frame场景中的位置

来自分类Dev

THREE.js中未绘制低比例模型

来自分类Dev

在three.js中更改obj模型材料

来自分类Dev

Three.js最复杂的模型

来自分类Dev

Three.js透明模型纹理错误

来自分类Dev

Three.js导入的模型抗锯齿

来自分类Dev

如何绘制Three.js模型?

来自分类Dev

Three.js模型质量很差

来自分类Dev

使用Three.js加载Maya模型

来自分类Dev

Three.js导入的模型抗锯齿

来自分类Dev

如何绘制Three.js模型?

来自分类Dev

THREE.js 加载 json 模型失败

来自分类Dev

THREE.ObjectLoader的Three.js错误

来自分类Dev

如何在three.js中与场景中的对象进行交互?

来自分类Dev

three.js中的网格

来自分类Dev

Three.js中的verticesNeedUpdate

来自分类Dev

THREE.js中的ParametricBufferGeometry

来自分类Dev

如何使用THree.js和webGL将交互式图像或元素嵌入到全景图像查看器中?

来自分类Dev

如何在three.js中制作交互式视频进度条?

来自分类Dev

Three.js:SVGRenderer?

来自分类Dev

Three.js /交集

来自分类Dev

Three.js-TransformControls