Skip to main content
SimilarExport ZIP
100%

three-vrm example

✓ Published0🌍 Public
HHirosaji
Last edited Feb 25, 2020
Created on Nov 25, 2019

A 3D VRM avatar performs motion capture animation synced to a live webcam feed. The webcam video and PoseNet-detected keypoints are drawn onto a 2D overlay canvas, while the estimated pose data drives the avatar’s joint rotations in a Three.js WebGL scene with GridHelper and AxesHelper. The code uses TensorFlow.js PoseNet, THREE.VRM, GLTFLoader, and OrbitControls, rendering the avatar from a local .vrm model.

AI-generated description

▶︎ What's this?:　RM motion capture demo using pixiv three-vrm

▶︎ Reference: https://github.com/pixiv/three-vrm

[Gist] https://gist.github.com/Hirosaji/00d3c9ceba65ef7ddf0f2890968132dc

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

An interactive 3D visualization of a motion autoencoder, showing animated humanoid skeletons that transition between poses in real time. The scene renders skeletal figures with colored joint connections against a dark fogged background, with camera controls allowing orbit around the models. A web-based interface loads three ONNX models (motion VAE, target pose, and joystick) and executes them via ONNX.js with a WebGL backend, while Three.js handles the 3D scene rendering and animation loop. A dat.gui control panel provides parameter adjustment for exploring the latent motion space.

TTimmyLu
71% match
Loading thumbnail…

three.js

Three colored cubes rotate continuously in a gray 3D scene, each spinning on its X and Y axes at staggered speeds. The visualization uses Three.js with a WebGL renderer to draw the cubes, a PerspectiveCamera, DirectionalLight, and MeshPhongMaterial for shading. The animation loop increments rotation based on time, driven by requestAnimationFrame, with cubes positioned at different X coordinates.

Ssabrinamochi
63% match
Loading thumbnail…

Hello vZome

This example shows a rotating three-dimensional box rendered in a browser using React and react-three-fiber’s Canvas component. The scene contains a single mesh with box buffer geometry and normal material, animated via useFrame to update rotation on each frame. React binds the htm template literal syntax, while ReactDOM renders the canvas into the page’s root element. The code also references a vZome file, though its model is not yet integrated into the visualization.

SScott Vorthmann
63% match
Loading thumbnail…

My first three.js app

This example renders a 3D model of a two-cylinder engine inside a minimal web page. It uses Three.js with a WebGL renderer, importing the model from a local GLB file via the GLTFLoader. The scene adds the model at a fixed position and scale, sets up a perspective camera, and performs a single static render. The code also includes commented-out boilerplate for animating a rotating cube, but the active behavior is limited to loading and displaying the engine model.

AAron Gaden
62% match
Loading thumbnail…

three.js webgl - morph targets - horse

A three-dimensional horse model with animated morph targets rotates in a circular path around its center. The scene uses Three.js with the GLTFLoader to load a Horse.glb model, and an AnimationMixer plays its built-in clip. Two directional lights illuminate the mesh, which is scaled and set against a light gray background. The camera orbits continuously while the animation updates each frame, demonstrating WebGL rendering.

CCurran Kelleher
61% 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
61% match
Loading thumbnail…

My first three.js app

A green cube rotates continuously in a three-dimensional scene rendered using Three.js. The example demonstrates basic 3D visualization setup with a scene, perspective camera, and WebGL renderer. It creates a cube mesh from a BoxGeometry with a MeshBasicMaterial, positions the camera, and uses a requestAnimationFrame loop to incrementally update the cube’s rotation on the x and y axes. The code constructs the entire visualization directly in JavaScript within an HTML page, sourcing the Three.js library from the official threejs.org build.

Hhenrik.voigt@uni-jena.de
60% match
Loading thumbnail…

three.js

This example combines 2D map tiles with a 3D plane using Three.js and OpenLayers. It loads New York City basemap and label layers from a WMTS service, then wraps the rendered map canvas as a texture onto a PlaneGeometry. TrackballControls enable interactive camera rotation around the mapped plane. The scene renders via WebGL, with the map texture updating on each map postrender event.

Ssabrinamochi
60% match