Digital Bacon
Introduction
Digital Bacon is an application to create beautiful immersive 3D websites that run on your phone, computer, and VR headset. Some parts of constructing a 3D virtual world may be unfamiliar to you, so this guide hopes to make understanding these new concepts a little easier
Getting Started
Getting started is easy, just go to https://digitalbacon.io/app and click on the start button!
Moving Around
Moving around varies depending on what type of device you are on. Please see the appropriate section for your device
Computer
- You can move forwards, backwards, left, and right using the arrow keys or the WASD keys
- The Spacebar and Shift keys will make you fly up and down respectively
- You can click anywhere on the scene (wherever there isn't an editable asset) and drag the mouse to rotate the screen around your avatar
- Scrolling in or out will change the distance from your screen to the Avatar
Mobile / Tablet
- You can move forwards, backwards, left, and right using the joystick in the bottom left corner of the screen
- The "UP" and "DOWN" buttons in the bottom right corner of the screen allow you to fly up and down
- You can press down anywhere on the scene (wherever there isn't an editable asset) and then drag your finger to rotate the screen around your avatar
- Zoom in or out by using two fingers to move away or towards each other
VR Headset
Joystick controls are specific to your left or right hand. You can swap them under Editor Settings in the menu
- Move around using the left joystick (by default)
- Snap rotation + flying up and down can be done with the right joystick (by default)
Visual Editing
Visual Editing varies depending on if you are on a VR headset or not. Please see the appropriate section for your device
Computer / Mobile / Tablet
To begin editing assets on your device, bring your mouse over the object you want to edit and click on it (or just tap on it for mobile + tablet users)
- If a yellow bounding box does not appear when hovering over the asset, you may need to enable visual editing for it through the menu
Now the editing pane should appear on the left and the asset should have the transformation widget attached to it. See the following table for what you can do with each of the editing options
Place | Clicking on the surface of any asset in the scene will place the active asset there. Afterwards, the editing mode will reset to the most recent one |
Move |
Clicking on different parts of the transformation widget and then dragging the mouse will move the asset in the following ways
|
Rotate |
Clicking on different parts of the transformation widget and then dragging the mouse will rotate the asset in the following ways
|
Scale |
Clicking on different parts of the transformation widget and then dragging the mouse will scale the asset in the following ways
|
Clone | Creates a copy of the active asset and places it slightly farther towards the screen and right side |
Delete | Deletes the active asset |
Close | Closes the Visual Editing Pane |
VR Headset
There are different "Hand Tools" that change the way in which you can visually edit assets. These tools can be chosen from within the Menu. See the following table for what each tool allows
Edit |
When using the edit tool you can
|
Copy / Paste |
With this tool you can
|
Delete | Delete an asset with either hand by |
Translate | Assets grabbed with the grip button can be moved around without affecting their rotation |
Rotate | Assets grabbed with the grip button can be rotated without affecting their position |
Scale | Assets grabbed with the grip button can be scaled up/down by moving that hand farther/closer to the asset's location |
The Menu
Computer, Mobile, and Tablet users can pull up the menu by pressing the menu button at the top right corner of the screen
VR Users can pull up the menu by using the primary button on either controller. You can grab the menu to move it around and interact with menu items by pointing at them and pressing down on the trigger
The Menu can be broken down into the following five sections
Hand Tools
Specific for VR Headset Users. Please see section above for what each tool does
Library
Where you can edit all of the assets in your website. For more information on how you can configure different asset types through the menu, see the relevant sections for Models, Images, Shapes, Lights, Materials, Textures, Text, Audio, Video, Components, Systems, and Other Assets
Settings
In this section you can change the background (skybox) of your website, the settings your website's users will have, your own settings while editing your website, and update your avatar
Project File
Where you can save / load your project file to your device or Google Drive. You can also start a new project without any assets besides ambient lighting
Connect with Peers
This section allows you to host/join multi-user experiences and visit or edit websites with your friends
Models
All models have the following parameters that can be edited in the menu
Visually Edit |
Checkbox Enables visual editing for the asset |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Images
All images have the following parameters that can be edited in the menu
Visually Edit |
Checkbox Enables visual editing for the asset |
Double Sided |
Checkbox If checked, the image will be visible from both sides, otherwise just one |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Shapes
Digital Bacon provides the following list of shapes you can add to your website
Click on any of these links to jump straight to the shape you're interested in
Box
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Width |
Number Length of the box along its x-axis |
Height |
Number Length of the box along its y-axis |
Depth |
Number Length of the box along its z-axis |
Width Segments |
Number How many segments the width of the box is made up of. This affects the wireframe of the box which has implications for certain Material properties |
Height Segments |
Number How many segments the height of the box is made up of. This affects the wireframe of the box which has implications for certain Material properties |
Depth Segments |
Number How many segments the depth of the box is made up of. This affects the wireframe of the box which has implications for certain Material properties |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Circle
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Radius |
Number The length from the center of the circle to its edge |
Sides |
Number How many sides make up the edge of the circle |
Degrees |
Number How many degrees of the circle are visible |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Cone
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Height |
Number How tall the cone is |
Radius |
Number The length from the center of the cone's circular base to its edge |
Sides |
Number How many sides make up the edge of the cone's circular base |
Height Segments |
Number How many segments the height of the cone is made up of. This affects the wireframe of the cone which has implications for certain Material properties |
Degrees |
Number How many degrees of the cone are visible |
Open Ended |
Checkbox Removes the circular base of the cone if checked |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Cylinder
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Height |
Number How tall the cylinder is |
Top Radius |
Number The length from the center of the cylinder's top circular face to its edge |
Bottom Radius |
Number The length from the center of the cylinder's bottom circular face to its edge |
Sides |
Number How many sides make up the cylinder's curved surface |
Height Segments |
Number How many segments the height of the cylinder is made up of. This affects the wireframe of the cylinder which has implications for certain Material properties |
Degrees |
Number How many degrees of the cylinder are visible |
Open Ended |
Checkbox Removes both circular ends of the cylinder if checked |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Plane
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Width |
Number Length of the plane along its x-axis |
Height |
Number Length of the plane along its y-axis |
Width Segments |
Number How many segments the width of the plane is made up of. This affects the wireframe of the plane which has implications for certain Material properties |
Height Segments |
Number How many segments the height of the plane is made up of. This affects the wireframe of the plane which has implications for certain Material properties |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Ring
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Inner Radius |
Number The length from the center of the ring to its inner edge |
Outer Radius |
Number The length from the center of the ring to its outer edge |
Sides |
Number How many sides make up each edge of the ring |
Radius Segments |
Number How many segments there are between the inner and outer radius of the ring. This affects the wireframe of the ring which has implications for certain Material properties |
Degrees |
Number How many degrees of the ring are visible |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Sphere
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Radius |
Number The length from the center of the sphere to its edge |
Horizontal Sides |
Number How many sides make up the surface of the sphere horizontally |
Vertical Sides |
Number How many sides make up the surface of the sphere vertically |
Horizontal Degrees |
Number How many degrees of the sphere are visible horizontally |
Vertical Degrees |
Number How many degrees of the sphere are visible vertically |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Torus
Visually Edit |
Checkbox Enables visual editing for the asset |
Material |
Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below |
Radius |
Number The length from the center of the torus to center of the tube |
Tube Radius |
Number The length from the tube's center to its edge |
Radial Sides |
Number How many sides make up the torus (2 would turn the torus into a ring) |
Tubular Sides |
Number How many sides make up the edge of the torus |
Degrees |
Number How many degrees of the torus are visible |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Lights
Digital Bacon provides the following list of lights you can add to your website. Lights that have visual editing enabled have a visual marker while editing your website. These markers will not appear when you host your website
Click on any of these links to jump straight to the type of light you're interested in
Ambient
Ambient lighting will illuminate all assets equally without any sense of directional light
Visually Edit |
Checkbox Enables visual editing for the asset |
Color |
Color Selection Sets the color for the lighting |
Intensity |
Number How intense the lighting is |
Position |
Numbers Only affects visual marker Location of the asset along the x, y, and z axes |
Rotation |
Numbers Only affects visual marker Orientation of the asset represented as Euler Angles |
Scale |
Numbers Only affects visual marker How much the asset is stretched along the x, y , and z axes |
Basic
Basic lighting acts like a lightbulb emitting light in all directions originating from its location
Visually Edit |
Checkbox Enables visual editing for the asset |
Color |
Color Selection Sets the color for the lighting |
Intensity |
Number How intense the lighting is |
Distance |
Number The maximum range of the lighting. If set to 0, there will be no limit |
Decay |
Number The amount the light dims along the distance of the light |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Only affects visual marker Orientation of the asset represented as Euler Angles |
Scale |
Numbers Only affects visual marker How much the asset is stretched along the x, y , and z axes |
Materials
Materials set the color and appearance of any asset that applies them
Click on any of these links to jump straight to the material you're interested in
Basic
A Basic material provides a coloring that is not affected by lights. This makes it so shapes that use this material have no discernable corners/edges and appear flat
Color |
Color Selection Sets the color of the material |
Texture Map |
Texture Selection Optional Selects the texture that will be used to apply additional coloring on the material. If a non-white color has been selected for the material, the appearance will look like a blend between the texture and that color |
Display |
Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through |
Transparent |
Checkbox Enables transparency for the material. If a texture map that uses a png with transparency is selected, that transparency will be appied to this material. Additionally transparency can be added to the whole material using the opacity field or just in certain places by using an Alpha Map |
Opacity |
Number How opaque the whole material is. 1 is fully opaque and 0 is invisible. Must have Transparent checked to have any effect |
Alpha Map |
Texture Selection Optional Selects the texture that will be used to determine the transparency of the material. Black areas will make the material fully transparent while white colors will make it fully opaque. All other colors are treated as grayscale and set the transparency based on its closeness to black/white |
Wireframe |
Checkbox If checked, will only display the wireframe of the asset the material is applied to |
Environment Map |
Texture Selection Optional Selects the texture that will be used to display a reflection off the material. If set, "Color & Environment Blend", "Reflectivity", and "Refraction Ratio" will all affect the appearance of the environment map |
Color & Environment Blend |
Blends Determines how the surface's color is combined with the environment map. If Mix is chosen, Reflectivity is used to blend between the two colors |
Reflectivity |
Number How much the environment map affects the surface to create a reflection. 0 means it has no reflection and 1 means it is fully reflective |
Refraction Ratio |
Number The ratio of the Index of Refraction (IOR) of air divided by the IOR of the material. Only has an affect when the environment map texture has a Mapping set to Refraction |
Standard
A material that can create metalic/rough looking surfaces. This material is more graphically accurate at the expense of being less efficient for the computer to run
Color |
Color Selection Sets the color of the material |
Texture Map |
Texture Selection Optional Selects the texture that will be used to apply additional coloring on the material. If a non-white color has been selected for the material, the appearance will look like a blend between the texture and that color |
Display |
Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through |
Transparent |
Checkbox Enables transparency for the material. If a texture map that uses a png with transparency is selected, that transparency will be appied to this material. Additionally transparency can be added to the whole material using the opacity field or just in certain places by using an Alpha Map |
Opacity |
Number How opaque the whole material is. 1 is fully opaque and 0 is invisible. Must have Transparent checked to have any effect |
Alpha Map |
Texture Selection Optional Selects the texture that will be used to determine the transparency of the material. Black areas will make the material fully transparent while white colors will make it fully opaque. All other colors are treated as grayscale and set the transparency based on its closeness to black/white |
Wireframe |
Checkbox If checked, will only display the wireframe of the asset the material is applied to |
Bump Map |
Texture Selection Optional Selects the texture that will be used to simulate depth in the material with respect to lighting. The actual shape of the asset is unaffected |
Bump Scale |
Number How much the bump map affects the material |
Displacement Map |
Texture Selection Optional Selects the texture that displaces the assets vertices. This affects the actual shape of the asset |
Displacement Scale |
Number How much the displacement map affects the material |
Displacement Bias |
Number The offset of the displacement map |
Emissive Color |
Color Selection Sets the emissive color of the material. This is the color that is emitted (glows) from the material without lighting |
Emissive Map |
Texture Selection Optional Selects the texture that will be used to apply additional emissive coloring on the material. If a non-white color has been selected for the material emissive color, the emissive appearance will look like a blend between the texture and that color |
Emissive Intensity |
Number Intensity of the emissive lighting |
Environment Map |
Texture Selection Optional Selects the texture that will be used to display a reflection off the material. If set, "Environment Intensity" will all affect the appearance of the environment map |
Environment Intensity |
Number Intensity of the environment map |
Metalness |
Number How much the material looks like a metal. 0 will give a non-metallic appearance like for stone and wood, while 1 will give a very metallic look |
Metalness Map |
Texture Selection Optional Selects the texture that will be used to affect the metalness of the material. Areas that have the blue channel of the image being higher will appear more metal-like than areas without blue |
Normal Map |
Texture Selection Optional Selects the texture that will be used to augment the colors of the material with respect to the direction the surface faces |
Normal Type |
Normal Spaces If set to Tangent, the color of any portion of the surface is determined by the direction that surface faces. If set to Object, the color of the whole material is determined by the direction the asset itself faces. Material color can still be augmented by the Normal Map for both Normal Types |
Roughness |
Number How rough the material appears. 0 gives a smooth mirror reflection while 1 would give it a fully diffused appearance |
Roughness Map |
Texture Selection Optional Selects the texture that will be used to affect the roughness of the material. Areas that have the green channel of the image being higher will appear more rough than areas without green |
Toon
A material that gives off a cartoon appearance
Color |
Color Selection Sets the color of the material |
Texture Map |
Texture Selection Optional Selects the texture that will be used to apply additional coloring on the material. If a non-white color has been selected for the material, the appearance will look like a blend between the texture and that color |
Display |
Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through |
Transparent |
Checkbox Enables transparency for the material. If a texture map that uses a png with transparency is selected, that transparency will be appied to this material. Additionally transparency can be added to the whole material using the opacity field or just in certain places by using an Alpha Map |
Opacity |
Number How opaque the whole material is. 1 is fully opaque and 0 is invisible. Must have Transparent checked to have any effect |
Alpha Map |
Texture Selection Optional Selects the texture that will be used to determine the transparency of the material. Black areas will make the material fully transparent while white colors will make it fully opaque. All other colors are treated as grayscale and set the transparency based on its closeness to black/white |
Wireframe |
Checkbox If checked, will only display the wireframe of the asset the material is applied to |
Bump Map |
Texture Selection Optional Selects the texture that will be used to simulate depth in the material with respect to lighting. The actual shape of the asset is unaffected |
Bump Scale |
Number How much the bump map affects the material |
Displacement Map |
Texture Selection Optional Selects the texture that displaces the assets vertices. This affects the actual shape of the asset |
Displacement Scale |
Number How much the displacement map affects the material |
Displacement Bias |
Number The offset of the displacement map |
Emissive Color |
Color Selection Sets the emissive color of the material. This is the color that is emitted (glows) from the material without lighting |
Emissive Map |
Texture Selection Optional Selects the texture that will be used to apply additional emissive coloring on the material. If a non-white color has been selected for the material emissive color, the emissive appearance will look like a blend between the texture and that color |
Emissive Intensity |
Number Intensity of the emissive lighting |
Normal Map |
Texture Selection Optional Selects the texture that will be used to augment the colors of the material with respect to the direction the surface faces |
Normal Type |
Normal Spaces If set to Tangent, the color of any portion of the surface is determined by the direction that surface faces. If set to Object, the color of the whole material is determined by the direction the asset itself faces. Material color can still be augmented by the Normal Map for both Normal Types |
Textures
Textures are images that have been configured for use by materials to alter their look and appearance
Click on any of these links to jump straight to the type of texture you're interested in
Basic
A Basic Texture is comprised of a single image with parameters to repeat the image both vertically and horizontally if desired
Image |
Image Selection Optional Selects the image that will be used for the texture. If left blank, it will default to being all black |
Horizontal Wrapping |
Wrapping Type Determines if the texture is repeated horizontally, and if the repetition is mirrored or not |
Vertical Wrapping |
Wrapping Type Determines if the texture is repeated vertically, and if the repetition is mirrored or not |
Horizontal Repeat |
Number How many times the image is repeated within the texture. If greater than 1 and Horizontal Wrapping is set to "Clamp", then the left and right edges of the image will stretch until the end of the texture in those directions |
Vertical Repeat |
Number How many times the image is repeated within the texture. If greater than 1 and Vertical Wrapping is set to "Clamp", then the top and bottom edges of the image will stretch until the end of the texture in those directions |
Horizontal Offset |
Number How much a single repetition of the image is offset towards the left |
Vertical Offset |
Number How much a single repetition of the image is offset towards t he bottom |
Cube
A Cube Texture is a series of 6 images that map to the surface of a cube. Used for defining environment maps
Images |
Image Selection Optional Selects the images that will be used for the texture. All images must be the same size and type. If left blank or any images do not have the same size + type of the others, it will default to being all black |
Wrapping |
Mapping Determines whether the Cube Texture is used as a reflection map or refraction map |
Text
Digital Bacon provides two ways to add text, by itself or as an overlay with a background
Click on any of these links to jump straight to the type of text you're interested in
Plain
A Plain Text asset is just text floating in 3D space with no background
Visually Edit |
Checkbox Enables visual editing for the asset |
Text |
Text The text you want rendered |
Font Size |
Number The size of the font |
Max Width |
Number The maximum width the text can take up before wrapping to a new line |
Font Color |
Color Selection Sets the color for the font |
Text Align |
Text Align Determines the horizontal alignment of the text. Only relevant if text spans more than 1 line |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Overlay
An Overlay Text asset is comprised of text overlayed on top of a background
Visually Edit |
Checkbox Enables visual editing for the asset |
Text |
Text The text you want rendered |
Font Size |
Number The size of the font |
Width |
Number The width of the background |
Height |
Number The height of the background |
Font Color |
Color Selection Sets the color for the font |
Background Color |
Color Selection Sets the color for the background |
Background Opacity |
Number How opaque the background is. 1 is fully opaque and 0 is invisible |
Border Radius |
Number Determines the roundedness of the background's corners |
Padding |
Number The minimum amount of space between the background's edges and the text |
Justify Content |
Justify Content Determines the vertical alignment of the text within the background |
Text Align |
Text Align Determines the horizontal alignment of the text. Only relevant if text spans more than 1 line |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Render Order |
Number The order in which assets are rendered. Useful when trying to prevent transparent assets from hiding behind one another (learn more) |
Audio
All audio have the following parameters that can be edited in the menu
Visually Edit |
Checkbox Enables visual editing for the asset |
Preview Audio |
Checkbox Allows you to play the audio while in the Editor |
Auto Play |
Checkbox If checked, the audio will start playing automatically when the user clicks starts in the Digital Bacon website |
Cone Inner Angle |
Number The angle (0-360 degrees) of a cone in which the audio does not reduce. 360 degrees would make this a non-directional audio source as audio would travel in all directions equally |
Cone Outer Angle |
Number The angle of a cone inside of which the audio reduces by a constant value, defined by Cone Outer Angle. Audio will not reduce within the Cone Inner Angle |
Cone Outer Gain |
Number The factor by which volume gets reduced outside of the Cone Outer Angle. 0 means nothing can be heard outside of the cone while 1 means there is no reduction |
Distance Model |
Distance Models The method in which volume decreases as a user gets farther from the audio source. Options are linear, inverse, and eponential |
Loop |
Checkbox Whether the audio should play on repeat or not |
Max Rolloff Distance |
Number The maximum distance from the audio source in which the volume gets reduced by distance. A user farther than this distance will not experience any volume reduction |
Min Rolloff Distance |
Number The distance in which volume reduction starts taking place using the Distance Model and Rolloff Factor. A user closer than this distance will not experience any volume reduction |
Rolloff Factor |
Number How quickly the volume is reduced as the user moves farther away from the audio source. Typical range for linear distance is 0-1 and 0-∞ for the other distance models |
Volume |
Number How loud the audio source is |
Play Event |
Event Audio will start playing whenever this event is triggered |
Pause Event |
Event Audio will pause whenever this event is triggered |
Stop Event |
Event Audio will stop whenever this event is triggered |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Video
All audio have the following parameters that can be edited in the menu
Visually Edit |
Checkbox Enables visual editing for the asset |
Preview Video |
Checkbox Allows you to play the video while in the Editor |
Display |
Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through |
Auto Play |
Checkbox If checked, the video will start playing automatically when the user clicks starts in the Digital Bacon website |
Loop |
Checkbox Whether the video should play on repeat or not |
Play Event |
Event Audio will start playing whenever this event is triggered |
Pause Event |
Event Audio will pause whenever this event is triggered |
Stop Event |
Event Audio will stop whenever this event is triggered |
Position |
Numbers Location of the asset along the x, y, and z axes |
Rotation |
Numbers Orientation of the asset represented as Euler Angles |
Scale |
Numbers How much the asset is stretched along the x, y , and z axes |
Components
Components are essentially labels that can be attached to other assets to let Systems know to alter their behavior. For example, attaching a Grabbable Component to an asset will notify the Grabbable System to add functionality to the asset so that users may pick it up and down in the live site. There are many more components than what you'll see in Digital Bacon by default. Check out our list of plugins to find some you might find useful
Publish Component
Allows you to specify what events should be published for various actions on an asset like clicking, grabbing, and touching
Event |
Event The event that will be published by the actions specified below |
Pointer Action |
Interactable Action The action done by mouse, touch screen tap, or XR target ray on an asset that should trigger the event |
Grip Action |
Interactable Action The action done by XR controller grip button or hand tracking grab gesture on an asset that should trigger the event |
Touch Action |
Touch Interactable Action The action done by XR controller or hand touching an asset that should trigger the event |
Systems
Systems can alter the behavior of Assets with components that pertain to that System. Going off the previous example, if you were to omit the Grabbable System then users would not be able to pick up objects in your live website. There are many more systems than what you'll see in Digital Bacon by default. Check out our list of plugins to find some you might find useful
Publish System
Enables publishing events when assets with a Publish Component are interacted with
Other Assets
Digital Bacon allows other custom assets to be included in the project that don't fit in the other categories. These are plugins that can be included just like Components and Systems that can be found online. In the coming months we hope to provide a platform for users to be able to find and use additional assets easily