Pika 3D Dice

100%

✓ Published1🌍 Public

Last edited Oct 16, 2019

Created on Sep 25, 2019

A 3D cube displays a Pikachu face texture on all sides, rendered as a spinning dice above a checkerboard ground. The visualization uses Three.js for WebGL rendering, a CanvasTexture generated from a D3-drawn SVG, and OrbitControls for camera interaction. D3’s zoom behavior also applies incremental rotation, while keyboard controls move the cube. A point light and shadow effects enhance the scene's depth.

AI-generated description

This a a variant of the previous developed Viz Pikachu Face. Instead of having the the face on a 2D environment, the face was plotted onto a 3D box from Three.js lib. This was for learning purpose, and still some features were missing, that will be added on futures revisions.

Controls:

Pressed Right mouse click, rorate the camera. Note is a little glitch since the object is rotating at the same time.
Pressed Right mouse click, moved the camera in x and z axis.
Scroll to move the camera in y axis.
Spacebar to reset the view.

A 3D scatter plot using Three.js and D3.

Canvas technique described in Scaling HTML canvases for HiDPI screens.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pika 3D Dice

Three.js and D3 render a cube mapped with a hand-drawn Pikachu face on a canvas texture, creating a 3D dice with a checkerboard ground plane and point-light shadowing. The cube rotates automatically via a d3.zoom transform, while the camera can be orbited, panned, and zoomed with THREE.OrbitControls. Users can also move the cube along the x and y axes with WASD keys and reset its position with the spacebar.

PPeter S

96% match

Loading thumbnail…

Pikachu Face

This example renders a stylized Pikachu face using D3.js and React. The visualization constructs the character’s face from SVG shapes: ellipses for eyes and cheeks, circles for inner eye highlights and pupils, and D3’s `arc` function to create the curved mouth. The code uses D3’s `arc` API to generate the mouth paths and relies on React for composing the SVG elements. The drawing is purely programmatic—there is no external data source—and is displayed as a static vector graphic in the browser.

Mmeperezcuello

71% match

Loading thumbnail…

JS Bin

A spinning 3D cube displays a live digital clock on each face, using Three.js for WebGL rendering. The clock face itself is drawn into a 2D canvas via the Canvas API (`fillText`, `fillRect`), then mapped onto the cube as a `THREE.Texture` updated each frame. The animation loop rotates the mesh while calling `texture.needsUpdate` to refresh the time display, combining a raw canvas with a Three.js `MeshBasicMaterial`. The scene uses a perspective camera and box geometry sized 200 units.

MMAKIO135

69% match

Loading thumbnail…

3D Cubes

The visualization renders a grid of 3D cubes in an isometric projection using React and SVG, with each cube composed of three visible faces: a front square, a top polygon, and a right polygon. The cube faces are drawn as separate SVG polygons using React components (`CubeFront`, `CubeTop`, `CubeRight`, `AbstractCubeSide`), with coordinates calculated from a front square and a fixed skew depth. The grid is arranged in a 2x2 layout with an additional series of top faces extending diagonally, creating a layered effect. The example uses React 17 and D3 v7, though D3 is loaded but not directly utilized in the rendering logic.

MMichael

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

67% match

Loading thumbnail…

3D Cube of Spheres

This visualization displays a 4x4x4 cube composed of 64 colored spheres, with a hue gradient varying across each axis and a gentle rotation animation over a dark, starry background. The scene is rendered in WebGL using Three.js, featuring perspective projection, directional and ambient lighting, and interactive orbit controls for rotating, zooming, and panning. The code organizes configuration parameters in a separate module and uses `THREE.SphereGeometry`, `MeshPhongMaterial`, and `OrbitControls` to construct and manipulate the 3D environment.

CCurran Kelleher

66% match

Loading thumbnail…

bonus ice

A grid of 3D cubes rises and falls over a flat plane, each cube’s height representing a numerical value from a static dataset. Users drag the scene to rotate it in three dimensions, revealing the bars from any angle. The visualization uses d3-3d to project cube vertices into two-dimensional SVG paths, with d3.scaleOrdinal assigning colors. Each cube displays its height as a tweened text label on its top face. The rendering is SVG, with animations driven by D3 transitions during rotation.

PPujitha14challagulla

66% match

Loading thumbnail…

HiDPI 3D Scatter Plot

A HiDPI 3D scatter plot renders ten thousand cubes on a checkerboard ground plane using Three.js. The visualization merges individual cube geometries into a single mesh via `THREE.BufferGeometryUtils.mergeBufferGeometries` and applies normal-based coloring. Data comes from a Medical Cost CSV loaded with D3's `csv` function. The camera orbits interactively through Three.js OrbitControls, while the canvas is scaled by a factor of two for high-pixel-density displays.

Mmeperezcuello

65% match