Question

当我移动光标时，精灵可见但不能与光标点一起正确移动。它正朝着相反的方向发展。请帮忙。

<style>
  .blockHead:after {
    color: #4D81BF;
    border-left: 20px solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    display: inline-block;
    content: '';
    position: absolute;
    right: -20px;
  }
    .blockHead {
    background-color: #4D81BF;
    width: 150px;
    height: 40px;
    display: inline-block;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    /* align horizontal */
    align-items: center;
    /* align vertical */
  }

  .blocktext {
    color: white;
    font-weight: bold;
    padding-left: 10px;
    font-family: Arial;
    font-size: 11;
  }
</style>
<div class="blockHead">
  <span class="blocktext">
    ABC Team
  </span>
</div>

Answer 1

每当某个东西在3D世界中“朝着相反的方向移动”时，否则它是有用的：

mouse.x = ( event.clientX / window.innerWidth ); 
mouse.y = ( event.clientY / window.innerHeight ); 

//mouse is now somewhere between 0..1 for both x and y

//if you want this to go in the opposite direction
mouse.x = 1 - mouse.x;
mouse.y = 1 - mouse.y;


//if it goes from -1 to 1 you scale it:
mouse.x = mouse.x * 2 - 1; //first it goes from 0..2 then -1...1


//reversing this is
mouse.x = -mouse.x;

另一方面：

sprite1.position.set( event.clientX *(-.4) , event.clientY *(.4)

很难实现。看起来你的屏幕坐标以像素为单位投射到一些世界单位（否则我不确定你会让它们显示出来）。如果您只在正范围内工作，则翻转-4到4会将其移到屏幕外。您需要添加偏移量，例如减去8。

精灵在three.js r71中没有与cusor一起移动

1 个答案: