three.js webgl - simple text from json

100%

three.js webgl - simple text from json

✓ Published0🌍 Public

Last edited Apr 13, 2020

Created on Apr 13, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

72% match

Loading thumbnail…

hello-point-cloud

Three.js renders a small ASCII-art point cloud in 3D space, with each glyph’s pixel position offset into a cube of 1,000 randomly placed white points. The `THREE.OrbitControls` library enables interactive rotation, zoom, and pan, while a `d3.timer` loop drives continuous re-rendering of the `WebGLRenderer` scene. The code constructs a perspective camera, defines a `PointsMaterial` with vertex colors, and builds geometry via `THREE.BufferGeometry`, producing a floating, explorable message formed from millions of scattered particles.

11wheel

72% match

Loading thumbnail…

threejs_attempt

This example displays a static HTML page with the text “Hello myHTML” and logs “Hello JavaScript!” to the browser console. It uses no data visualization or rendering libraries; instead, it relies on plain HTML, CSS, and JavaScript. The page sets a large font size via CSS and demonstrates basic script execution in Three.js’s absence, serving as a minimal starter template.

Nnstafford

71% match

Loading thumbnail…

transform 3d

This example builds a 3D cylindrical text display using HTML, CSS, and JavaScript with the Zepto.js library. Each character of a paragraph is wrapped in a `<span>` and given a random `--z` offset, creating a scattered, three-dimensional ring effect. The entire cylinder rotates via a CSS `@keyframes` animation that applies `rotateX` and `rotateY` transforms, while the text itself uses `translateZ` to flow in and out of position. The visual output relies on CSS `perspective` and `transform-style: preserve-3d` to simulate depth.

Uumgi

71% match

Loading thumbnail…

transform 3

This example uses HTML, CSS, and JavaScript to create an animated 3D cylinder of text. Randomly placed paragraphs with placeholder Latin and Japanese characters are wrapped in infinitely spinning cylindrical layers, with a slowly tilting camera. The code applies per-character transforms using CSS custom properties, and the Zepto.js library is used to manipulate the DOM and set styles. The project uses React as noted in the metadata.

Uumgi

70% match

Loading thumbnail…

Three JS Starter

This example demonstrates a minimal setup for integrating D3 version 7 with a WebGL-powered Three.js scene. It renders a blank canvas element positioned through CSS, while the JavaScript imports D3’s `select` function to insert the text “Hello D3 version 7” into the page body, alongside the `dat.gui` library for potential controls. The code shows how to load D3 from a CDN and combine it with external libraries, though it performs no data visualization or simulation. The rendering approach is purely static, outputting to the DOM and a WebGL canvas without any drawing logic.

RRomersims

70% match

Loading thumbnail…

React & D3 Starter

A rotating torus knot rendered in three.js WebGL demonstrates a React component lifecycle. The App component instantiates a Three.js scene, perspective camera, and WebGL renderer, appending the canvas to a ref-mounted div. A `MeshPhongMaterial` with a neon specular highlight receives directional lighting, while the animation loop increments rotation on both axes. The example integrates React with imperative Three.js setup, using `useEffect` for scene creation and cleanup.

MMichael Bergerson

70% match