Skip to main content
SimilarExport ZIP
100%

My first three.js app

✓ Published0🌍 Public
AAron Gaden
Last edited Nov 14, 2021
Created on Nov 13, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

My first Three.js app

A green cube spins slowly, rendered against a black background. The example demonstrates a minimal Three.js scene. It uses a `PerspectiveCamera` and a `WebGLRenderer` to draw a box geometry with a `MeshBasicMaterial`. The cube’s rotation is updated in a `requestAnimationFrame` loop, with horizontal and vertical velocities that accumulate random jitter, producing a slightly wobbly, organic motion. A second version shows the cube as a white wireframe.

11wheel
79% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal Three.js scene featuring a rotating green cube rendered with WebGL. The code sets up a perspective camera, a box geometry with basic mesh material, and an animation loop that updates the cube’s rotation each frame. It uses Three.js’s `Scene`, `PerspectiveCamera`, `WebGLRenderer`, and `requestAnimationFrame` to create the 3D visualization. The page also includes a static HTML message styled with CSS, while the JavaScript for the cube is embedded directly in the document.

RRomersims
72% 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…

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
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
69% 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…

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