Three.js Colored Cube - Threejs Typing CST Test

Three.js Colored Cube — Threejs Code

A cube with different face colors rendered in Three.js.

# threejs/demo/colored_cube.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const materials = [
	new THREE.MeshBasicMaterial({color: 0xff0000}),
	new THREE.MeshBasicMaterial({color: 0x00ff00}),
	new THREE.MeshBasicMaterial({color: 0x0000ff}),
	new THREE.MeshBasicMaterial({color: 0xffff00}),
	new THREE.MeshBasicMaterial({color: 0xff00ff}),
	new THREE.MeshBasicMaterial({color: 0x00ffff})
];
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
camera.position.z = 5;
function animate() {
	requestAnimationFrame(animate);
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	renderer.render(scene, camera);
}
animate();

Threejs Language Guide

Three.js is a popular open-source 3D JavaScript library that simplifies creating, displaying, and animating 3D graphics in web browsers using WebGL. It provides abstractions for cameras, lights, materials, geometries, and scene management, making 3D web development accessible and efficient.

More Threejs Typing Exercises

Practice Other Languages