For our last ‘Augmented Portal’ competition, I put together an example project to help inspire you to create your own experience to enter the competition with.
I’m back with another one for this ‘360 Gyro’ competition, this time with the added bonus of being able to provide the zpp so you guys can explore the project yourselves.
The inspiration behind this example originally came from the fact that in our documentation and tutorials we cover photospheres and videos in an attitudeOrient but have never explicitly mentioned that 3D environments are also a great use case for 360 experiences.
This has been further reinforced by the great entries we’ve had from @jvouillon and @bradleycox255, so if you’ve been excited by their entries and want to see how an experience like that can be built check out the project.
You can scan the code above to see the experience (we made a nice image around the code but the experience isn’t tracked so don’t worry about printing it off) and you download the zpp project here - 360-3d-environment.zpp (17.8 MB)
You can also download all of the assets used in this experience here - 360 3D Assets.zip (25.2 MB)
See below for a description of the idea, experience, and project. Any questions feel free to ask
The Idea
The Zappar Bunny, one of Zappar’s older 3D mascots, once had an experience that let you see into his 2D house. We used this idea of his house as the basis for this 3D version. It also gave us an opportunity to create 3D models for the experience that would fit together and we could share with you.
The Experience
After scanning the code the screen will flash white and you’ll enter the house through the front door. You can then use your phone to look around the fully 3D environment.
There are a couple of points of interactivity, you can tap on the bunny to have him play a waving animation and there is one more element you can tap on but I’m going to let you discover that one for yourselves (hint: it’s glowing)
The Project
To enter the house in-scene you can play the ‘world > intro’ timeline and then use the gyro widget in the bottom left of the 3D view to rotate around.
The majority of the project is made up of 3D models (made by our very own @joe) placed within groups within an attitudeOrient node. The model’s that are interactive have their own group in which an invisible plane is placed in front of them to record pointerdown events and trigger their interaction.
The ‘Forest’ that appears outside the window is made up of 2D images placed at different positions behind the house to give the sense of depth and two of the ‘lighting’ images are set to fade in and out in the ‘forest > glow’ timeline.
There is a tracking image in the project but it is solely used for the “seen” event to trigger the intro animation and no content is tracked from it.
There is also a cameraTransform node that is used to alter the focalLength of the experience so that objects do not appear too close to the camera.