Pika 3D Dice

100%

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Sep 27, 2019

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.

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

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.

Mmeperezcuello

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

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

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

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

65% match

Loading thumbnail…

Untitled

A grid of three-dimensional cubes with negative heights renders in SVG via d3-3d’s `d3._3d()` shape pipeline, displaying numeric labels above each cube via `text` elements. The cubes are sorted using the 3D library’s `.sort` method, while face paths and labels are drawn using its provided drawing functions. An “update” button reinitializes randomly generated cube data, and a drag interaction rotates the entire scene by adjusting `.rotateX` and `.rotateY` angles, with transitions of 1000 ms for updates and instant redraw for drags.

CCH SAMPATH

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

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

64% match