3D Gyro Environment
This example project was put together to help inspire people taking part in our 360 Gyro Competition.
You can print and scan the target image to see the experience for yourself.
The description below is a breakdown of the completed project which includes:
The Idea
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.
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.
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 a picture frame you can tap on to see an image fullscreen (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 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.