three object3D finder from partial name

100%

three object3D finder from partial name

✓ Published0🌍 Public

Last edited May 3, 2020

Created on May 3, 2020

This example demonstrates how to locate and report three-dimensional objects within an A-Frame scene by matching partial names in their hierarchy. The `objects3DFromPartialName` function traverses the scene graph using `AFRAME.scenes[0].object3D.traverse`, filtering for `Object3D` instances whose `name` property matches a regular expression. It then retrieves each matched object’s world position with `THREE.Vector3` and `getWorldPosition`, logging the names and coordinates to the console. The code relies on Three.js and A-Frame’s WebGL rendering to inspect the live scene structure.

AI-generated description

Similar vizzes

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

61% match

Loading thumbnail…

Gist e560cf08abbec5dcd0b2e45475cee171

This example uses A-Frame’s scene graph to locate and highlight a specific 3D element whose `media-loader` component’s source URL matches a given hash string. It queries all entities with `[media-loader]`, filters those whose `attrValue.src` contains the hash, and then scales the first match to a scalar value of 1. The code relies on A-Frame’s component API and the `object3D` property, with a comment referencing NAF’s `getNetworkedEntity()` for networked scenes. The data source is the element’s media URL, and the visualization emphasizes a single hub by adjusting its scale.

UUtopiah

59% match

Loading thumbnail…

Gist df3588593711a8addd2cff52579ba3dd

This WebGL visualization uses A-Frame and Three.js to detect and highlight intersections between 3D objects in a scene. It calculates bounding boxes for two objects retrieved from the DOM—a burger and an aquarium—using `THREE.Box3().setFromObject()` on their `object3D` components. Yellow and green `Box3Helper` outlines visualize each bounding volume, then the code calls `bbox_burger.intersectsBox(bbox_aq)` to test for overlap, returning a boolean that indicates whether the objects collide.

UUtopiah

59% match

Loading thumbnail…

Gist 35407c28fd6ba2c2097d1b589630c53f

This example demonstrates how to attach 3D objects to specific avatars within a Mozilla Hubs scene, using networked entities and avatar position tracking. The code identifies avatars by their display names and finds media objects by matching URL hashes in their `media-loader` components, then repositions those objects to follow the avatars in real time. It relies on Hubs’ scripting utilities, the A-Frame `AFRAME.scenes` API, and NAF (Networked-Aframe) for ownership and position updates, with object rotations adjusted slightly on each attachment. The script is designed for collaborative VR environments where staff members need virtual items tethered to their avatars.

UUtopiah

58% match

Loading thumbnail…

Gist a228815e7f945fd39d1dc914fcc32a43

This example uses A-Frame to demonstrate live observation of an HTML attribute change within a 3D scene. It shows how the `MutationObserver` API logs the `position` attribute of an `a-sphere` element as the code updates it from "0 2.75 -5" to "0 1.75 -5". The observer is configured with `{attributes:true}` to trigger on attribute modifications, printing the changed attribute name, new value, and target node to the console. The code directly interacts with the scene via `AFRAME.scenes[0]` and standard DOM querying.

UUtopiah

58% match

Loading thumbnail…

Gist 21469685654d555985edf84357cb2c8e

This example visualizes the spatial distribution of networked avatars in a Three.js scene by extracting their world positions. It shows the relative layout of avatars in 3D space, with a focus on the user’s own avatar as a reference point. The code queries all elements with the `[networked-avatar]` attribute and logs their `object3D.position`, while separately obtaining the user’s position via `getWorldPosition()` on the `.AvatarRoot` element. It uses plain DOM queries and Three.js’s object3D transformation methods, with the data source being live avatar coordinates from the networked environment.

UUtopiah

56% 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

56% match

Loading thumbnail…

three.js webgl - simple text from json

This example renders the text "Three.js\nStroke text." as 3D geometry in a WebGL scene using Three.js. A `FontLoader` loads a typeface JSON file containing glyph outlines, from which `generateShapes` creates filled shapes with semi-transparent material and stroked outlines with darker material. The scene includes an `OrbitControls` camera for interactive rotation and a light gray background. The rendering highlights both the filled and stroked paths of each character.

LLaurens

56% match