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））

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

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

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

. getSize () : Object

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

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

使用camera渲染scene。

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

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

CSS 3D渲染器（CSS3DRenderer）

CSS3DRenderer用于通过CSS3的 transform 属性， 将层级的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、然后记住创建 const css2DLabelRenderer = new CSS2DRenderer()，并且添加到 document.body.appendChild( this.css2DLabelRenderer.domElement )

4、在 render() 渲染函数中进行渲染 css2DLabelRenderer.render( this.scene, this.camera );

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

1、如果 CSS2DRenderer  没有需要交互的使用，可以直接设置 pointerEvents = 'none' （css2DLabelRenderer.domElement.style.pointerEvents = 'none';）

pointer-events:none —元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。

2、如果 CSS2DRenderer  有需要交互的使用，可以把 OrbitControls 控制器 用于事件监听的HTML元素替换（可以换成 CSS2DRenderer   这个）

     // new OrbitControls( this.camera, this.renderer.domElement );
      new OrbitControls( this.camera, this.css2DLabelRenderer.domElement );

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

1、可以设置该元素的 zIndex 值 大些，试试

style = "z-index: 1000" 或者 btnDiv.style.zIndex = 1000;

三、注意事项

1、CSS2DRenderer 渲染需要实时更新，必要也需要做窗口大小的变换，对应的事件处理

    CSS2DLabelRender() {
      if (this.css2DLabelRenderer != null) {
        this.css2DLabelRenderer.render( this.scene, this.camera );
    CSS2DLabelOnWindowSize() {
      if (this.css2DLabelRenderer != null) {
        this.css2DLabelRenderer.setSize(window.innerWidth, window.innerHeight);
四、效果预览
 
 五、案例实现代码
 
效果预览基于，以下博文的基础环境实现：
 
Vue 之 Vue Cli 创建 Three js 工程( 网页 3D )的简单整理(一些注意事项)_仙魁XAN的博客-CSDN博客
 
1、关键代码（App.vue）
 
<template>
  <div id="container"></div>
  <div id="menu" style="position: absolute;left:45%;text-align: center; z-index: 1000">
    <button @click="TestClick">TestClick(Click)</button>
</template>
<script>
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'ThreeTest',
  components: {},
  data() {
    return {}
  mounted() {
    this.container;
    this.stats;
    this.camera;
    this.scene;
    this.renderer;
    this.css2DLabelRenderer;
    this.init();
    this.animate();
  methods: {
    init() {
      this.container = document.createElement('div');
      document.body.appendChild(this.container);
      this.addSceneCameraAndLight();
      this.addObject();
      this.initRenderer();
      this.addStatus();
      this.AddSceneTextCSS2DLabel();
      this.initOrbitController();
      // window.addEventListener
      window.addEventListener('resize', this.onWindowResize);
    addSceneCameraAndLight(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
      this.camera.position.set(0,20,20);
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xf0f0f0);
      const light = new THREE.DirectionalLight(0xffffff, 1);
      this.scene.add(this.camera);
      this.scene.add(light);
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.container.appendChild(this.renderer.domElement);
    addStatus(){
      this.stats = new Stats();
      this.container.appendChild(this.stats.dom);
    // 添加测试物体，并设置他们的层为 0 1 2
    addObject(){
      const mesh = new THREE.Mesh(new THREE.BoxGeometry(10,10,10),
          new THREE.MeshLambertMaterial({color:'#f00'}))
      this.scene.add( mesh);
    initOrbitController(){
     // new OrbitControls( this.camera, this.renderer.domElement );
      new OrbitControls( this.camera, this.css2DLabelRenderer.domElement );
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.CSS2DLabelOnWindowSize();
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
      this.stats.update();
    render() {
      this.renderer.render(this.scene, this.camera);
      this.CSS2DLabelRender();
    AddSceneTextCSS2DLabel( ) {
      this.css2DLabelRenderer = new CSS2DRenderer();
      this.css2DLabelRenderer.setSize( window.innerWidth, window.innerHeight );
      this.css2DLabelRenderer.domElement.style.position = 'absolute';
      this.css2DLabelRenderer.domElement.style.top = '0px';//信息弹窗界面高度一半
      this.css2DLabelRenderer.domElement.style.left = '0px';//信息弹窗界面宽度一半
      //this.css2DLabelRenderer.domElement.style.pointerEvents = 'none';
      document.body.appendChild( this.css2DLabelRenderer.domElement );
      const labelDiv = document.createElement( 'div' );
      labelDiv.className = 'label';
      labelDiv.identifierName = 'label';
      labelDiv.textContent = 'CSS2D Label： Test ...';
      labelDiv.style.marginTop = '-1em';
      const css2dLabel = new CSS2DObject( labelDiv );
      css2dLabel.position.set( 3, 3, 0 );
      labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
      this.scene.add( css2dLabel );
      const btnDiv = document.createElement( 'button' );
      btnDiv.className = 'btn';
      btnDiv.identifierName = 'btn';
      btnDiv.textContent = 'Btn： Click ...';
      btnDiv.style.marginTop = '-1em';
      btnDiv.style.zIndex = 1000;
      const css2dBtn = new CSS2DObject( btnDiv );
      css2dLabel.position.set( 3, 0, 0 );
      this.scene.add( css2dBtn );
    CSS2DLabelRender() {
      if (this.css2DLabelRenderer != null) {
        this.css2DLabelRenderer.render( this.scene, this.camera );
    CSS2DLabelOnWindowSize() {
      if (this.css2DLabelRenderer != null) {
        this.css2DLabelRenderer.setSize(window.innerWidth, window.innerHeight);
    TestClick() {
      console.log('Click...');
  // beforeDestroy 废弃，使用 beforeUnmount
  beforeUnmount() {
    this.container = null;
    this.stats = null;
    this.camera = null;
    this.scene = null;
    this.renderer = null;
    this.theta = null;
    this.radius = null;
    console.log("beforeUnmount");
</script>
<style>
#app {
  text-align: center;
  height: 100%;
  /*初始化样式*/
  margin: 0;
  padding: 0;
html {
  /*用于 获取 屏幕的可视宽高*/
  width: 100%;
  height: 100%;
  overflow: hidden;
</style>
                    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 与 Orbit
import * as THREE from 'three'
import { CSS2DRenderer , CSS2DObject } from 'three-css2drender'
let scene = new THREE . Scene ( )
// init CSS2DRenderer
labelRenderer = new CSS2DRenderer ( ) ;
labelRenderer . setSize ( window . innerWidth , window . innerHeight ) ;
labelRenderer . domElement . style . position = 'a
				
CSS2DRenderer
这是一个2D的render，可以在页面中渲染出一个div标签。下图中的城市名称就是渲染出来的，所以地图旋转的时候文字依然能够保持直立和水平。很实用的一个功能。
    let laberDiv = document.createElement('div');//创建div容器
    laberDiv.className = 'label';
    laberDiv...




    

使用CSS2DObject创建文字
1 引入CSS2DObject, CSS2DRenderer
import { CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer"
2 render初始化
    initCSSRender() {
      this.CSSRender ...
				
最近需要给自个儿项目的模型加上标签，来显示一些有的没的的数据。
去例子萌里瞄了一眼，发现了css2dlabel 这个例子。
远瞅是这样的！其实近瞅也这样，这个顶着一个moon的月亮会绕着这个地球一直旋转，上面的标签也会和他一起移动。（我总感觉应该顶一个奋斗当标签）
闲言少叙，来看看咋用的。
拿月球举例子吧
生成球。这个瞄一眼应该不会有太大的问题。
shininess。默认是30，看起来会有...
				
参考博文：Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换
https://blog.csdn.net/u014361280/article/details/124544320?spm=1001.2014.3001.5501
一、简单介绍
Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍， three.js （webgl）透视视角和正交视角，并且实现简单把当前透视角转为正交视角，然后在切换回来的透视视角的原理案例，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
二、实现原理
1、场景构建三要素，scene、camera 和 renderer
2、其中 camera ，会根据需要先创建一个透视camera，然后根据转换，切换到正交camera
3、然后通过 renderer 中 透视camera 或者 正交camera 视角渲染，从而实现透视视角转为正交视角 view 的渲染
Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍， three.js （webgl）入门的第二个代码程序，实现一个汽车模型的加载，以及汽车模型的简单展示，简单的模型汽车行驶，并可以修改汽车模型的颜色等，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
二、实现原理
1、场景构建三要素，scene、camera 和 renderer
2、模型加载器，这里使用的是 .glb 模型，所以使用的是GTLFLoader() 加载器，把汽车模型加载出来
3、材质 Material 的使用，这里通过材质赋给汽车模型，然后通过修改汽车的颜色，从而实现，汽车模型颜色的修改
4、汽车的模拟行驶，是通过，汽车车轮的旋转（汽车是原地旋转） 和 地面网线的移动实现
5、汽车多角度的观察，以及放大缩小，基本上都是通过 OrbitController 控制 Camera 位置远近灯变化实现的
				
服务器需要访问称为entropy的postgres数据库。 我可以为数据库提供架构，也可以编辑自己的架构以使其与我的类似。 现在，它所持有的只是对象类型的定义。 这些对象在启动时获取并加载到游戏中。
 要运行服务器，请在基本文件夹中运行npm install，然后在节点server.js中运行。 （请记住，package.json并不总是最新的，因此可能需要npm install-保存所有缺少的库）。
 客户端要求您从下载three.js并将该文件夹放在客户端文件夹中。
				
最近再做项目的时候，采用vue + three.js进行开发大型的3d场景项目，该项目中涉及到需要为建筑中的元素添加标签说明一些信息、名称，遂决定使用three.js的CSS2DRenderer和CSS2DObject进行标签的绘制，用的代码如下：
function makeCSS2DObject(position, radius, text) {
    const div = document.createElement( 'div' );
    div.className = 'scene-la
				
three.js是一款开源的JavaScript 3D引擎，它可以用于在WebGL上呈现交互式三维图形。而WebGL是一种允许浏览器在不使用插件的情况下呈现3D图像和图形的JavaScript API。这意味着我们可以在Web浏览器中使用three.js和WebGL创建有趣的3D场景和游戏。
机房和机柜一般是指计算机设施管理中的硬件部分，用于存储和运行服务器、网络设备、数据库等计算机设备，为企业和组织提供IT支持。在机房中，使用three.js和WebGL可以创建许多有用的可视化场景，包括监视和管理设备、跟踪设备活动、查看网络拓扑图等。通过这种方式，机房的管理者可以更轻松地监控和管理其设备，提高设备利用率并降低维护成本。
总之，使用three.js和WebGL可以通过在机房环境中创建交互式3D场景来改善设备管理和监控，从而使该行业更加智能、高效。
				Git  常见错误 之 error: src refspec xxx does not match any / error: failed to push some refs to  简单解决方法
					95538
            【海量数据挖掘/数据分析】之 K-Means 算法（K-Means算法、K-Means 中心值计算、K-Means 距离计算公式、K-Means 算法迭代步骤、K-Means算法实例）
            【海量数据挖掘/数据分析】之 决策树模型（决策树模型、决策树构成、决策树常用算法、决策树性能要求、信息增益、信息增益计算公式、决策树信息增益计算实例）
            【海量数据挖掘/数据分析】之 贝叶斯信念网络（贝叶斯信念网络、有向无环图、贝叶斯公式、贝叶斯信念网络计算实例）