Position Mesh inside sphere, making textures fit

Questions
1

I’m trying to position a part of a texture that is being rendered on a portion of a SphereGeometry, inside a full SphereGeometry.

I attach a jsfiddle so you can see what I mean:

https://jsfiddle.net/ggL3uemh/23/

If you open the link, you will see that the smaller texture in the scene is a part of the bigger one.

The bigger one is rendered on a big full sphere.

The smaller one, is rendered on a portion of a sphere.

I want to give the smaller Mesh the proper position, rotation and scale so it can perfectly fit inside the sphere making it look like the smaller one isn’t even there.

I suspect the part of the sphere is not correct either…

this.videoCustomGeometry = new THREE.SphereBufferGeometry(500, 64, 64, 1, 1.8, 1, 0.9);
this.videoCustomGeometry.scale( - 1, 1, 1 );
I came close to find the position, using a raycaster and attaching the next code to the mousemove event:

this.raycaster.setFromCamera(this.mouse, this.camera);
var intersects = this.raycaster.intersectObjects([this.pano], false);
And then, I get the exact position where the smaller Mesh should be positioned, but I don’t know about the rotation, scale, or if the geometry the smaller Mesh is using is correct.

I’m stuck… thanks in advance!

2

Why not modelling the geometry with a tool like Blender? After importing in your three.js scene, you just overwrite the default materials with your custom ones.

I don’t know a reliable way to perform this fine adjustments directly in code. All approaches i can think of seem to be trial and error. I think it’s easier to do this in a content creation tool.

3

Hi Mugen and thanks again.

Finally, we ended up using 1K videos (aproximately, because they have different sizes) and positioning them in the sphere with the help of a skeleton project that we used specifically for this purpose.

In this project, we have a sphere with the texture where we want to draw the video on, and we have all the lat and lon parameters drawn on the scene as well, in yello squares.

Using some helpers, we can first determine what our geometry should be and then place the texture changing the lat/lon parameters of the mesh that is available on window as an object.

It was pretty quick an precise, if you need more information or want to see some code, give me a shout.

Cheers!

1 Like