Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dragonir opened this issue Nov 2, 2021 · 2 comments
Open

Comments

@dragonir
Copy link

dragonir commented Nov 2, 2021

通过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;
  }
@AndyCheung-Hub
Copy link

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

@CharlesLeocc
Copy link
Contributor

我这样设置了边框,没有报错,但是也没有显示边框
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
}
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants