threejs
/
28dianyunpcd copy.html

<!--本课视频地址 15 -->
<!DOCTYPE html>
<html>

<head>
  <title>动力IT实训-threejs-015</title>
  <meta charset="UTF-8" />
  <!-- <script type="module" charset="UTF-8" src="../../libs/three.js/Three.js"></script> -->
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script type="x-shader/x-vertex" id="vertexshader">
      attribute float scale;
      uniform mat4 myK;
      void main() {
          vec4 mvPosition =  modelViewMatrix * vec4( position, 1.0 );
          //gl_PointSize = scale * ( 300.0 / - mvPosition.z )
          gl_PointSize = 1.0;
          //gl_PointSize = myR;
          gl_Position =  projectionMatrix * mvPosition;
      }
    </script>
  <script type="x-shader/x-fragment" id="fragmentshader">
      uniform vec3 color;
      void main() {
          if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.5 ) discard;
          gl_FragColor = vec4( color, 1.0 );
      }
    </script>
  <script type="importmap">
      {
        "imports": {
          "three": "./src/Three.js"
        }
      }
    </script>
  <!--我们将把threejs渲染的效果显示在这个div中-->
  <div id="puiedu-webgl-output"></div>

  <div id="myStats"></div>

  <script type="module">
    import dat from "./libs/lil-gui.module.min.js";
    import * as THREE from "./src/Three.js";
    import { OrbitControls } from "./jsm/controls/OrbitControls.js";
    import { PCDLoader } from "./jsm/loaders/PCDLoader.js";
    import Stats from "./libs/stats.module.js";

    var stats = new Stats();
    document.getElementById("myStats").appendChild(stats.domElement);
    var myColor = new THREE.Color(0x7777ff);
    var camera,
      controls = {};
    var scene = new THREE.Scene();
    // scene.background = new THREE.Color(0x333333)

    var render = new THREE.WebGLRenderer();

    function initCamera (val = true) {
      if (val) {
        scene.background = new THREE.Color(0x005500);
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.x = 10;
        camera.position.y = 10;
        camera.position.z = 10;
        camera.up = new THREE.Vector3(0, 0, 1);
        camera.lookAt(scene.position);
        scene.add(camera);
        controls.object = camera;
      } else {
        fetch("./bev测试数据一套/params.json")
          .then((res) => {
            return res.json();
          })
          .then((res) => {
            console.log(res);
            var strR = res.cam_back.extrinsic.r;
            var strT = res.cam_back.extrinsic.t;
            var strK = res.cam_back.intrinsic.k;
            strR = strR.split(",").map((item) => parseFloat(item));
            strT = strT.split(",").map((item) => parseFloat(item));
            strK = strK.split(",").map((item) => parseFloat(item));
            // var TT = new THREE.Matrix4().makeTranslation(...strT)
            var KK = new THREE.Matrix3();
            KK.set(...strK);
            KK = new THREE.Matrix4().setFromMatrix3(KK);
            var RR = new THREE.Matrix3();
            RR.set(...strR);
            RR = new THREE.Matrix4().setFromMatrix3(RR)

            var cvW = render.domElement.width
            var cvH = render.domElement.height
            render.domElement.width = 1920
            render.domElement.height = 1080

            camera = new THREE.PerspectiveCamera(59.7, window.innerWidth / window.innerHeight, 0.1, 10000);
            camera.up = new THREE.Vector3(0, 0, 1);
            var look = new THREE.Vector3(0, 0, 1).applyMatrix4(RR);
            camera.lookAt(look);
            console.log(camera);
            //   camera.translateX(strT[0]);
            //   camera.translateY(strT[1]);
            //   camera.translateZ(strT[2]);
            camera.position.set(...strT)
            var old = camera.projectionMatrix.clone()
            console.log(old.elements)
            var projectionMatrix = camera.projectionMatrix
            projectionMatrix.multiply(KK)
            console.log(camera.projectionMatrix.elements)
            console.log(projectionMatrix.elements)

            scene.background = new THREE.TextureLoader().load("./bev测试数据一套/back.jpg");

            camera.updateProjectionMatrix();
            scene.add(camera);
            const helper = new THREE.CameraHelper(camera);
            scene.add(helper);

            //   ---------------------------------画框start---------------------------------
            fetch("./bev测试数据一套/sd_result.json")
              .then((res) => {
                return res.json();
              })
              .then((res) => {
                res.items.forEach((item) => {
                  var x = item.meta.geometry.positionX;
                  var y = item.meta.geometry.positionY;
                  var z = item.meta.geometry.positionZ;
                  var l = item.meta.geometry.length;
                  var w = item.meta.geometry.width;
                  var h = item.meta.geometry.height;
                  const geometry = new THREE.BoxGeometry(l, w, h);
                  const edges = new THREE.EdgesGeometry(geometry);
                  const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xffffff }));
                  var myBox = new THREE.Mesh(
                    geometry,
                    //   new THREE.MeshBasicMaterial({
                    //     color: 0xffffff,
                    //     transparent: true,
                    //     opacity: 0.0,
                    //   })
                    new THREE.ShaderMaterial({
                      uniforms: {
                        color: { value: new THREE.Color(0xff55ff) },
                        myK: { value: KK },
                      },
                      vertexShader: document.getElementById("vertexshader").textContent,
                      fragmentShader: document.getElementById("fragmentshader").textContent,
                    })
                  );
                  // line.name = "shiqiming"
                  // myBox.name = "shiqiming"
                  line.position.set(x, y, z);
                  myBox.position.set(x, y, z);
                  scene.add(myBox);
                  scene.add(line);
                });
              });
            //   ---------------------------------画框end---------------------------------


          });
      }
    }
    initCamera();
    controls = new OrbitControls(camera, render.domElement);
    controls.update();
    render.setClearColor(new THREE.Color(0xffffff));
    render.setSize(window.innerWidth, window.innerHeight);
    render.shadowMap.enabled = true;

    document.getElementById("puiedu-webgl-output").appendChild(render.domElement);

    var axes = new THREE.AxesHelper(100);
    scene.add(axes);

    function getTexture () {
      // var texture = new THREE.TextureLoader().load("./sprite0.png")
      var texture = new THREE.TextureLoader().load("./disc.png");
      texture.colorSpace = THREE.SRGBColorSpace;
      return texture;
    }

    // const dir = new THREE.Vector3(0, 0, 1);
    // dir.normalize();
    // const origin = new THREE.Vector3(7.5, 0, 0);
    // const length = 2.5;
    // const hex = 0xffff00;
    // const arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex);
    // scene.add(arrowHelper);

    class PickHelper {
      constructor() {
        this.raycaster = new THREE.Raycaster();
        this.pickedObject = null;
        this.pickedObjectSavedColor = 0;
      }
      pick (normalizedPosition, scene, camera, time) {
        // 恢复上一个被拾取对象的颜色
        // line.material.color.set(new THREE.Color(0xffffff))

        // 发出射线
        this.raycaster.setFromCamera(normalizedPosition, camera);
        // 获取与射线相交的对象
        var arr = scene.children.filter((item) => {
          return item.type === "Mesh";
        });
        const intersectedObjects = this.raycaster.intersectObjects(arr);
        if (intersectedObjects.length) {
          // 找到第一个对象，它是离鼠标最近的对象
          // console.log(intersectedObjects)
          console.log(11111);
          intersectedObjects.forEach((item) => {
            if (item.object.name === "shiqiming") {
              // this.pickedObject = intersectedObjects[0].object;
              this.pickedObject = line;
              line.material.color.set(new THREE.Color(1, 0, 0));
            }
          });
          // console.log(this.pickedObject)
          // this.pickedObject.material.color.set(1, 1, 0, 1)
          // 保存它的颜色
          // this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
          // 设置它的发光为 黄色/红色闪烁
          // this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
        }
      }
    }

    {
      const geometry = new THREE.BoxGeometry(3, 3, 3);
      const material = new THREE.MeshPhongMaterial({
        color: new THREE.Color(1, 1, 1, 1),
      });

      const cube = new THREE.Mesh(geometry, material);
      cube.name = "qi";
      Object.keys(cube).forEach(item => {
      })
      scene.add(cube);
      cube.visible = false
    }

    const pickPosition = { x: 0, y: 0 };
    clearPickPosition();
    function getCanvasRelativePosition (event) {
      var canvas = render.domElement;
      const rect = canvas.getBoundingClientRect();
      return {
        x: ((event.clientX - rect.left) * canvas.width) / rect.width,
        y: ((event.clientY - rect.top) * canvas.height) / rect.height,
      };
    }

    function setPickPosition (event) {
      // console.log("click了")
      var canvas = render.domElement;
      const pos = getCanvasRelativePosition(event);
      pickPosition.x = (pos.x / canvas.width) * 2 - 1;
      pickPosition.y = (pos.y / canvas.height) * -2 + 1; // note we flip Y
      pickHelper.pick(pickPosition, scene, camera, new Date());
    }

    function clearPickPosition () {
      // 对于触屏，不像鼠标总是能有一个位置坐标，
      // 如果用户不在触摸屏幕，我们希望停止拾取操作。
      // 因此，我们选取一个特别的值，表明什么都没选中
      pickPosition.x = -100000;
      pickPosition.y = -100000;
    }
    var isChange = false;
    controls.addEventListener("change", () => {
      isChange = true;
    });

    window.addEventListener("click", (e) => {
      if (isChange) {
      } else {
        setPickPosition(e);
      }
      isChange = false;
    });

    // window.addEventListener('mousemove', setPickPosition);
    window.addEventListener("mouseout", clearPickPosition);
    window.addEventListener("mouseleave", clearPickPosition);

    window.addEventListener(
      "touchstart",
      (event) => {
        // 阻止窗口滚动行为
        event.preventDefault();
        setPickPosition(event.touches[0]);
      },
      { passive: false }
    );

    window.addEventListener("touchmove", (event) => {
      setPickPosition(event.touches[0]);
    });

    window.addEventListener("touchend", clearPickPosition);

    const loader = new PCDLoader();
    function createPoints (arr) {
      loader.load("./bev测试数据一套/00000000__2023-12-05-14-30-00__LIDAR_TOP__1701757800.700005.pcd", function (points) {
        points.material.size = 0.02;
        points.material.color = new THREE.Color(0xff55ff);
        scene.add(points);
      });
    }
    createPoints();

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(0, 60, 60);
    spotLight.castShadow = true;
    spotLight.intensity = 0.6;
    scene.add(spotLight);

    var ctrl = new dat();
    var flag = true;
    ctrl.add(
      {
        change: function () {
          flag = !flag;
          initCamera(flag);
        },
      },
      "change"
    );
    ctrl.add(
      {
        num: function () {
          var m = new THREE.Matrix4().makeRotationZ(1);
          camera.matrix = m;
          camera.updateProjectionMatrix();
          console.log(123123);
        },
      },
      "num"
    );


    const pickHelper = new PickHelper();

    function renderScene (time) {
      stats.update();
      controls.update();
      // pickHelper.pick(pickPosition, scene, camera, time)
      requestAnimationFrame(renderScene);
      render.render(scene, camera);
    }
    renderScene();

    window.addEventListener("resize", onWindowResize, false);

    function onWindowResize () {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      render.setSize(window.innerWidth, window.innerHeight);
    }
  </script>
</body>

</html>