Three.js函数-转换为接受不同的初始旋转 [英] THREE.js function - convert to accept a different initial rotation

问题描述

我正在尝试将此处http://benchung.com/smooth-mouse-rotation-three-js/找到的代码转换为AFrame组件。

如果初始旋转为‘0 0 0’，这一切都很好，但现在我正在尝试设置不同的初始旋转。

@Piotr请为我准备一份fiddle

但基本上我希望能够设置初始旋转，然后使用函数的其余部分在单击和拖动时旋转对象。

AFRAME.registerComponent('drag-rotate',{
    schema : { 
      mouseSpeed : {default:1},
      touchSpeed : {default:2},
      rotation   : {type: 'vec3'},
      disabled: {default: false}
    },
    windowHalfX: window.innerWidth / 2,
    windowHalfY: window.innerHeight / 2,
    targetRotationX:0,
    targetRotationOnMouseDownX:0,
    targetRotationY:0,
    targetRotationOnMouseDownY: 0,
    mouseX:0,
    mouseXOnMouseDown:0,
    mouseY: 0,
    mouseYOnMouseDown: 0,
    init : function(){
      this.ifMouseDown = false
      document.addEventListener('touchstart',this.onTouchStart.bind(this))
      document.addEventListener('touchend',this.onTouchEnd.bind(this))
      document.addEventListener('touchmove',this.onTouchMove.bind(this))
      document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this))
      window.addEventListener( 'resize', this.onWindowResize.bind(this) )
    },
    update: function (oldData) {
      if(!AFRAME.utils.deepEqual(oldData.rotation, this.data.rotation)){
        this.el.setAttribute('rotation',  this.data.rotation)
        this._targetRotation = this.el.object3D.rotation.clone()
        this.targetRotationX = this._targetRotation.x
        this.targetRotationY = this._targetRotation.y
      }
    },
    remove: function() {
      
      document.removeEventListener('touchstart',this.onTouchStart.bind(this))
      document.removeEventListener('mousedown',this.OnDocumentMouseDown.bind(this))
      window.removeEventListener( 'resize', this.onWindowResize.bind(this))
    },
    onWindowResize: function () {
      this.windowHalfX = window.innerWidth / 2
      this.windowHalfY = window.innerHeight / 2
    },
    OnDocumentMouseDown : function(event){

      this.ifMouseDown = ['A-SCENE', 'CANVAS'].includes(event.target?.tagName)

      if(this.ifMouseDown){
        document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this))
        document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this))
        this.mouseXOnMouseDown = event.clientX - this.windowHalfX
        this.targetRotationOnMouseDownX = this.targetRotationX

        this.mouseYOnMouseDown = event.clientY - this.windowHalfY
        this.targetRotationOnMouseDownY = this.targetRotationY
      }

    },
    OnDocumentMouseUp : function(){
      this.ifMouseDown = false
      document.removeEventListener('mouseup',this.OnDocumentMouseUp.bind(this))
      document.removeEventListener('mousemove',this.OnDocumentMouseMove.bind(this))
    },
    OnDocumentMouseMove : function(event)
    {
      if(this.ifMouseDown){
        this.mouseX = event.clientX - this.windowHalfX;
        this.mouseY = event.clientY - this.windowHalfY;

        this.targetRotationY = this.targetRotationOnMouseDownY + (this.mouseY - this.mouseYOnMouseDown) * this.data.mouseSpeed/1000
        this.targetRotationX = this.targetRotationOnMouseDownX + (this.mouseX - this.mouseXOnMouseDown) * this.data.mouseSpeed/1000
      }
    },
    onTouchStart: function(event){  

      if (event.touches.length == 1) {
        this.ifMouseDown = ['A-SCENE', 'CANVAS'].includes(event.target?.tagName)
        this.x_cord = event.touches[ 0 ].pageX
        this.y_cord = event.touches[ 0 ].pageY

        document.addEventListener('touchend',this.onTouchEnd.bind(this))
        document.addEventListener('touchmove',this.onTouchMove.bind(this))
        this.mouseXOnMouseDown = event.touches[ 0 ].pageX - this.windowHalfX
        this.targetRotationOnMouseDownX = this.targetRotationX
        this.mouseYOnMouseDown = event.touches[ 0 ].pageX - this.windowHalfY
        this.targetRotationOnMouseDownY = this.targetRotationY

      }
    },
    onTouchMove: function(event){
      if(this.ifMouseDown){
        this.mouseX = event.touches[ 0 ].pageX - this.windowHalfX;
        this.mouseY = event.touches[ 0 ].pageY - this.windowHalfY;

        this.targetRotationY = this.targetRotationOnMouseDownY + (this.mouseY - this.mouseYOnMouseDown) * this.data.touchSpeed/1000
        this.targetRotationX = this.targetRotationOnMouseDownX + (this.mouseX - this.mouseXOnMouseDown) * this.data.touchSpeed/1000
      }  
    },
    onTouchEnd: function(event){
      document.removeEventListener('touchend',this.onTouchEnd.bind(this))
      document.removeEventListener('touchmove',this.onTouchMove.bind(this))
      this.ifMouseDown = false
    },
    tick: function(){

      if(this.data.disabled)
        return
 
     this.el.object3D.rotation.y += ( this.targetRotationX - this.el.object3D.rotation.y ) * 0.1

     this.finalRotationY = (this.targetRotationY - this.el.object3D.rotation.x)
    
     if (this.el.object3D.rotation.x  <= 1 && this.el.object3D.rotation.x >= -1 ) 
      this.el.object3D.rotation.x += this.finalRotationY * 0.1
        
     if (this.el.object3D.rotation.x  > 1 ) 
      this.el.object3D.rotation.x = 1
        
     if (this.el.object3D.rotation.x  < -1 ) 
      this.el.object3D.rotation.x = -1
      
    },
  });

我在更新函数中使用AFrame设置的初始角度与此处设置的角度不同。即禁用此组件

已启用

如果我像示例代码中那样将这些值置零，则循环为‘0 0 0’，它正常工作。

    this.el.setAttribute('rotation',  this.data.rotation)
    this._targetRotation = this.el.object3D.rotation.clone()
    this.targetRotationX = 0
    this.targetRotationY = 0

推荐答案

此神奇代码起作用

 this.el.object3D.rotation.y += ( (this._targetRotation.y + this.targetRotationX) - this.el.object3D.rotation.y ) * 0.1
 this.finalRotationY = ((this._targetRotation.x + this.targetRotationY) - this.el.object3D.rotation.x)

这篇关于Three.js函数-转换为接受不同的初始旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！