three.js使用四元数字显示被遮挡物体例子

要达到的效果
点的坐标相同，光圈在处理前被球面遮挡，处理后在球面显示。

处理前：

处理后：

核心代码实现

function createPointMesh( pos, texture ) {
     
     //创建点
        var material = new THREE.MeshBasicMaterial( {
            map: texture,
            transparent: true, //使用背景透明的png贴图，注意开启透明计算
            // side: THREE.DoubleSide, //双面可见
            depthWrite: false, //禁止写入深度缓冲区数据
        } );
        var planGeometry = new THREE.PlaneGeometry(0.5,0.5);
        var mesh = new THREE.Mesh( planGeometry, material );
        var size = radius * 0.04;//矩形平面Mesh的尺寸
        mesh.scale.set( size, size, size );//设置mesh大小
        //设置mesh位置
        mesh.position.set( pos.x, pos.y, pos.z );

         /**
         *核心代码
         **/
        // mesh在球面上的法线方向(球心和球面坐标构成的方向向量)
        var coordVec3 = new THREE.Vector3( pos.x, pos.y, pos.z ).normalize();
        // mesh默认在XOY平面上，法线方向沿着z轴new THREE.Vector3(0, 0, 1)
        var meshNormal = new THREE.Vector3( 0, 0, 1 );
        // 四元数属性.quaternion表示mesh的角度状态
        //.setFromUnitVectors();计算两个向量之间构成的四元数值
        mesh.quaternion.setFromUnitVectors( meshNormal, coordVec3 );
        return mesh;
    }