Hi guys, new to the forum and seems like an amazing resource as I’m starting to love three.js and more specifically with react-three-fiber to use inside react apps as I have experience making react applications. I’ve been looking at various examples as I am trying to make a virtual tour and from what I’ve seen from Ppaul Henschel the creator of React-Three-Fiber and other examples that I’ve seen on this forum is that everyone is putting the code right into the index.js file. I was looking at the code provided by the user @drcmda and what I’m trying to figure out if there is a way to divide the code of the dome, portals etc into react components in order to have code that is easier to expand or replicate. Any ideas or resources that I could read and understand would be amazing. Thank you in advance. Edit: Also as I’m working with the code example provided by @drcmda, I’m encountering various problems trying to expand on the code. If there are any resources for how to create virtual tours using three.js or react three fiber it would be greatly appreciated.
im not sure what the question is, you want to split code into components? that’s the nature of react. or do you want something that can switch between demos or scenes?
So I am making the virtual tour and this solution is what I have come up with. As a React developer I love to use state and if statements to change code as in my experience its the most robust and best performing way to do so. However as I have very little experience with three.js maybe there is a better way to achieve this. With the code you had provided I believe it was a year ago, when someone had asked about putting hotspots in order to change the 360 image, I was never able to add more than 1 link to another panorama image. And thank you for sharing your knowledge as your codepen example has literally been the only example of this that I have been able to find in many hours of sifting through google and duckduckgo.
Also just came across a new issue, it seems the image is mirrored? The logo on the wall is backwards. Also here you can see the issue of the text not being in the sphere. If the sphere is kind of a pain would just love a way to make the text look good instead of typical a link text.
Panorama:
Original Image:
EDIT: Found a solution, by adding the lines:
textureMap.wrapS = THREE.RepeatWrapping;
textureMap.repeat.x = -1; but for the life of me cannot find an explanation of what this is doing if by chance you know how this fixes my issues so that I can understand that would be awesome. I don’t like implementing code that I do not understand completely. I understand it is inverting the x axis with the repeat.x = -1 but on a logical level I don’t understand what the RepeatWrapping and how the x = -1 is inverting the image.
Thanks for sharing this info this is useful keep it up.