区别

CSS3DObject、CSS3DSprite(精灵)、CSS2DObject的区别

• CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击

• CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击。

• 精灵面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。

CSS3DObject 旋转时文字相对正方体始终不动

 function _createBox13DLabel(object: THREE.Mesh) {
    const div = document.createElement("div");
    div.className = "red-box-label";
    div.textContent = "红色正方体";
    const earthLabel = new CSS3DObject(div);
    earthLabel.position.set(0, 0.2, 0.5);
    earthLabel.scale.set(0.01, 0.01, 0.01);
    object.add(earthLabel);
  }
1
2
3
4
5
6
7
8
9

CSS3DSprite 旋转时文字的相对正方体会改变位置

function _createBox13DLabel(object: THREE.Mesh) {
    const div = document.createElement("div");
    div.className = "red-box-label";
    div.textContent = "红色正方体";
    // CSS3DSprite;CSS3DObject
    const earthLabel = new CSS3DSprite(div);
    earthLabel.position.set(0, 0.2, 0.5);
    earthLabel.scale.set(0.01, 0.01, 0.01);
    object.add(earthLabel);
  }
1
2
3
4
5
6
7
8
9
10

其他部分逻辑可以参考2d的方法