threejs 场景中添加指南针

让代码飞1926

已于 2024-03-01 11:45:38 修改

阅读量648

点赞数 9

分类专栏：问题和解决办法 Javascript Vue 文章标签：前端 threejs

于 2024-02-26 15:28:59 首次发布

本文链接：https://blog.csdn.net/qq_40596257/article/details/136300394

版权

问题和解决办法同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

Javascript

15 篇文章 0 订阅

订阅专栏

Vue

14 篇文章 1 订阅

订阅专栏

项目中使用的是一张图片，然后监听控制器的change事件，来修改图片的css属性rotate

使用js新建一个img标签，设置样式，然后添加到dom中

    const img = document.createElement("img");
    img.id = "Compass";
    img.src = compassImg;//提前引入
    img.draggable = false;//禁止拖拽
    img.style["user-select"] = "none";//禁止选中
    img.style.position = "fixed";
    img.style.top = "80px";
    img.style.left = "40px";
    img.style.width = "80px";
    img.style.height = "80px";
    const parentNode = document.querySelector(parentDom);
    parentNode.append(img);

监听事件（亲测旋转不会乱跳）

    this.map.controls.addEventListener("change", (e) => {
      var dir = new THREE.Vector3();
      var sph = new THREE.Spherical();
      map.camera.getWorldDirection(dir);
      sph.setFromVector3(dir);
      img.style.transform = `rotate(${THREE.Math.radToDeg(sph.theta) - 180}deg)`;
    });