在用threejs 实现类似3d看房中 热点事件 使用 CSS2DRenderer html标签 展示效果
第一次尝试 使用 raycaster 射线拾取 无法获取 CSS2DRenderer 只可以获取 相交的模型
第二次尝试 在 vue 中直接使用 @click 事件 会出现 click 阻塞问题
出现问题 在我使用 OrbitControls 创建控制器(controls) new OrbitControls(camera, CSSRender) 用于事件监听的HTML元素 为 CSS2DRenderer() 一开始这样是方便 不用添加 style.pointerEvents = 'none' 就可以直接操纵 控制器 但是这样一来 click 事件就不会生效了 因为 在ThreeJs 0.13X版本后,因为 控制器 原因 dom 的 click 不会触发.
问题前代码：
发现问题后 修改了 创建控制器 new OrbitControls(camera, renderer.domElement) 这样一来控制器的监听事件只作用于randerer生成的cavans，不会对外部产生影响；在添加dom之前不要忘记给 CSS2DRenderer() 加上 CSSRender.domElement.style.pointerEvents = 'none' 否则就无法使用 控制器;之后就可以在要点击的dom元素上 设置 dom.style.pointerEvents = 'auto' 这样就可以解决 CSS2DRenderer 标签点击事件无效问题
controls
render
Defineee
three.js
JavaScript
-
1.2w
-
蝴蝶刀砍手大师
Vue.js
three.js
-
2.7w
-
CondorHero
TypeScript
掘金·金石计划
-
14.9w
-
JavaScript
three.js
-
4.9w
-
alphardex
WebGL
three.js
-
10.6w
-
alphardex
WebGL
three.js
-
1.2w
-
JavaScript
WebGL
three.js
-
11.5w
-
superZidan
JavaScript
掘金·日新计划
