maptalks.three icon indicating copy to clipboard operation
maptalks.three copied to clipboard

如何给加载的3D模型监听点击事件,并添加outline边框

Open dragonir opened this issue 4 years ago • 2 comments

通过raycaster获取到点击对象,添加如下画边框方法时无法生效,但是在原生three.js中可以给模型添加边框。

  setOutline = (selectedObjects, color = 0xFFFC00) => {
    const [w, h] = [window.innerWidth, window.innerHeight];
    let composer = new EffectComposer(this.renderer);
    let renderPass = new RenderPass(this.scene, this.camera);
    let outlinePass = new OutlinePass(new THREE.Vector2(w, h),
      this.scene,
      this.camera,
      selectedObjects
    );
    outlinePass.renderToScreen = true;
    outlinePass.selectedObjects = selectedObjects;
    composer.addPass(renderPass);
    composer.addPass(outlinePass);
    const params = {
      edgeStrength: 3,
      edgeGlow: 0,
      edgeThickness: 20000,
      pulsePeriod: 1,
      usePatternTexture: false
    };
    outlinePass.edgeStrength = params.edgeStrength;
    outlinePass.edgeGlow = params.edgeGlow;
    outlinePass.visibleEdgeColor.set(color);
    outlinePass.hiddenEdgeColor.set(color);
    composer.render(this.scene, this.camera);
    this.composer = composer;
  }

dragonir avatar Nov 02 '21 07:11 dragonir

map.on传事件类型,再用map.identify({ coordinate: [0, 0], layers: [layer] }, geos => { console.log(geos); });

AndyCheung-Hub avatar Jun 23 '22 03:06 AndyCheung-Hub

我这样设置了边框,没有报错,但是也没有显示边框 mapRef.on('click', e => { const mesh = threeLayer.identify(e.coordinate,{count: 1}); if (mesh.length > 0 && mesh[0] instanceof ExtrudePolygon) { const outlinePass = new OutlinePass( new THREE.Vector2(width, height), scene, camera, [mesh[0].getObject3d()]); composer.addPass(outlinePass); outlinePass.selectedObjects = [mesh[0].getObject3d()]; outlinePass.renderToScreen = true; const params = { edgeStrength: 3, edgeGlow: 0, edgeThickness: 20, pulsePeriod: 1, usePatternTexture: false }; outlinePass.edgeStrength = params.edgeStrength; outlinePass.edgeGlow = params.edgeGlow; outlinePass.visibleEdgeColor.set(0x15c5e8); outlinePass.hiddenEdgeColor.set(0x15c5e8); composer.render(scene, camera); threeLayer.composer = composer } })

CharlesLeocc avatar Nov 16 '22 02:11 CharlesLeocc