potree-sdk/src/custom/modules/panos/Panorama1.js

import * as THREE from "../../../libs/three.js/build/three.module.js";


var texLoader = new THREE.TextureLoader()



let standardMarkerMat = new THREE.MeshBasicMaterial({side: THREE.DoubleSide , map:texLoader.load('../resources/textures/marker.png') ,transparent:true})
let panoHeight = 2.3;
let planeGeo = new THREE.PlaneBufferGeometry(1,1);



let sg = new THREE.SphereGeometry(1, 8, 8);


let sm = new THREE.MeshBasicMaterial({side: THREE.BackSide});
var rot90 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0), Math.PI/2); //这里旋转还是基于原先的坐标轴，因为是先有图片的旋转后有skybox整体的旋转。但是角度不是负的是正的。









class Panorama{

	constructor(o){//file, time, longitude, latitude, altitude, course, pitch, roll
		this.file = o.file;
		this.time = o.time;
		this.longitude = o.long;
		this.latitude = o.lat;
		this.altitude = o.alt;
		this.course = o.course;
		this.pitch = o.pitch;
		this.roll = o.roll;
        this.transform = o.transform
		this.mesh = null;
        
        
        let xy = this.transform.forward([this.longitude, this.latitude]);  
        this.position = new THREE.Vector3(xy[0], xy[1], o.alt) 
        this.build()
	}
    
    
    build(){
         

        let mesh = new THREE.Mesh(sg, sm);
        mesh.position.copy(this.position)
        mesh.scale.set(1, 1, 1);
        mesh.material.transparent = true;
        mesh.material.opacity = 0.75;
        mesh.pano = this;

        { // orientation
            var {course, pitch, roll} = this;
            mesh.rotation.set(
                THREE.Math.degToRad(+roll + 90),
                THREE.Math.degToRad(-pitch),
                THREE.Math.degToRad(-course + 90),
                "ZYX"
            );
            //add 
            var quaternion = new THREE.Quaternion().multiplyQuaternions(mesh.quaternion,  rot90);//改  为球目全
            this.panoMatrix = new THREE.Matrix4().makeRotationFromQuaternion(quaternion) 
        
        } 
        this.mesh = mesh;
        
        
         
        let marker = new THREE.Mesh(planeGeo, standardMarkerMat)
            
            marker.position.copy(mesh.position);
              
            marker.position.z -= panoHeight
            marker.scale.set(2,2,2) 
            
        this.marker = marker    
    }
};

export default Panorama