silverslade / aframe_blender_exporter

Blender Exporter for A-Frame VR

Blender Exporter to A-Frame VR

This Blender add-on allows you to model your scene in Blender and export it to an A-Frame VR project with a single click. The generated sources can be modified manually according to your project needs and can use a baking process to use baked Lightmaps.

This is an open source project under MIT terms, so feel free to email me or ask for a pull request, or just offer me a coffe!

Features

• Pure Blender Add-On (tested on Blender 3.5.1)
• Simple UI for configuration
• It exports and creates a new A-Frame project
• Optimized Pipeline: Model with blender -> export -> test on browser
• Use of a A-Frame html template saved inside the blend file (to make a higher customisation)
• Open Source (MIT)

Changelog & todo

See here for the updated changelog.

Main Configuration

This Addon manages the following settings (all of them switchable inside the UI):

• Stats window
• Joystick controller on screen
• HTC and Quest controllers
• Cube Map Env (for objects with reflections)
• Cast Shadows
• Raycast Management
• Player's speed and height Management
• Project name and final export directory
• Use of the Lightmapper add-on to add lightmaps to the exported models
• Use an embedded HTTP Server for quick preview

Contents

• Installation
• How to use the Addon
• Credits
• Help
• License

Installation

• Download the latest release version from Itch.io
• Open Blender (3.5.1)
• Edit -> Preferences -> Add-ons -> Install
• Browse and choose the addon zip file
• Enable the addon
• Note: This addon requires the glTF Exporter 2.0

How to use this A-Frame Blender Exporter

• Open a new/existing blender scene.
• Open the View3D window (n key) to show the export window.
• Set up best settings for your scene
• Click on Export to A-Frame project -> a-frame web project will be generated
• Customize the 'index.html'-template in the Script-tab for future exports
• Use Custom Properties of blender-objects to control tags/attributes (example)

How to view the 3D scene

How to execute the A-Frame 3D scene from Blender

• click on Start Serving -> a simple http server in python will start
• click on Open Preview -> to launch your local server web with the 3D scene
• click on Stop Serving -> to stop the http server
• Note: Don't close Blender until you stop the http server. Always click on "Stop Serving" before close Blender

How to execute the A-Frame 3D scene standalone

Several possibilities for running a local web server to test or delivery your WebVR page:

• with Nodejs: run live-server under npm (install it with npm install -g live-server)
• with Python: run python -m SimpleHTTPServer
• with a Python script: run python start_web_server.py inside the output directory
• Note: For massive exports, 'live-server' could be more useful because it can manage a content auto-refresh.

For further instructions, see the official project page.

Main UI configuration

Main Ui for the current version 0.0.10. For a better usability, the add-on is divided into 6 main panels:

• A-frame
• Renderer
• Player
• Interactive/action
• Exporter

A-Frame Panel

Property	Description	Default Value
A-Frame	A-Frame Version	1.2.0
Show Stats	Show the A-Frame stats window. For debug purpose.	False
Show Joystick	Show a icon controller to move player	False
Enable VR Controllers (HTC, Quest)	Enable Controllers for further inteactions	False
Cube Env Map	For skybox reflections (but not objects reflections). To get objects reflections also, enable the Camera Cube Env	False
Camera Cube Env	with objects reflections	False
Show Enviroment Sky	Activate a default skybox	False
Enable Background	Camera cube env with background sky	False
Path	directory path for the equirectangular sky	/env/
Ext	with objects reflections	jpg
Cast Shadows	For dynamic lights and shadows.	False

Renderer Panel

Property	Description	Default Value
Antialiasing	A-Frame's Scene Setting	True
Color Management	A-Frame's Scene Setting	True
Physically Correct Lights	A-Frame's Scene Setting	True

Player Panel

Property	Description	Default Value
Enable Raycast	Activate a raycast for interactions. You can set length and interval values	False
Raycast Length	Set the Length of the raycast. Shorter or turned off is for better performance	4.0
Raycast Interval	Set the polling interval in msec. Higher is for better performance	2000.0
Player Height	Set the Height of the main camera	1.70
Player Speed	Set the Speed of the player	0.1

Interactive/Action Panel

Property	Description	Default Value
Add Cubemap	Enable the reflections for the selected object
Add Rotation on Z	Enable rotation animation on Z axis for the selected object
Add Toggle Images	set 2 images toggling with click on the selected object (plane mesh)
Add Link Web	Enable html link when clicking on the selected object
Add Video	set a mp4 video for the selected object (plane mesh)

Exporter Panel

Property	Description	Default Value
Name	Project name. It's the target directory where your project will be created.	aframe-prj
Export To	Target Directory where the Name Directory will be created	C:/temp/
Clear Assets Directory	To remove old 3d models from the main assets dir

Credits

Contributors

• Gltf Exporter & Collaboration - @AndreaRotondo
• Code Refactoring - @fsoft72
• HTTP Embedded Server - @msfeldstein
• embedded index.html template - @coderofsalvation
• PNG fix code - @jure

Third Party Components

This Addon Uses the following 3rd Party Software (or their integration/modification):

• Aframe Joystick - https://github.com/mrturck/aframe-joystick
• Aframe Components - https://github.com/colinfizgig/aframe_Components
• Icons - https://ionicons.com/

Help

If you like the project and want to help, these are the main activities:

• Writing documentation (wiki)
• Writing Official Manual or (video/text) tutorial
• Tests on different O.S. (i.e. MacOSX, Linux)
• Python script programming
• Add new features

In this case, drop me a line.

License

The MIT License (MIT)

Copyright (c) 2023 Alessandro Schillaci

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.