Skip to main content
100%

from Blender to WebVR in 1 click

✓ Published0🌍 Public
UUtopiah
Last edited Aug 20, 2017
Created on Aug 11, 2017

A single click in Blender exports the current 3D scene as a glTF model and publishes it to a remote server, producing a WebVR experience viewable in a browser. The script uses the Blender glTF exporter, the A-Frame library with the aframe-extras animation-mixer component, and Python’s requests module to upload the model, binary, and generated HTML files. The generated page includes an A-Frame scene with a lightblue sky and the model positioned in space, with animation-mixer removed if no actions exist. The backend is a simple PHP file that stores uploads and returns a shareable URL.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e993403d27f2ac83367cff9794c2ece0

The animation shows a 3D scene that updates live as a new 3D model is exported from Blender. It polls a timestamp file over HTTP via `fetch`; when the timestamp changes, it removes previously uploaded assets and loads the new `model.glb` file into an A-Frame scene. The code uses `AFRAME.scenes[0]`, the `media-loader` component, and the `networked` component to place and share the model, with `setAttribute` positioning it at `0 1 0`.

UUtopiah
68% match
Loading thumbnail…

Gist e30aac4bd8656b6d68668de3e25042f7

This visualization showcases 3D photogrammetry assets converted from FBX files to GLB format for web display. It uses the FBX2glTF command-line tool to convert models, then generates an HTML scene with A-Frame’s `<a-gltf-model>` component to load the resulting GLTF files. The shell script also converts PNG textures to JPG using ImageMagick, rewrites the GLTF references accordingly, and packs models into binary GLB files with the gltf-import-export library, creating a gallery of textured 3D objects.

UUtopiah
68% match
Loading thumbnail…

Gist a60d72fb8c781bf8832dc4ea9a673382

This interactive WebVR example demonstrates how to inspect and animate 3D objects in an A-Frame scene by linking them to a media asset list. It shows how hovering over an asset in the UI selects a corresponding object, which can then be scaled up or down using the X and Z keys. The code uses A-Frame’s component system, specifically the `media-loader` attribute, to match hashes from the asset list to scene elements, and applies animation via the `AFRAME.ANIME` timeline API.

UUtopiah
65% match
Loading thumbnail…

Gist b077b41a118451bbcc13bbc94caea681

This example shows a WebVR scene where the user’s viewpoint is repositioned by attaching the active camera-tool entity to an avatar rig. The code selects the last camera-tool element in the A-Frame scene, grabs the avatar rig, and uses Three.js’s `Object3D.attach()` to transfer the camera’s world transform to the rig, effectively making the rig follow the camera’s position and orientation. It demonstrates a simple way to control an avatar’s pose in a virtual environment using A-Frame’s entity-component querying and Three.js’s transform hierarchy.

UUtopiah
63% match
Loading thumbnail…

Gist 8eb0d83e467d13994fd69c4631130561

This example shows a Mozilla Hubs scene being cloned into a local A-Frame environment by fetching the room’s `objects.gltf` file. The code parses each node’s `HUBS_components.media.src` to load remote media assets, then creates A-Frame entities with `media-loader`, `networked`, and `pinnable` components, preserving translation, scale, and rotation. It uses the browser’s `fetch` API to retrieve the GLTF JSON and manipulates `AFRAME.scenes[0]` directly. The scene data originates from the Hubs room’s hosted GLTF, demonstrating asset reuse across networked 3D spaces.

UUtopiah
61% match
Loading thumbnail…

Gist c3927fd16c93fc919a74036325faacd4

In a virtual-reality environment built with A-Frame, a video playlist automatically plays two accessibility-themed VR conference talks inside a networked 3D scene. The code defines an array of MP4 URLs hosted on an S3 bucket, creates an `a-entity` with the `media-loader` and `networked` components, and scales it to ten units while positioning it 35 units away. It disables looping and listens for the video’s `ended` event to switch to the next clip, cycling back to the first after the last. A CORS proxy URL prefixes each source, and the playback jumps near the end for testing.

UUtopiah
60% match
Loading thumbnail…

Gist 909ed8ec8e459e5e96701e0a3d3247f4

The example demonstrates a networked virtual-reality scene where laser-like media elements continuously rotate and randomly rescale. Using A-Frame and the Networked-Aframe (NAF) API, the code queries all entities loaded via the `media-loader` component whose source URL matches the hash "lase", then applies incremental rotations to each object’s `object3D` transform. Ownership is taken for non-owned networked entities before modifying their rotation and scale. The visualization relies on the browser’s WebXR capabilities through A-Frame, showing real-time collaborative manipulation of shared 3D objects.

UUtopiah
59% match
Loading thumbnail…

Gist 2761dd6bd26cbb45163b317490fa58ff

A WebGL-based virtual reality scene built with Exokit and A-Frame loads a Hubs environment, rendering it through a WebGL 2.0 context. The visualization shows the console log output and error stack traces from the Hubs client, capturing runtime issues such as the MediaRecorder API incompatibility and schema warnings. The example demonstrates how WebXR applications can fail and log errors when running in non-standard environments, using Three.js and the Exokit browser runtime. It highlights error handling and API compatibility challenges in mixed-reality web development.

UUtopiah
59% match