需求：

１、實現元素跟隨指定物體位置進行位置變化

實現方案：

１--- Sprite 精靈

2 --- cavans 畫圖後建立模型貼圖

3 ---CSS2DRenderer渲染方式

4 --- 直接建立元素,在動畫函式內計算元素位置

目前所瞭解到的以上的方案都可實現,但還需根據實際的使用場景選擇使用

1,2 兩種實際是一種方式,Sprite就是針對這套東西封裝了一下.當然區別肯定是有的,反正我是木有用過精靈這個鬼東西.感覺要寫好大一堆東西

前三種方式已經有過記錄,這裡不再做記錄,

因為上述的需求是要求場景轉動的時候是以下圖標註的點進行變換,所以之前的幾種方案都無法達到預期效果(技術太low,也木有找到相應的原始碼參考,每次都是卡在最後的中心點問題上面)

皇天不負有心猿. 第四個方案總算是被我無意間找到了,也算是個比較基礎的實現方式

這裡針對地4總方案進行記錄

過程:

特別簡單,特別明瞭.

1. 寫好你的元素

        <div class="tests" >
        <div style="display: flex;">
        <div class="lines"></div>
        <div class="lines1"></div>
        <div style="background: forestgreen;"
 
>999</div>
        </div>
        </div>

2. 去到場景動畫,

然後就是找到你要掛載的模型,獲取到模型的2維座標,

然後就是計算了,再然後就是更改元素的位置了.

    update(){
        let halfWidth = window.innerWidth / 2;
        let halfHeight = window.innerHeight / 2;
        var idNode = this.scene.getObjectByName("box2") // 找模型
        var
 
 vector1 = idNode.position.clone().project(this.camera) // 獲取二維座標
        var htmls = document.getElementsByClassName("tests")[0] // 找元素
        // 計算座標引數
        var left = vector1.x * halfWidth + halfWidth
        var top = -vector1.y * halfHeight + halfHeight
　　　　　// 設定元素座標
        if(htmls){
        htmls.style = `display: flex;width:200px;position: absolute;left:${left}px;top:${top}px`
        }
    },
    animate() { // 實時更新動畫函式
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
      window.requestAnimationFrame(() => this.animate());
      this.update()
      TWEEN.update();
    },

搞定,搞定...

不知道有木有什麼缺陷,以後再說吧,反正目前是可以用了.

要是哪位大神知道怎麼改變CSS2DObject 物件的中心點的話,也跪求告知. 一直卡了很久

最後木有辦法才選擇用這種方式.總感覺動畫裡面去做太多計算好像不是很好的樣子.(也可能CSS2DRenderer 也是用這種方式進行封裝了也不一定.)以後有時間再看看原始碼吧