0

I am moving the vertices of a shape on mouse move and this works well. However, when a rotation is applied to the shape, the vertices move along the wrong axis.

Created a codesandbox.io here: https://codesandbox.io/embed/gatsby-starter-default-l16ui

The two files to concern yourself with is index.js in the page directory and shape.js in the components directory.

Move your cursor around the screen and you can see it reacts, however in the wrong direction.

Set radiansY to 0 and the shape will rotate back to its original position. Now try moving your cursor and it should react to the cursor correctly.

UPDATE: I updated the Code Sandbox to convert the added vector from world to local space in shape.js on line 47, but this places all the shapes into one spot now.

const changedPoint = self.worldToLocal(point.clone())

  • Please include a tag for the appropriate `react` library you're using. It may help both you and us if you create a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example), rather than sharing your entire project. Reducing your problem may expose a simple solution. – TheJim01 Jul 11 '19 at 16:31
  • I don't have enough reputation to tag `react-three-fiber`, since it hasn't been tagged before. I will make the code sandbox a bit cleaner, thanks! –  Jul 11 '19 at 16:41
  • Before I add the tag, could you please ensure none of the existing tags would serve the same purpose? – TheJim01 Jul 11 '19 at 16:59
  • None of the existing tags seem to serve the same purpose as describing the react library. –  Jul 11 '19 at 17:07

1 Answers1

-1

From reading your description, it sounds like you are moving the object in object space instead of worldspace. There are 2 methods that may help. Object.localToWorld and .worldToLocal.

Try transforming your movement vector using object.worldToLocal(yourMovementVector), before you add the vector to your object.position ?

edit: some feedback about coding style:

Try to avoid code like this:

  const vertex1 = self.geometry.vertices[1].clone()
    if (originalV1 === undefined) {
      setOriginalV1(vertex1)
      mousePosition = vertex1.add(changedPoint)
    } else {
      mousePosition = originalV1.clone().add(changedPoint)
    }

that should be in a function.. Also .clone() is an expensive operation. Also, pre-init originalV1... Just .clone() the geometry once, instead of .cloning() each of its vertices. AFAIK, .clone() does that for you.

You could replace that whole file with:

if(!originalGeometry)originalGeometry = geometry.clone()
for(let i=0;i<geometry.vertices.length;i++)
geometry.vertices[i].copy(originalGeometry.vertices[i]).add(changedPoint);
geometry.needsUpdate = true;

But also.. you probably don't even need to do this vertex munging stuff... Just make a set of super long cubes that extend off to the horizon, and set your camera.far to be large enough that the cubes perspectively vanish down to that point.

Here's an example:

https://codesandbox.io/embed/threejs-simple-template-mousey-cubes-vmx91

manthrax
  • 4,918
  • 1
  • 17
  • 16
  • This corrects the axis on which the shape moves, however now all my shapes are now in the same position! –  Jul 11 '19 at 16:58
  • Sounds like you've got another bug. Maybe post an updated sandbox? – manthrax Jul 11 '19 at 17:46
  • Here's an updated sandbox: https://codesandbox.io/embed/gatsby-starter-default-l16ui –  Jul 11 '19 at 17:58
  • Hard to tell what you are trying to do, but it looks complicated. Do you need to be transforming vertices and such inside the shape class? Seems like you want to just make some cubes, and move them around by manipulating .position – manthrax Jul 11 '19 at 20:00
  • I don't think I can move the position of the shape, since all these shapes one vertex that mets at one point. That creates the effect I need. Is there anything I can clear up to make it less complicated? –  Jul 11 '19 at 20:40
  • I updated my answer with some tips, and an example of a different approach. – manthrax Jul 12 '19 at 04:22