锐客网

  1. 首页 > it技术 > >

three.js模型拖拽旋转

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) {
//世界坐标转屏幕坐标
【three.js模型拖拽旋转】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();
}

    推荐阅读


    上一篇：一场雨的告白

    下一篇：一个人有哪八种天赋