three.js模型拖拽旋转

 效果展示

通过判断鼠标像素坐标与模型中心点像素坐标进行计算角度（three.js版本125）

mousedown(e){

            this.dragingModel.center = this.worldToScreen(this.dragingModel.position); //模型中心点世界坐标转屏幕坐标

            this.dragingModel.angle0 = this.rotateAngle(this.dragingModel.center, new Vector2(e.layerX, e.layerY)); // 计算出初始角度

}

mousemove(e){

           this.dragingModel.angle = this.rotateAngle(this.dragingModel.center, new Vector2(e.layerX, e.layerY));//鼠标实时角度

           const offset = this.dragingModel.angle - this.dragingModel.angle0;

            this.dragingModel.rotateY(-offset);

             this.dragingModel.angle0 = this.dragingModel.angle;

}

worldToScreen(pos) {

        //世界坐标转屏幕坐标

        const standardVector = new Vector3().copy(pos).project(this.camera);

        const w = this.containerWidth / 2;

        const h = this.containerHeight / 2;

        return new Vector2(window.Math.round(standardVector.x * w + w), window.Math.round(-standardVector.y * h + h));

    }

rotateAngle(center, pos) {

        //计算旋转角度

        const off = new Vector2().copy(center).sub(pos);

        return off.angle();

    }