大象

src/utils/three.js

@@ -15,6 +15,41 @@ import { Water } from "three/examples/jsm/objects/Water.js"; // 水面对象
 import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2.js";
 import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+
+// css3
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
+/* css3d 渲染 */
+function setCss3DRenderer(DOM) {
+
+  const css3DRender = new CSS3DRenderer()
+
+  css3DRender.resize = () => {
+
+    css3DRender.setSize(DOM.clientWidth, DOM.clientHeight)
+
+    css3DRender.domElement.style.zIndex = 0
+
+    css3DRender.domElement.style.position = 'relative'
+
+    css3DRender.domElement.style.top = -DOM.clientHeight + 'px'
+
+    css3DRender.domElement.style.height = DOM.clientHeight + 'px'
+
+    css3DRender.domElement.style.width = DOM.clientWidth + 'px'
+
+    css3DRender.domElement.style.pointerEvents = 'none'
+
+  }
+
+  css3DRender.resize()
+
+  DOM.appendChild(css3DRender.domElement)
+
+  return css3DRender
+
+}
+
+
 import {
   Line,
   LineDashedMaterial,
@@ -467,6 +502,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
   renderer.outputColorSpace = THREE.SRGBColorSpace;
   element.appendChild(renderer.domElement);
 
+  const css3DRenderer = setCss3DRenderer(element);
   // 轨道控制器（支持旋转/缩放/平移相机）
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
@@ -550,12 +586,47 @@ export function drawAxes(element, options = {}, ballCallBack) {
     for (let i = 1; i <= 5; i++) {
       const clone = mesh.clone(true);
       clone.position.set(sizeX / 5 * i, 0, 0);
+      setCss3dDOM(createDom("1"), clone.position);
       const clone2 = clone.clone(true);
       clone2.position.set(0, 0, sizeZ / 5 * i);
       gridGroup.add(clone);
       gridGroup.add(clone2);
     }
   }
+  function setCss3dDOM(DOM, position) {
+
+    const mesh = new CSS3DObject(DOM)
+
+    mesh.position.copy(position)
+
+    scene.add(mesh)
+
+    return mesh
+
+  }
+  // 创建dom
+  function createDom(text) {
+
+    const div = document.createElement('div')
+
+    const img = document.createElement('img')
+
+    img.src = `https://z2586300277.github.io/three-cesium-examples/` + '/files/author/z2586300277.png'
+
+    img.style.width = '10px'
+
+    img.style.height = '10px'
+
+    div.appendChild(img)
+
+    div.innerHTML += text
+
+    div.style.color = 'white'
+
+    return div
+
+  }
+
   // 根据配置添加每个面上的网格线
   // const color = 0xffffff,    //  0x244b78 2d578a
   const color = 0x2d578a,
@@ -974,6 +1045,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
   let rafId;
   const animate = () => {
     rafId = requestAnimationFrame(animate);
+    css3DRenderer.render(scene, camera);
     controls.update();
     // 水面动画（推动uniform的time）
     scene.userData.waterList.forEach(
@@ -1206,6 +1278,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
     scene,
     camera,
     renderer,
+    css3DRenderer,
     dispose, //  销毁 模型
     getGroups: () => styleGroups, //  获取 模型 分组点位
     collapsedXY: () => {