Enable 360 View using React.js
Based on winning team of Tokopedia Web Hackathons 2020, this is about the detail of 360 View that are made in the event.
What’s up?
Do you ever ask yourself, if you buy products by online you want to know the little details of the products? For examples if you buy a television, do you know where is the plugs for power, HDMI connection? All of that will be assured when the product arrives at your place so you can check it by yourself.
This is actually a problem because you will be disappointed if the product doesn’t comply with your needs because the details that you have been missing.
So, to solve the problem. We can apply 360 View with React!
What is It?
360° view is a feature to view a product, controlled by user’s interaction. The purpose solely is o replace the feel of seeing the product in person.
How to Create for your Own?
We use one of the React.js library called react-3d-viewer. With the library, you can add Viewer component based on the object model that you use, and put it on your code.
Get Fandika Okdiba’s stories in your inbox
Join Medium for free to get updates from this writer.
For example, in our products we want to showcase a product with .mtl extension, so we use MTLModel to enable the viewer.
<MTLModel
src={src}
mtl={mtl}
texPath={texPath}
enableZoom={false}
position={position}
rotation={rotation}
>
<AmbientLight color={0xffffff} />
</MTLModel>So on this snippet, you will see also inside the viewer called AmbientLight. As the name says, it gives light to the model so that user can see it clearly. The viewer is also available for model with .obj, .dae extensions. Even .json is available!
Interesting! But, What’s the Catch?
Create the viewer to be implemented on your web application is not as hard as you think. But the important one is how you should find the model. If you are doing your own personal projects, you can search the models on the internet (Free3d, CGTrader). Else, for a company you should pay for the model or even develop your own model to be viewed by the users.
Conclusion
With the library, you can see any side you want of the product like seeing it in person. Try it on your own and tell us what else you can make from this.
Thank you all for reading this. Enjoy your 2021!
