Skip to main content
SimilarExport ZIP
100%

Hello vZome

✓ Published0🌍 Public
SScott Vorthmann
Last edited Jan 31, 2021
Created on Jan 30, 2021
Forked from React Starter

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.

AI-generated description

React-vZome Starter code.

This is not working yet. I'm trying to use react-vzome as an ES6 module, but it isn't working. I'm surely doing something wrong.

MIT Licensed

Similar vizzes

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
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
69% match
Loading thumbnail…

Hello HTML

This example shows a simple static SVG face made of three circles—two small eyes and a large yellow head—rendered on a 960-by-500 canvas. The code uses React 18 via a UMD script, though the bundle is not loaded, and relies on inline SVG elements for drawing without any data or interaction. The page intentionally mixes plain HTML, CSS for margin reset and overflow hiding, and a placeholder JavaScript file that logs to the console. It demonstrates minimal SVG structure within a React setup, with no dynamic behavior or external libraries beyond React’s basic import.

Zzaaaza
69% 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
69% match
Loading thumbnail…

Untitled

This example demonstrates a React-based interactive visualization that renders a dynamic particle system using HTML5 Canvas. The code leverages D3’s force simulation (`d3.forceSimulation`) to compute physics-based movement for multiple circular nodes, which are drawn each animation frame via the Canvas API. Each node’s position is updated continuously based on velocity and collision forces, creating a fluid, organic motion effect. The visualization is built with pure JavaScript and styled minimally through CSS, showcasing how React integrates with D3 and Canvas for real-time graphics without external charting libraries.

Bbusrabozkus
69% match
Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Ssabrinamochi
68% match
Loading thumbnail…

D3

This example uses D3 v3 within a React framework to render an SVG visualization on a nearly full-screen canvas. The code sets up a basic HTML page with an SVG element sized to 960 by 500 pixels, demonstrating the integration of D3’s layout and rendering capabilities with React’s component structure. The visualization relies on D3’s data-driven approach, though the specific data or simulation details are not defined in the provided files. The example highlights how SVG elements are manipulated via JavaScript, with CSS controlling page margins and overflow to create a clean, immersive display.

Cczhang746
68% match
Loading thumbnail…

my d3 canvas

This example displays a large, centered “Hello D3!” message with heavy CSS styling, demonstrating a minimal integration of D3 within a React framework. The page uses plain HTML and CSS for layout and typography, with an empty JavaScript script tag that leaves room for D3 code. The visualization highlights the simplicity of combining D3 v3 with standard web technologies, showing how a basic canvas or SVG scene can be set up within a React project. The data source is absent, focusing instead on the foundational structure for future D3-based graphics.

Kkosakase
67% match