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

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

目录

一、简单介绍

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

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

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

CSS2DRenderer是CSS3DRenderer（CSS 3D渲染器）的简化版本，唯一支持的变换是位移。

如果你希望将三维物体和基于HTML的标签相结合，则这一渲染器将十分有用。在这里，各个DOM元素也被包含到一个CSS2DObject实例中，并被添加到场景图中。

CSS 2D渲染器（CSS2DRenderer） 方法：

. () : Object

返回一个包含有渲染器宽和高的对象。

. ( scene : Scene, camera : Camera ) : undefined

使用camera渲染scene。

. (width : Number, height : Number) : undefined

将渲染器的尺寸调整为(width, height).

CSS 3D渲染器（CSS3DRenderer）

CSS3DRenderer用于通过CSS3的属性， 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有趣。 同时，它也可以将DOM元素与WebGL的内容相结合。

然而，这一渲染器也有一些十分重要的限制：

• 它不可能使用three.js中的材质系统。
• 同时也不可能使用几何体。

因此，CSS3DRenderer仅仅关注普通的DOM元素，这些元素被包含到了特殊的对象中（CSS3DObject或者CSS3DSprite），然后被加入到场景图中。

二、实现原理

在 Three js 3D 添加 CSS2D 的方法

1、创建 const xx = document.createElement('xxx')，对应设置

2、在以上基础上 const xxCSS2dObject = new CSS2DObject( xx ) ，并添加到 scene 中

3、然