如何给加载的3D模型监听点击事件,并添加outline边框
通过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;
}
map.on传事件类型,再用map.identify({ coordinate: [0, 0], layers: [layer] }, geos => { console.log(geos); });
我这样设置了边框,没有报错,但是也没有显示边框 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 } })