threejs場景中的場景

這兩天導入adb模型，發現導入模型時直接導入模型中的對象有點問題，左鍵拖動，旋轉的方向只能是左右翻轉，而當把整個場景都加載進來時則可以正常旋轉。

loadCollada(that) { // 加載Collada模型
        const loader = new ColladaLoader()
        // public\models\dae\hysopendoor.dae
        loader.load(`${that.publicPath}models/dae/hysopendoorv2.dae`, LoadResult => {
            MyThreeInit.loadCollada_call(that, LoadResult)
        })
    },
    loadCollada_call(that, LoadResult) {
        // console.log(LoadResult)

        // 直接拿場景里的對象旋轉總是有問題，只能在z軸旋轉，不曉得為什么
        // that.mesh = LoadResult.scene.children[0].clone()

        // 這里應該可以不用克隆也行
        that.mesh = LoadResult.scene.clone()
        // console.log(that.mesh)

        // 默認加載到場景里變的好小，好像自動做了縮小設置，這里手動設置縮小一半，顯示效果剛剛好
        that.mesh.scale.set(0.5, 0.5, 0.5)
        that.scene.add(that.mesh)
        
        let box = new THREE.Box3().setFromObject( that.mesh );
        // console.log(box)

        // 最小坐標和最大坐標算長寬高
        let lx = Math.abs(box.min.x-box.max.x)
        let ly = Math.abs(box.min.y-box.max.y)
        let lz = Math.abs(box.min.z-box.max.z)

        let cx = 0 - box.min.x - lx / 2
        let cy = 0 - box.min.y - ly / 2
        let cz = 0 - box.min.z - lz / 2

        that.mesh.position.set(cx, cy, cz);

        // 不要修改對象旋轉 然后給旋轉后的對象偏移位置 太麻煩了 直接給相機設置位置
        // that.mesh.rotateZ(Math.PI);
        // that.mesh.position.set(0 + lx / 2,0 + ly / 2 ,0 + lz / 2);
        
        // 不曉得為啥 分開設置效果總是不對 mesh.position.set 就可以准確定位
        // that.mesh.translateZ(-(box.min.z-box.max.z) / 10);
        // that.mesh.translateY((box.min.y-box.max.y) * 2);
        // that.mesh.translateX((box.min.x-box.max.x) / 2);

        that.mesh2array()
    },

直接整個場景導進來也還是存在一個問題，比如我想讓攝像機看向右上角攝像頭球機的位置，使用球機.position屬性獲取到的數值其實是內部場景中的位置，還得轉換為外部場景中的位置，否則攝像機.lookAt方法看向的位置就不對了

mesh對象的position獲取到的數值是

4.434871
332.7404
92.34173

 

而box方法是獲取對象在外部場景中的位置

box(mesh) {
        let box = new THREE.Box3().setFromObject( mesh );
        // console.log(box)
  
        // 最小坐標和最大坐標算長寬高
        let lx = Math.abs(box.min.x - box.max.x)
        let ly = Math.abs(box.min.y - box.max.y)
        let lz = Math.abs(box.min.z - box.max.z)
        // console.log({lx, ly, lz})

        let cx = box.min.x + lx / 2
        let cy = box.min.y + ly / 2
        let cz = box.min.z + lz / 2

        return {
            min: box.min,
            max: box.max,
            size: {
                x: lx,
                y: ly,
                z: lz
            },
            center: new THREE.Vector3(cx, cy, cz)
        };
    },

 

 

 不過這個中心點的位置還是需要加上一個內部場景的偏移量 ， that.mesh就是內部場景對象，他在外部場景中的位置加上球機在場景中的中心點位置，就是球機在外部場景中的位置了

let box2 = MyThreeTool.box(that.meshMap.camera)
        console.log(box2)

        that.mycameraPosition = new THREE.Vector3(
            that.mesh.position.x + box2.center.x, 
            that.mesh.position.y + box2.center.y, 
            that.mesh.position.z + box2.center.z) 

 

球機的position

 計算后的  mycameraPosition  的位置，這兩個位置的差距還是蠻大的

 

 下面將球機聚焦，這個bx by bz可以自己慢慢試出來一個合適的位置，或者手動調整到一個合適的位置，然后獲取當前視圖的相機位置

let bx = -68
      let by = 57
      let bz = -106
      this.camera.position.set(bx, by, bz);
      this.camera.lookAt(this.mycameraPosition);
      console.log(this.meshMap.camera)
      console.log(this.mycameraPosition)
      this.render();

addEventListener('click', () => {
      this.bool = false
      console.log(this.camera)
    });