Getting Started with Three.js: Building a 3D Login Page with Scene, Camera, Lights, and Animations

In this tutorial the author (identified as xx Media Director) demonstrates how to build a 3D login page using Vue 3 and three.js, showing a preview image of the final effect.

The fundamentals of three.js are introduced: a 3D scene requires a scene object, light sources, and a camera that acts as the viewer’s eye.

The basic workflow consists of four steps: creating a THREE.Scene , adding lights, configuring a camera (orthographic or perspective), and initializing a THREE.WebGLRenderer to render the scene.

For the scene, you can set a background color or create a box geometry with a texture applied to the inside, which is useful for 360° panoramas. Example code:

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 0, 10000);
const depth = 1400;
const geometry = new THREE.BoxGeometry(1000, 800, depth);
const texture = new THREE.TextureLoader().load('bg.png');
const material = new THREE.MeshBasicMaterial({map: texture, side: THREE.BackSide});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Lighting can be ambient, point, directional, etc. Example:

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
const light_rightBottom = new THREE.PointLight(0x0655fd, 5, 0);
light_rightBottom.position.set(0, 100, -200);
scene.add(light_rightBottom);
scene.add(ambientLight);

The camera section explains orthographic cameras (size‑independent rendering, useful for 2D UI) and perspective cameras (mimicking human vision). Important parameters such as fov , aspect , near , and far are described, with sample code:

const container = document.getElementById('login-three-container');
const width = container.clientWidth;
const height = container.clientHeight;
const fov = 15;
const distance = width / 2 / Math.tan(Math.PI / 12);
const zAxisNumber = Math.floor(distance - depth / 2);
const camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
camera.position.set(0, 0, zAxisNumber);
const cameraTarget = new THREE.Vector3(0, 0, 0);
camera.lookAt(cameraTarget);

The renderer uses THREE.WebGLRenderer to create a canvas, set its size, and render the scene. An animation loop with requestAnimationFrame is added to rotate the scene:

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);
const loopAnimate = () => {
  requestAnimationFrame(loopAnimate);
  scene.rotateY(0.001);
  renderer.render(scene, camera);
};
loopAnimate();

Additional effects are built step by step: a small earth sphere in the top‑left corner, continuous rotation of the sphere, a star field generated with THREE.Points , and animated movement of stars along the z‑axis.

const texture = THREE.TextureLoader().load('earth_bg.png');
const material = new THREE.MeshPhongMaterial({map: texture, blendDstAlpha: 1});
const sphereGeometry = new THREE.SphereGeometry(50, 64, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
const Sphere_Group = new THREE.Group();
Sphere_Group.add(sphere);
Sphere_Group.position.set(-400, 200, -200);
scene.add(Sphere_Group);
Sphere_Group.rotateY(0.001);

Clouds are created with a plane geometry and moved along a Catmull‑Rom curve, while their opacity and scale are animated to simulate realistic motion.

const route = [
  new THREE.Vector3(-width / 10, 0, -depth / 2),
  new THREE.Vector3(-width / 4, height / 8, 0),
  new THREE.Vector3(-width / 4, 0, zAxisNumber)
];
const curve = new THREE.CatmullRomCurve3(route, false);
const tubeGeometry = new THREE.TubeGeometry(curve, 100, 2, 50, false);
const tubeMaterial = new THREE.MeshBasicMaterial({opacity: 0, transparent: true});
const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
scene.add(tube);
const cloudGeometry = new THREE.PlaneGeometry(500, 200);
const cloudTexture = new THREE.TextureLoader().load('cloud.png');
const cloudMaterial = new THREE.MeshBasicMaterial({
  map: cloudTexture,
  blending: THREE.AdditiveBlending,
  depthTest: false,
  transparent: true
});
const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
scene.add(cloud);

Finally, the cloud movement function is called inside the animation loop, completing the three.js portion of the login page. Remaining elements such as the moon surface, login form, and astronaut are handled with CSS positioning and animations.

The full source code is available on GitHub, and the author plans to write a follow‑up article on building a 3D knowledge graph with three.js.