Making 3D Website Exhibit
Try our new 3D website side project demo page: https://annietsai089.github.io/hology-play-example/
For the past month, Adam and I have been working on a special side project to test what other things our game engine could do with web technologies, which is a 3D website!
Many 3D websites often have some:
- Several 3D objects in the scene, but may not be fully interactive
- May only have a scrolling function throughout the whole site
- Have performance issues such as lagging
- Limited user directions on how to navigate
We decided to pick an old photo of another well-known Silicon Valley tech founder that many are familiar with (a fruit) and made a similar office space to showcase a little bit of their story including:
- Camera movements, simulate a person turning their head and looking at something
- Clickable so the user felt that they had a choice in choosing what they want to see instead of just scrolling functions
- Look for performance issues and find ways to fix them
- Some elements attract players to click on items, with written and non-written cue
- Enough room for text and the ability to link to external sites. A 3D website can be a creative portfolio website that shows your personality, knowledge, and past work without the typical 2D website templates
Building the environment
It was fairly easy to build the environment in Hology Engine, as we used mostly shapes already provided in the engine editor, then imported some 3D assets with simple drag-and-drop files into the editor. Adam did the programming for camera motions and 2D text panels, which brought the website to life with visual depth changes.
Add visual cue
So now the question is do we want the users to click on all the items blindly without cues and see what happens, or give users a visual cue so they know how to navigate. We decided to add some 2D elements as visual cues for users so they are incentivized to click on different items. For example, we added the information blue circle as info points where users are attracted to click on it. We also had a 2D blue panel with the text "Click & Learn" to help readers who prefer text to understand how to navigate.
In the future, I think we can also add dialogue bubbles or glowing objects as a way to attract people to click on them.
Text space
One of the problems I saw before in other 3D websites was the text was too small because of the space issues. We thought about how to have larger spaces to host text information with links to external pages and also a clear button people can use to go back to the main view, and here we introduced the 2D text field with a button. This way it is easier for users to read with clear UX directions on how to navigate.
Performance
We did run into a performance issue when trying to open the website after being deployed from GitHub. The camera movement at first was slow and made it dizzy to look at the website. Interestingly it was because I was using a laptop where the Chrome browser was not utilizing my Nvidia graphics card, which could save battery but also made the 3D website really laggy. So we had to adjust the web browser and the laptop settings to use my Nvidia graphics card when viewing the web browser, which then resolved the performance issue.
Check out our 3D project here: https://annietsai089.github.io/hology-play-example/
We are thinking about releasing a tutorial in the future on how to make a 3D website with Hology Engine. As it might benefit those who want a special 3D interactive portfolio website to stand out in the crowd. Stay tuned!