1

Three.js beginner here, I'm trying to create a 3d-ring like structure composed of separate meshes that I union together using CSG. I managed to place each of the separate meshes along a circle. How do I now rotate them so that the long side of each one is facing the center of the circle (I believe this is rotating about the object's y-axis)? The meshes are currently all facing the same direction, and what I have so far.

However, when I tried rotating one of them about the y-axis, it did not rotate inwards towards the circle as I expected. Instead, it rotated like this. It does not seem like it rotated from the center of the position it was previously at.

I tried the following code to get this result:

mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.updateMatrixWorld( true );
// Also tried "mesh.rotation.y = ((2 * Math.PI) / 10) * k;" instead of the following line:
mesh.rotateY(((2 * Math.PI) / 10) * k);
mesh.position.x = 25 * Math.cos((2 * k * Math.PI) / 10);
mesh.position.y = 0;
mesh.position.z = 25 * Math.sin((2 * k * Math.PI) / 10);
mesh.updateMatrixWorld( true );

Thanks in advance! (Also side note, if anyone understands why some parts of the meshes are randomly becoming non-existent/transparent, would be super helpful).

EDIT: JSFiddle Link

nithinaray
  • 11
  • 3
  • 1
    We'll need a fuller example of code to figure out why it's behaving the way you describe. Could be a lot of things: maybe the camera is looking down, or it's nested in a parent that has been rotated... hard to tell. Please post a working example on https://jsfiddle.net/ so others can better diagnose what the problem is. – M - May 05 '19 at 07:05
  • I added a link to the original post, not sure why there are errors when it runs on my computer... but I linked all the external files under resources and all the local code is there for you to see. – nithinaray May 05 '19 at 18:47
  • Your example is not working because for some reason the assets from `https://raw.githubusercontent.com` are being blocked (you can see all the errors by opening the dev console). Try replacing your external resources with assets from here https://gitcdn.link/ and you'll see the errors correcting themselves as you replace the URLS. – M - May 05 '19 at 20:52
  • Thanks! Made that change, but there are still some issues. Sorry, I'm new to JS and web in general so I'm unsure on how to fix the remaining issues. :( They're not as important for my main problem, if there's any way you could still help the relevant code is in the loadSvg function (lines 92-191 in the JS section). – nithinaray May 06 '19 at 02:16

0 Answers0