Feng - 2020年1月
type: channel
link: http://fengyitong.name/index.php/2020/01/
description: 半山腰的风采
items: 使threejs中的2d dom元素能够不影响轨道控制器使用

使threejs中的2d dom元素能够不影响轨道控制器使用
type: item
date: 2020-01-07T10:35:09+08:00
description: 很多时候为了方便,我们会在3d环境中放置dom元素.这样的好处有很多,这里不多说明.2d元素如何放到3d环境中可以参考threejs-align-html-elements-to-3d.html根据上面介绍我自己写了一个基类方便使用https://github.com/aoobao/bim_test/blob/master/src/assets/js/BaseElement.js接着碰到一个问题是: 我们希望鼠标在这些dom上时threejs中的轨道控制器的事件也能够响应,一开始找了半天没发现是什么地方阻止了事件传递,突然发现了大部分情况下我们是创建轨道控制器的时候,domelement是传递renderer.domElement的(就是canvas元素),而dom不会放在canvas内部在这里只要把事件绑定在跟canvas一样大的父元素上,那些2d dom都放在父元素中就可以了.// var orbitControls = new CameraControls(camera, renderer.domElement) var orbitControls = new CameraControls(camera, container) // container 为和canvas一样大小的父节点,包裹其余2d元素