Three 之 three.js （webgl）CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理

Three 之 three.js （webgl）CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理

目录

Three 之 three.js （webgl）CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理

一、简单介绍

二、实现原理

在 Three js 3D 添加 CSS2D 的方法

处理 CSS2DRenderer 与 OrbitController 等轨道交互的冲突（导致失效）问题

如果 CSS2DRenderer   与 html button 等有交互冲突

三、注意事项

四、效果预览

 五、案例实现代码

---

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three 开发网页 3D 场景， three.js （webgl）在 3D 场景中添加 文本按钮等的UI 方法，并且在添加中如何处理与OrbitController / html button 等交互冲突的处理，保证各自的功能正常使用，这里做简单使用说明整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

CSS 2D渲染器（CSS 2D渲染器（CSS2DRenderer））

CSS2DRen