three.js webgl - morph targets - horse

100%

three.js webgl - morph targets - horse

✓ Published0🌍 Public

Last edited Aug 2, 2019

Created on Aug 2, 2019

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.

AI-generated description

An initial test to see if we can get Three.js examples running in VizHub. Not quite working yet!

MIT Licensed

Similar vizzes

Loading thumbnail…

threejs-sphere

A red Three.js sphere moves downward in an animated WebGL scene, with repeatedly spawned random point lights flashing around it. The sphere’s position is updated each frame based on elapsed time, creating a falling arc, while new white lights appear at random locations, producing flickering illumination on the sphere’s Lambert-shaded surface. The example demonstrates basic Three.js scene setup, mesh creation, lighting, and requestAnimationFrame-driven rendering.

11wheel

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

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

63% match

Loading thumbnail…

three.js points

A cluster of red points, arranged as a sphere, rotates slowly in three-dimensional space against a gray background. The example demonstrates the basic use of Three.js with a WebGL renderer, constructing a sphere geometry with specified width and height segments. A directional light illuminates the points material, and the animation updates the rotation of the points object over time using `requestAnimationFrame`.

Ssabrinamochi

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-vrm example

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.

HHirosaji

61% match

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

61% match

Loading thumbnail…

CSV Import2+morph

A D3.js CSV import feeds yearly numerical data into a WebGL morph target animation built with Three.js. The scene shows an animated sphere that continuously rotates and morphs between two shapes while orbiting with user-controllable camera via OrbitControls. The data.js file parses the two-column dataset using `d3.csv`, logging selected values to the console. Meanwhile, the Three.js script loads a GLTF model with morph targets and animates its influences over time, with point sprites attached to the geometry. This combines static data loading with dynamic, real-time 3D rendering.

AAllInclusive

61% match