Creating a Time‑Travel Tunnel Effect with Three.js

We start by reviewing the basic coordinate system of Three.js: the X axis points right, Y up, and Z forward, and the core objects needed for a 3D scene— scene , camera , light , and renderer .

After creating a WebGLRenderer and adjusting its size to the window, a perspective camera is added with a 45° field of view, an aspect ratio matching the canvas, and near/far planes of 0.1 and 1000.

A point light is placed at the same position as the camera to illuminate the scene. The first mesh we render is a simple green cube using BoxGeometry and MeshBasicMaterial , which demonstrates basic positioning, scaling, and rotation.

To give the cube shading we replace MeshBasicMaterial with MeshPhongMaterial and add the point light, showing how lighting interacts with materials.

The core of the effect is a cylindrical tunnel created with new THREE.CylinderGeometry(30, 50, 100, 32, 32, true) . The geometry is wrapped in a MeshPhongMaterial that uses a texture loaded via THREE.TextureLoader . The texture is set to repeat in both S (horizontal) and T (vertical) directions and its offset is animated each frame to simulate motion.

We rotate the cylinder around the Z axis, then around the X axis by –π/2 so the opening faces the camera, and finally animate its Y‑axis rotation to create the illusion of traveling through the tunnel.

For a dynamic color effect we enable transparent and use the texture as an alphaMap , then update the material’s color each frame with material.color.setHSL(H, 0.5, 0.5) , where H cycles from 0 to 1.

A simple rectangular base is added using another BoxGeometry and a metal texture, positioned behind the tunnel to resemble a time‑machine chassis.

The complete animation loop calls renderer.render(scene, camera) , updates the tunnel rotation, texture offset, and HSL hue, and requests the next animation frame.

All source code (under 100 lines) is available on GitHub at https://github.com/QuarkGluonPlasma/threejs-exercize , and the article ends with a call to action for readers to follow, like, and bookmark the tutorial.